提供中繼資訊

開始我們的故事

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