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

重要事項：本文件不適用於您目前選取的格式 ads！

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 Framework (AMP 架構) 建構的。amp-story 元件提供 AMP 的 AMP 故事子集。它是 web stories (網頁故事) 的基礎技術。

版本注意事項

版本 描述
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>

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

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 外殼，包括處理手勢和導覽，以及插入應用程式外殼 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 Story (AMP 故事) 顯示在用戶端時，AMP 執行階段會輪詢主機上的原始文件以進行更新。當用戶端收到回應時，它會篩選並將這些更新動態插入回用戶端上的故事中。發布者可以自訂輪詢速率，以控制傳入要求的數量，而 Google AMP Cache (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 (必要)

故事發布者標誌的正方形格式 (長寬比 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"，連結到發布者平台上 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 (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