AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-story

描述

豐富的視覺故事格式。

 

必要指令碼

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

Web stories (網路故事) 是一種沉浸式、可輕觸且易於分享的故事格式。Web stories (網路故事) 是使用 AMP 架構建置的。amp-story 元件提供 AMP 故事的 AMP 子集。它是網路故事的基本技術。

版本注意事項

版本 描述
1.0 目前版本，自 2018-07-16 起。

AMP 故事格式

AMP 故事是一個完整的 AMP HTML 文件，由頁面組成，頁面內有圖層，圖層內有 AMP 和 HTML 元素，例如媒體、分析、文字等等。


樣板

以下標記是一個不錯的起點或樣板。複製此程式碼並儲存到副檔名為 .html 的檔案中。

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <title>Hello, amp-story</title>
    <link rel="canonical" href="http://example.ampproject.org/my-story.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
  </head>
  <body>
    <amp-story
      standalone
      title="Hello Story"
      publisher="The AMP Team"
      publisher-logo-src="https://example.com/logo/1x1.png"
      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    >
      <amp-story-page id="my-first-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg1.jpg"
            width="900"
            height="1600"
            alt=""
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Hello, amp-story!</h1>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="my-second-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg2.gif"
            width="900"
            height="1600"
            alt=""
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The End</h1>
        </amp-story-grid-layer>
      </amp-story-page>
    </amp-story>
  </body>
</html>

body 中的內容會建立一個包含兩個頁面的故事。每個頁面都有一個全版面背景圖片，頂部有一個簡單的文字字串。

amp-story 的必要標記

AMP 故事 HTML 格式遵循與有效 AMP HTML 文件相同的標記要求，以及以下額外要求

規則 描述
<amp-story standalone> 元素是 <body> 的唯一子元素。 識別文件是否為 AMP 故事。
包含 <script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script> 標記，作為 <head> 標記的第三個子元素。 包含並載入 amp-story JS 程式庫。
在 <head> 內包含 <link rel="canonical" href="$STORY_URL"> 標記。 連結指向故事本身，將故事識別為標準文件。

故事：amp-story

amp-story 元件代表整個故事。此元件本身實作 UI shell，包括處理手勢和導覽，以及插入應用程式 shell UI (控制項、進度列等)。

範例

<amp-story
  standalone
  title="My Story"
  publisher="The AMP Team"
  publisher-logo-src="https://example.com/logo/1x1.png"
  poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
  poster-square-src="https://example.com/my-story/poster/1x1.jpg"
  poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
  background-audio="my.mp3"
>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
</amp-story>

中繼資料指南

中繼資料屬性會在 Web Stories (網路故事) 生態系統中顯示故事的預覽，例如呈現引人入勝的預覽連結。這些屬性讓您的故事在未來適用於更豐富、嵌入式的 Web Stories (網路故事) 介面。

這些中繼資料屬性是補充，並未取代頁面上的任何結構化資料 (例如 JSON-LD)。我們仍然建議將結構化資料新增至您的 Web Stories (網路故事)。

publisher-logo-src 指南

這些指南適用於發布者標誌圖片

  • 提供點陣圖檔，例如 .jpg、.png 或 .gif。避免向量檔，例如 .svg 或 .eps。
  • 避免動畫圖片，例如動畫 gif。
  • 圖片標誌在背景顏色上應清晰可辨。
建議 建議 避免使用
  • 標誌應至少為 96x96 像素，且為完美的正方形。
  • 背景不應為透明。
  • 每個品牌使用一個標誌，且在所有 AMP 故事中保持一致。

海報指南（適用於 poster-portrait-src、poster-landscape-src 和 poster-square-src）

