AMP 中的網頁故事 - Hello World

簡介

瞭解如何建立您的第一個 AMP 網頁故事。amp-story 擴充功能為顯示視覺內容提供了一種新格式。

設定

AMP 網頁故事是使用 AMPHTML 編寫的，它們使用自己的 AMP 擴充功能：amp-story。第一步是在標頭中匯入 amp-story。

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

AMP 網頁故事可以使用其他 AMP 擴充功能，例如 amp-video。但是，AMP 網頁故事僅支援可用 AMP 擴充功能的子集。您可以在此處找到支援的擴充功能完整列表。

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

網頁故事可以使用 CSS 設定樣式

<style amp-custom>
  amp-story {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
  }
  amp-story-page * {
    color: white;
    text-align: center;
  }
  [template=thirds] {
    padding: 0;
  }
</style>

編寫網頁故事

網頁故事在 amp-story 標記內宣告。故事層級中繼資料透過屬性提供。（前四個屬性是強制性的；最後兩個是選用的，但建議使用。）請注意，此中繼資料擴充但不會取代結構化資料。

<amp-story standalone
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://amp.dev.org.tw/favicons/coast-228x228.png"
  poster-portrait-src="https://amp.dev.org.tw/static/samples/img/story_dog2_portrait.jpg"
  poster-square-src="https://amp.dev.org.tw/static/samples/img/story_dog2_square.jpg"
  poster-landscape-src="https://amp.dev.org.tw/static/samples/img/story_dog2_landscape.jpg">

一個網頁故事包含一或多個頁面。每個頁面都由 amp-story-page 元素宣告。頁面透過分層影片、圖片和文字來設計。在這裡，我們有一個使用兩層的頁面。一層用圖片填滿可用空間，另一層文字層顯示標題。

<amp-story-page id="page-1">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev.org.tw/static/samples/img/story_dog2.jpg"
             width="720" height="1280"
             layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>Hello World</h1>
    <p>This is an AMP Story.</p>
  </amp-story-grid-layer>
</amp-story-page>

在這裡，我們有一個由影片組成的頁面，該影片會自動播放和循環播放。

<amp-story-page id="page-2">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay loop
          width="720"
          height="960"
          poster="https://amp.dev.org.tw/static/samples/img/story_video_dog_cover.jpg"
          layout="responsive">
          <source src="https://amp.dev.org.tw/static/samples/video/story_video_dog.mp4" type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>

預先定義的進入動畫可以建立沒有影片的動態頁面。長度和初始延遲可以使用 animate-in-duration 和 animate-in-delay 屬性自訂。動畫範例顯示了所有可用的動畫效果。

<amp-story-page id="animation-demo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev.org.tw/static/samples/img/story_dog4.jpg"
             animate-in="fly-in-top"
             width="720" height="1280"
             layout="responsive"
             alt="...">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h2 animate-in="fly-in-bottom"
        grid-area="lower-third"
        animate-in-delay="0.4s">
      Best walk ever!
    </h2>
  </amp-story-grid-layer>
</amp-story-page>

網頁故事可以使用預先定義的版面配置來設定頁面樣式。在這裡，我們使用 thirds 範本。如需可用版面配置的概觀，請參閱版面配置範例。

<amp-story-page id="layout-demo">
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="upper-third"
             src="https://amp.dev.org.tw/static/samples/img/story_thirds_1.jpg"
             width="560" height="420"
             layout="responsive"
             alt="...">
    </amp-img>
    <amp-img grid-area="middle-third"
             src="https://amp.dev.org.tw/static/samples/img/story_thirds_2.jpg"
             width="560" height="420"
             layout="responsive"
             alt="...">
    </amp-img>
    <amp-img grid-area="lower-third"
             src="https://amp.dev.org.tw/static/samples/img/story_thirds_3.jpg"
             width="560"
             height="420"
             layout="responsive"
             alt="...">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

如果您包含參考 bookend JSON 設定的 amp-story-bookend，則包含其他資源連結的「書擋」面板將會出現在您網頁故事的最後一頁。

<amp-story-bookend src="https://amp.dev.org.tw/static/samples/json/bookend.json" layout="nodisplay">
</amp-story-bookend>

需要進一步說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

無法解釋的功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例