在 AMP 頁面中整合 Web Stories

Web Stories 是一種全螢幕沉浸式內容體驗，使用者可以依自己的步調點擊或輕觸瀏覽。它們以專屬網址存在於開放網路上，方便分享。本指南將教您如何在有效的 AMP 頁面中整合 Web Stories，並將其呈現給讀者。

加入 amp-story-player

Web Stories 仰賴 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> 內所需的location。

<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 中開啟此程式碼片段

顯示 Web Story

透過在 <amp-story-player> 元素中加入 <a> 標籤 (且 href 屬性指向所需的 Web Story URL) 來連結至 Web Story。href 端點可以是託管 Web Story 的 URL 或相對路徑。將故事標題放在 <a> 標籤中。

指定多個 Web Story

在 <amp-story-player> 元素中加入所需數量的 <a> 標籤，每個標籤的 href 屬性都指向所需的 Web Story 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 中開啟此程式碼片段

在故事之間導覽

行動裝置上的使用者可以使用「滑動」手勢來導覽至下一個故事。桌上型電腦使用者必須先點擊完整個 Web Story 才能檢視下一個故事。