AMP
EN
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 簡體中文 波蘭語 越南語

重要事項：這份文件不適用於您目前選取的格式：網站！

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 故事子集。這是 Web Stories 的基礎技術。

版本說明

版本 說明
1.0 目前版本，自 2018-07-16 起。

AMP story 格式

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。
  • 海報圖片的長寬比應為：直向 3:4、橫向 4:3、正方形 1:1。
  • 如果海報圖片是從影片的影格衍生而來，縮圖應代表影片內容。例如，影片的第一個影格通常不具代表性。
  • 每張海報圖片都應符合建議的最小尺寸
    • 直向：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> 元素支援透過 cache="google" 屬性在原始文件上使用 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 屬性會以指定的顏色醒目提示元素的文字。如要醒目提示整個區塊，請將這個屬性直接新增至文字元素。如只要醒目提示文字，請將屬性和文字新增至內部的 <span>。請注意，這適用於 <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 (必要)

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

poster-portrait-src (必要)

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

poster-square-src (選用)

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

poster-landscape-src (選用)

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

entity (選用)

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

entity-logo-src (選用)

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

entity-url (選用)

故事建立實體平台的網址。例如 entity-url="https://example.com/profile/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 Stories 現在支援下列形式的網址

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