在 AMP 頁面中整合網頁故事

網頁故事是一種全螢幕沉浸式內容體驗，使用者可以依照自己的步調點擊或滑動瀏覽。它們存在於開放網路上，並擁有自己的 URL，因此易於分享。本指南將教您如何在有效的 AMP 頁面中整合網頁故事，並將其呈現給讀者。

包含 amp-story-player

網頁故事依賴 amp-story-player 元件，以在有效的 AMP 網站上整合和播放故事。透過在文件的 head 中包含自訂指令碼，來實作 amp-story-player。

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

然後將 amp-story-player 元素 HTML 放置在您頁面的 <body> 內的所需位置。

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script
    async
    custom-element="amp-story-player"
    src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"
  ></script>
</head>
<body>
  <amp-story-player layout="fixed" width="360" height="600">
    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/">
      <img src="https://amp.dev.org.tw/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" data-amp-story-player-poster-img alt="...">
      Stories in AMP - Hello World
    </a>
  </amp-story-player>
</body>

在 playground 中開啟此程式碼片段

顯示網頁故事

透過在 <amp-story-player> 元素中包含一個 <a> 標籤，並將 href 屬性指向所需的網頁故事 URL，來連結到網頁故事。href 端點可以是託管網頁故事的 URL 或相對路徑。將故事標題放在 <a> 標籤內。

指定多個網頁故事

在 <amp-story-player> 元素中，包含所需數量的 <a> 標籤，每個標籤的 href 屬性都指向所需的網頁故事 URL。

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script
    async
    custom-element="amp-story-player"
    src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"
  ></script>
</head>
<body>
  <amp-story-player layout="fixed" width="360" height="600">
    <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s1"></a>
    <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s2"></a>
    <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s3"></a>
  </amp-story-player>
</body>

在 playground 中開啟此程式碼片段

在故事之間導覽

行動裝置上的使用者可以使用「滑動」手勢導覽到下一個故事。桌上型電腦使用者必須先點擊瀏覽完一個完整的網頁故事，才能觀看下一個。