這些指南適用於故事海報圖片

  • 海報圖片應代表整個 AMP 故事。
  • 當 AMP 故事開始時，使用者應能看到海報圖片。為了適應尺寸調整、裁切或微小的樣式變更或預覽用途，中繼資料中使用的圖片檔案網址不需要與故事第一頁上的網址完全相符。
  • 提供點陣圖檔，例如 .jpg、.png 或 .gif。避免向量檔，例如 .svg 或 .eps。
  • 海報圖片的長寬比應為直向 3x4、橫向 4x3 和正方形 1x1。
  • 如果海報圖片是從影片中的影格衍生而來，縮圖應代表該影片。例如，影片中的第一個影格通常不具代表性。
  • 每張海報圖片應符合建議的最小尺寸
    • 直向：640 像素 x 853 像素
    • 橫向：853 像素 x 640 像素
    • 正方形：640 像素 x 640 像素

故事產生器中繼標記

選用的 HTML 中繼標記可用於指示文件是使用哪個故事產生器建立的。有兩個中繼標記，分別指示產生器名稱及其版本。

<meta name="amp-story-generator-name" content="Story generator name" />
<meta name="amp-story-generator-version" content="0.1" />

橫向模式和全版面桌面體驗選擇加入

如果在 <amp-story> 元素上指定 supports-landscape 屬性，則會

  • 允許在行動裝置橫向握持時觀看故事。
  • 將桌面體驗變更為沉浸式全版面模式，取代預設的三個直向面板體驗。

雖然目前這是選擇加入且為選用的功能，但我們強烈建議確保行動裝置上的使用者能夠以最適合其需求的任何方向觀看故事 - 否則，他們只會看到「此頁面最適合以直向模式觀看」的訊息。

用法：<amp-story ... supports-landscape>...</amp-story>

之前 之後

即時故事

使用 live-story 屬性將新頁面附加到故事，讓使用者即時查看。

此屬性會在最後一頁向使用者顯示新頁面的通知，並更新進度列。

即時故事的核心使用案例包括突發新聞或現場活動的報導，讓使用者能夠即時更新，而無需離開故事。頒獎典禮、體育賽事和選舉是一些範例。

運作方式

在背景中，當使用 live-story 的 AMP 故事顯示在用戶端時，AMP 執行階段會輪詢主機上的原始文件以取得更新。當用戶端收到回應時，它會篩選並將這些更新動態插入回用戶端的故事中。發布者可以自訂輪詢速率，以控制傳入要求的數量，而 Google AMP 快取等 AMP 快取可以執行最佳化，以減少伺服器回應酬載，從而節省用戶端頻寬和 CPU 週期。

輪詢

在大多數即時部落格的實作中，內容會由伺服器推送至頁面的用戶端執行個體，或用戶端輪詢 JSON 端點以接收更新。此處的實作方式不同，因為故事的用戶端執行個體會輪詢故事文件的伺服器副本，以取得 <amp-story> 元素內的更新。例如：如果使用者正在檢視從 AMP 快取提供的故事，則用戶端將輪詢託管在該 AMP 快取上的文件以取得更新；如果使用者正在檢視從網路發布者的原始網域 (例如「example.com」) 提供的文件，則用戶端將輪詢託管在該原始網域上的文件以取得更新。

這表示故事的發布者不需要設定 JSON 端點或推送機制即可使此功能運作。

內容會透過發布到具有有效 <amp-story> 標記的相同網址來更新。內容會在下一次輪詢期間提取到使用者的用戶端執行個體中。輪詢間隔可以使用 data-poll-interval 屬性進行設定。

停止輪詢

只要 live-story 屬性存在於 <amp-story> 元素上，用戶端就會持續輪詢文件的伺服器副本。請務必在發布故事的最後一次更新時，將 live-story-disabled 屬性設定為 <amp-story> 元素。這將會停止輪詢。

用法

  • 在 <amp-story> 元素上指定 id。
  • 將 live-story 屬性新增至 <amp-story> 元素。
  • [選用] 將 data-poll-interval 屬性新增至 <amp-story> 元素，以指定檢查新更新的時間間隔。
  • [選用] 當完成直播時，將 live-story-disabled 屬性新增至 <amp-story> 元素以停用輪詢。
  • 在每個 <amp-story-page> 上
    • 指定具有有效值的 data-sort-time 屬性。這是用於排序頁面的時間戳記。較高的時間戳記將在較舊的頁面項目之後插入。我們建議使用 Unix 時間。
