提供中繼資訊

開始我們的故事

整個 Web Story (網路故事) 由 <amp-story> 元件表示，該元件作為故事中所有頁面的容器。<amp-story> 元件也負責建立 UI 外殼，包括處理手勢和導覽。

<amp-story> 元件是自訂 AMP 元件，與所有自訂元件一樣，您必須為該元件將相關的腳本新增至 AMP 文件中。

開啟您文字編輯器中的 pets.html 檔案，並在 <head> 區段中，新增以下腳本

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

將 <amp-story> 元素新增至您文件的 <body> 中，並指定強制性的 standalone 屬性，如下所示

<body>
  <amp-story standalone>
  </amp-story>
</body>

請務必注意，為了擁有有效的 AMP 故事，<body> 元素必須只有一個子元素，即 <amp-story> 元件；所有其他元素都包含在 <amp-story> 中。

提供中繼資訊

為了讓故事能在網路上被發現，需要某些中繼資料來提供故事的迷你詳細資訊，例如

故事的標題，由 title 屬性表示 (例如，「寵物的樂趣」)。
發布者的名稱，由 publisher 屬性表示 (例如，「AMP 教學」)。
發布者的標誌，由 publisher-logo-src 屬性表示。這是標誌圖片的 URL，格式為正方形，長寬比為 1x1。
故事的海報圖片，由 poster-portrait-src 屬性表示。這是海報的 URL，圖片必須是直向格式，長寬比為 3x4。

讓我們將這些屬性新增至我們的 <amp-story> 標籤

<amp-story standalone
    title="Joy of Pets"
    publisher="AMP tutorials"
    publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
    poster-portrait-src="assets/cover.jpg">

除了這些必要的屬性之外，您還可以套用其他屬性。若要瞭解更多資訊，請參閱 <amp-story> 參考文件中的屬性章節。

注意 – 這些中繼資料屬性是補充，並不會取代頁面上的任何結構化資料 (例如 JSON-LD)。為了確保您的 Web Stories (網路故事) 能在所有平台上被發現，您應該將結構化資料新增至您的所有 AMP 頁面，包括 AMP 故事。

此時，我們有一個沒有任何內容的故事外殼。讓我們建立該頁面。

作者： @bpaduch