提供元資訊

故事的開始

整個 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 撰寫