<amp-story id="story1" live-story ...>
  <amp-story-page id="cover" data-sort-time="1552330790"> ... </amp-story-page>
  <amp-story-page id="page1" data-sort-time="1552330791"> ... </amp-story-page>
  <amp-story-page id="page2" data-sort-time="1552330792"> ... </amp-story-page>
</amp-story>

子元素 (amp-story 的子元素)

<amp-story> 元件包含一個或多個 <amp-story-page> 元件，其中包含故事的每個個別螢幕。文件中指定的第一個頁面是故事中顯示的第一個頁面。

選用自訂

使用 object-position 裁切 amp-img 和 amp-video 資產

object-position 屬性可用於 <amp-img> 和 <amp-video> 元素，以指定資產在其容器內的對齊方式 (裁切)。預設情況下，這些資產會置中，並且根據檢視區比例，其邊緣會從容器中裁切出來。由於資產的關注區域不一定是其中心，因此 object-position 可讓您指定圖片的哪個部分必須保持可見。此屬性接受 object-position CSS 屬性接受的任何值。

範例


可以使用這種方式的 object-position，將相同的圖片用於行動裝置直向和橫向桌面模式

<amp-img src="cat.jpg" alt="..." object-position="75% 40%"></amp-img>
在原始文件上使用免費的 Google 託管影片快取來最佳化 amp-video

故事中的 <amp-video> 元素支援在原始文件上使用 Google 影片快取，透過屬性 cache="google" 即可使用。影片快取會定期擷取和儲存影片內容，降低影片的服務成本，並產生具有不同品質設定的轉碼，以使位元率適應網路狀況。

使用 720p 或更高解析度的影片，以充分利用所有影片轉碼和自適應位元率演算法。

範例

<amp-video layout="fill" poster="img.png" cache="google" autoplay>
  <source src="video.mp4" type="video/mp4">
</amp-video>
data-text-background-color

data-text-background-color 屬性會以指定的顏色反白顯示元素的文字。若要反白顯示整個區塊，請將此屬性直接新增至文字元素。若只要反白顯示文字，請將屬性和文字新增至內部的 。請注意，這適用於 <amp-story-page> 內的任何位置，而不僅限於 <amp-story-grid-layer>。

範例

<amp-story-grid-layer template="vertical">
  <h2>
    <span data-text-background-color="crimson">
      Cat ipsum dolor sit amet, sleeps on my head, but lounge in doorway so if
      human is on laptop sit on the keyboard
    </span>
  </h2>
</amp-story-grid-layer>

範例

<amp-story-grid-layer template="vertical">
  <h2 data-text-background-color="crimson">
    Cat ipsum dolor sit amet, sleeps on my head, but lounge in doorway so if
    human is on laptop sit on the keyboard
  </h2>
</amp-story-grid-layer>

嵌入元件

我們支援在 amp-story-grid-layer 內嵌入某些元件，例如 <amp-twitter>。依預設，它們在故事中不是互動式的 (即點擊它們會前進到下一頁)，但透過使用 interactive 屬性，您可以顯示連結到原始來源的工具提示 (即在新分頁中開啟推文)。

範例

<amp-twitter
  width="100"
  height="100"
  layout="responsive"
  data-tweetid="1102562523524579328"
  interactive
>
</amp-twitter>

amp-story-grid-layer 中的連結

我們支援行內連結 <a> 作為 amp-story-grid-layer 的後代。每當點擊連結時，都會顯示工具提示 - 將對應的動作延遲到使用者再次點擊工具提示時。

請注意以下在 amp-story 中包含連結的指南

  • 太靠近故事頁面左側或右側邊緣的連結部分會讓位於導覽。
  • 佔據頁面區域太多的連結將被導覽忽略。

您可以透過指定以下屬性來自訂顯示在使用者互動式元素頂部的工具提示內容。如果未指定這些屬性，則會自動提供備用值。

data-tooltip-icon

接受圖示圖片所在的 src。

data-tooltip-text

工具提示出現時將顯示的字串。

範例

<a
  href="https://www.google.com"
  role="link"
  data-tooltip-icon="./assets/ic_amp_googblue_1x_web_24dp.png"
  data-tooltip-text="Go to page"
