提供中繼資訊

開始我們的故事

整個 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 屬性表示。這是標誌圖片的網址，格式為正方形，長寬比為 1:1。
故事的海報圖片，以 poster-portrait-src 屬性表示。這是海報的網址，圖片格式必須為直向，長寬比為 3:4。

讓我們將這些屬性新增至我們的 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