在 AMP 页面中集成故事

网络故事是一种全屏沉浸式内容体验，用户可以按照自己的节奏点击或轻触浏览。它们存在于开放网络中，拥有自己的网址，因此很容易共享。本指南将教您如何在 AMP 有效页面中集成网络故事，并向读者展示它们。

包含 amp-story-player

网络故事依赖于 amp-story-player 组件来集成和播放 AMP 有效网站上的故事。通过在文档的头部中包含自定义脚本来实现 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.org.cn/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>

在游乐场中打开此代码段

展示网络故事

通过在 <amp-story-player> 元素中包含一个 <a> 标记（其中 href 属性指向所需的 Web Story URL）来链接到 Web Story。href 终结点可以是托管的 Web Story 的 URL 或相对路径。将故事标题放在 <a> 标记中。

指定多个网络故事

在 <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>

在游乐场中打开此代码段

在 AMP 页面中集成故事

包含 amp-story-player

展示网络故事

指定多个网络故事

在故事之间导航