>
  Click me!
</a>

AMP 故事中可使用的其他元件

以下是 AMP 故事中可使用的其他元件，這些元件需要一些故事特定的注意事項。

如需更普遍可用的元件，請參閱允許的子元素清單。

屬性

standalone (必要)

識別 AMP 文件是否為故事。

title (必要)

故事的標題。

publisher (必要)

故事發布者的名稱。

publisher-logo-src (必要)

故事發布者標誌的正方形格式 (1x1 長寬比) 網址。例如 publisher-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是 96x96 像素的標誌。

poster-portrait-src (必要)

直向格式 (3x4 長寬比) 的故事海報網址。

poster-square-src (選用)

正方形格式 (1x1 長寬比) 的故事海報網址。

poster-landscape-src (選用)

橫向格式 (4x3 長寬比) 的故事海報網址。

entity (選用)

故事建立實體的名稱。例如：entity="User"，其中 User 在發布者的平台上建立故事。

entity-logo-src (選用)

故事建立實體標誌的正方形格式 (1x1 長寬比) 網址。例如 entity-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是 96x96 像素的標誌。

entity-url (選用)

故事建立實體平台的網址。例如 entity-url="https://example.com/profile/user"，連結到發布者平台上 User 的個人資料。

supports-landscape (選用)

在行動裝置上啟用橫向模式支援，並在桌面裝置上啟用全版面橫向體驗。

background-audio (選用)

在整個故事中播放的音訊檔案網址。

live-story (選用)

啟用即時故事功能。

live-story-disabled (選用)

停用即時故事功能。

data-poll-interval (選用)

與 live-story 屬性搭配使用。檢查新內容的時間間隔 (以毫秒為單位)。如果未提供 data-poll-interval，則預設為 15000 毫秒的最小值。小於 15000 毫秒的值無效。

desktop-aspect-ratio (選用)

此值以「水平:垂直」格式指定長寬比，其中「水平」和「垂直」都是整數。如果指定此屬性，則桌面單面板模式中故事的版面配置會設定為符合指定的比例。接受的比率介於 1:2 到 3:4 之間，任何超出範圍的值都會被箝制。

動畫

<amp-story-page> 內的每個元素都可以有進入動畫。

您可以透過在元素上指定一組動畫屬性來設定動畫；不需要額外的 AMP 擴充功能或設定。

如果需要預設集以外的內容，可以使用 <amp-story-animation> 元件設定自訂動畫。

動畫可以幫助讓您的 Web Story (網路故事) 在視覺上更令人興奮和引人入勝，但請謹慎使用。有些使用者可能會覺得長時間的連續動畫令人分心。其他使用者可能對動作敏感，並且可能因過度使用動作和視差效果而受到負面影響。

動畫效果

以下動畫效果可作為 AMP 故事的預設集

預設集名稱 預設持續時間 (毫秒) 預設延遲 (毫秒)
drop (掉落) 1600 0
fade-in (淡入) 600 0
fly-in-bottom (底部飛入) 600 0
fly-in-left (左側飛入) 600 0
fly-in-right (右側飛入) 600 0
fly-in-top (頂部飛入) 600 0
pulse (脈衝) 600 0
rotate-in-left (左側旋轉進入) 1000 0
rotate-in-right (右側旋轉進入) 1000 0
scale-fade-down (向下縮放淡出) 600 0
scale-fade-up (向上縮放淡出) 600 0
twirl-in (旋轉進入) 1000 0
whoosh-in-left (左側嗖聲進入) 600 0
whoosh-in-right (右側嗖聲進入) 600 0
pan-left (向左平移) 1000 0
pan-right (向右平移) 1000 0
pan-down (向下平移) 1000 0
pan-up (向上平移) 1000 0
zoom-in (放大) 1000 0
zoom-out (縮小) 1000 0

在 AMP By Example 上查看所有 AMP 故事動畫的即時示範。

動畫屬性

animate-in [必要]

使用此屬性指定進入動畫預設集的名稱。

範例：標題從頁面左側飛入。

