AMP 中的故事 - Hello World

简介

了解如何创建你的第一个 AMP Story。amp-story 扩展为显示视觉内容提供了一种新格式。

设置

AMP Stories 使用 AMPHTML 编写，并且使用它们自己的 AMP 扩展：amp-story。第一步是在头部导入 amp-story。

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

AMP Stories 可以使用其他 AMP 扩展，例如 amp-video。但是，AMP Stories 仅支持可用 AMP 扩展的子集。你可以在此处找到支持的扩展的完整列表。

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

可以使用 CSS 为故事设置样式

<style amp-custom>
  amp-story {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
  }
  amp-story-page * {
    color: white;
    text-align: center;
  }
  [template=thirds] {
    padding: 0;
  }
</style>

编写故事

故事在 amp-story 标签内声明。故事级别的元数据通过属性提供。（前四个属性是强制性的；最后两个属性是可选的，但建议使用。）请注意，此元数据增强了结构化数据，但不能替换它。

<amp-story standalone
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://amp.js.cn/favicons/coast-228x228.png"
  poster-portrait-src="https://amp.js.cn/static/samples/img/story_dog2_portrait.jpg"
  poster-square-src="https://amp.js.cn/static/samples/img/story_dog2_square.jpg"
  poster-landscape-src="https://amp.js.cn/static/samples/img/story_dog2_landscape.jpg">

一个故事由一个或多个页面组成。每个页面都由一个 amp-story-page 元素声明。页面通过分层视频、图像和文本来设计。在这里，我们有一个使用两个图层的页面。一个图层用图像填充可用空间，另一个文本图层显示标题。

<amp-story-page id="page-1">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.js.cn/static/samples/img/story_dog2.jpg"
             width="720" height="1280"
             layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>Hello World</h1>
    <p>This is an AMP Story.</p>
  </amp-story-grid-layer>
</amp-story-page>

在这里，我们有一个由自动播放和循环的视频组成的页面。

<amp-story-page id="page-2">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay loop
          width="720"
          height="960"
          poster="https://amp.js.cn/static/samples/img/story_video_dog_cover.jpg"
          layout="responsive">
          <source src="https://amp.js.cn/static/samples/video/story_video_dog.mp4" type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>

预定义的进入动画使得无需视频即可创建动态页面。可以使用 animate-in-duration 和 animate-in-delay 属性自定义长度和初始延迟。动画示例显示了所有可用的动画效果。

<amp-story-page id="animation-demo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.js.cn/static/samples/img/story_dog4.jpg"
             animate-in="fly-in-top"
             width="720" height="1280"
             layout="responsive"
             alt="...">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h2 animate-in="fly-in-bottom"
        grid-area="lower-third"
        animate-in-delay="0.4s">
      Best walk ever!
    </h2>
  </amp-story-grid-layer>
</amp-story-page>

故事可以使用预定义的布局来设置页面样式。在这里，我们使用 thirds 模板。有关可用布局的概述，请查看布局示例。

<amp-story-page id="layout-demo">
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="upper-third"
             src="https://amp.js.cn/static/samples/img/story_thirds_1.jpg"
             width="560" height="420"
             layout="responsive"
             alt="...">
    </amp-img>
    <amp-img grid-area="middle-third"
             src="https://amp.js.cn/static/samples/img/story_thirds_2.jpg"
             width="560" height="420"
             layout="responsive"
             alt="...">
    </amp-img>
    <amp-img grid-area="lower-third"
             src="https://amp.js.cn/static/samples/img/story_thirds_3.jpg"
             width="560"
             height="420"
             layout="responsive"
             alt="...">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

如果你包含引用书挡 JSON 配置的 amp-story-bookend，则一个包含其他资源链接的“书挡”面板将出现在你的故事的最后一页上。

<amp-story-bookend src="https://amp.js.cn/static/samples/json/bookend.json" layout="nodisplay">
</amp-story-bookend>

需要进一步解释？

如果此页面上的解释未涵盖你的所有问题，请随时联系其他 AMP 用户以讨论你的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的持续参与者，但我们也欢迎你为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例