<h2 animate-in="fly-in-left">
  Fly from left!
</h2>

animate-in-duration [選用]

使用此屬性指定進入動畫的持續時間，以秒或毫秒為單位 (例如，0.2 秒或 200 毫秒)。預設持續時間取決於您指定的動畫預設集。

範例：標題從頁面左側飛入，且動畫在半秒內完成。

<h2 animate-in="fly-in-left" animate-in-duration="0.5s">
  Fly from left!
</h2>

animate-in-timing-function [選用]

使用此屬性指定進入動畫的計時函數 (動畫曲線)。預設計時函數取決於您指定的動畫預設集。

範例：標題從頁面左側飛入，且動畫減速 (ease-out)。

<h2
  animate-in="fly-in-left"
  animate-in-timing-function="cubic-bezier(0.0, 0.0, 0.2, 1)"
>
  Fly from left!
</h2>

animate-in-delay [選用]

使用此屬性指定開始動畫之前的延遲時間。值必須大於或等於 0，以秒或毫秒為單位 (例如，0.2 秒或 200 毫秒)。預設延遲時間取決於您指定的動畫預設集。

範例：在 0.4 秒後，標題從頁面左側飛入，並在 0.5 秒內完成進入。

<h2 animate-in="fly-in-left" animate-in-duration="0.5s" animate-in-delay="0.4s">
  Fly from left!
</h2>

動畫延遲時間不保證完全精確。當掃描到第一個動畫元素時，在背景載入 amp-animation 擴充功能可能會導致額外延遲。屬性合約定義為將此動畫延遲至少 N 毫秒。這適用於所有元素，包括延遲時間為 0 秒的元素。

animate-in-after [選用]

使用此屬性串連或排序動畫 (例如，動畫 2 在動畫 1 完成後開始)。指定此元素的動畫將追蹤的動畫元素的 ID。元素必須存在於相同的 <amp-story-page> 上。延遲會在先前元素的動畫完成後套用。如需更多詳細資訊，請參閱下方的動畫排序章節。

例如，在以下程式碼中，object2 會在 object1 完成進入後動畫進入

<amp-story-page id="page1">
  <amp-story-grid-layer template="vertical">
    <div id="object1" animate-in="rotate-in-left">
      1
    </div>
    <div id="object2" animate-in="fly-in-right" animate-in-after="object1">
      2
      <!-- will start after object1 has finished -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

scale-start、scale-end [選用，僅適用於 zoom-in 和 zoom-out 動畫]

使用這兩個屬性進一步指定 zoom-in 和 zoom-out 動畫的參數。值必須大於或等於 0，且允許小數。zoom-in 的預設值為 scale-start: 1 和 scale-start: 3，zoom-out 的預設值則相反。

範例：圖片在 4 秒內從其大小的 2 倍放大到 5 倍。

<amp-img
  animate-in="zoom-in"
  scale-start="2"
  scale-end="5"
  animate-in-duration="4s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

translate-x [選用，僅適用於 pan-left 和 pan-right 動畫]

使用此屬性指定圖片在 pan-left/pan-right 動畫中的水平平移。值必須大於或等於 0 像素。預設值將平移指定圖片的整個寬度。

範例：圖片在 10 秒內向左平移 200 像素。

<amp-img
  animate-in="pan-left"
  translate-x="200px"
  animate-in-duration="10s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

translate-y [選用，僅適用於 pan-up 和 pan-down 動畫]

使用此屬性指定圖片在 pan-up/pan-down 動畫中的垂直平移。值必須大於或等於 0 像素。預設值將平移指定圖片的整個高度。

範例：圖片在 15 秒內向下平移 50 像素。

<amp-img
  animate-in="pan-down"
  translate-y="50px"
  animate-in-duration="15s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

pan-scaling-factor [選用，僅適用於 pan-left、pan-right、pan-up 和 pan-down 動畫]

目標會在 pan-left/pan-right/pan-up/pan-down 動畫中自動縮放，以確保在平移時不會超出目標邊界。

使用此屬性覆寫預設縮放比例計算，並指定靜態縮放比例。值必須大於 0，且允許小數。

範例：圖片在平移時縮放 1.3 倍。

<amp-img
  animate-in="pan-left"
  pan-scaling-factor="1.3"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

動畫排序

若要依序串連動畫，請使用 animate-in-after 屬性。給定鏈中的所有元素都必須存在於相同的 <amp-story-page> 中。沒有 animate-in-after 屬性的元素不屬於序列鏈，並且會在頁面進入時獨立啟動。

<amp-story-page id="my-sequencing-page">
  <amp-story-grid-layer template="vertical">
    <div class="circle" animate-in="drop-in" animate-in-duration="1.8s">
      1
      <!-- will start independently -->
    </div>
    <div
      id="rotate-in-left-obj"
      class="square"
      animate-in="rotate-in-left"
      animate-in-after="fade-in-obj"
      animate-in-delay="0.2s"
    >
      2
      <!-- will start after fade-in-obj has finished -->
    </div>
    <div
      class="square"
      animate-in-after="rotate-in-left-obj"
      animate-in="whoosh-in-right"
      animate-in-delay="0.2s"
    >
      3
      <!-- will start after rotate-in-left-obj has finished -->
    </div>
    <div
      id="fade-in-obj"
      class="circle"
      animate-in="fade-in"
      animate-in-duration="2.2s"
    >
      1
      <!-- will start independently -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

組合多個動畫

您可以在一個元素上套用多個進入動畫 (例如，元素飛入頁面並同時淡入)。無法將多個動畫預設集指派給單一元素；但是，可以巢狀方式放置具有不同進入動畫的元素，以將它們組合成一個動畫。

<div animate-in="fly-in-left">
  <div animate-in="fade-in">
    I will fly-in and fade-in!
  </div>
</div>

如果組合動畫應該在單獨元素的動畫結束後開始，請確保組成動畫的所有巢狀元素都將屬性 animate-in-after 設定為相同的 id。

分支

分支功能可識別個別的故事頁面。使用者可以在故事中跳轉、從開頭以外的其他位置開始故事，以及分享特定的故事頁面。範例是目錄或多項選擇按鈕。

網址中的片段參數支援此功能。

分支功能允許在故事中操作導覽。故事會追蹤導覽。如果使用者從 page-1 導覽到 page-5，然後導覽到 page-6，則向後導覽將遵循確切的路徑。向後導覽時，跳過的頁面不會向使用者公開，它將遵循 page-6、page-5，並返回到 page-1。

網址片段參數

透過分支功能，AMP 故事現在支援以下格式的網址

https://www.mydomain.com/good-story/#page=<page-id>

其中 page-id 是指 amp-story-page 的唯一 ID。您也可以在某些使用案例中將片段參數和 page-id 值用作錨點連結。

本地化

您應始終在故事的 <html> 標記上的 lang 屬性中包含語言代碼，例如英文內容的 <html ⚡ lang="en">。支援的語言代碼為

  • ar (阿拉伯文)
  • de (德文)
  • en-GB (英文，英國)
  • en (英文，美國)
  • es-419 (西班牙文，中/拉丁美洲)
  • es (西班牙文，西班牙)
  • fr-CA (法文，加拿大)
  • fr (法文，法國)
  • hi (印地文)
  • id (印尼文)
  • it (義大利文)
  • ja (日文)
  • ko (韓文)
  • nl (荷蘭文)
  • no (挪威文)
  • pt-BR (葡萄牙文，巴西)
  • pt (葡萄牙文，葡萄牙)
  • ru (俄文)
  • tr (土耳其文)
  • vi (越南文)
  • zh-TW (繁體中文)
  • zh (簡體中文)

此外，對於由右至左的語言，您可以在故事的 <html> 標記上包含 dir="rtl" 屬性。這也可以與語言代碼結合使用，例如 <html ⚡ lang="ar" dir="rtl">。

驗證

請參閱 AMP 驗證器規格中的amp-story 規則。

需要更多協助嗎？

您已閱讀此文件十幾次，但它仍然沒有真正涵蓋您的所有問題？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能？

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

前往 GitHub