AMP

Adding more pages

现在,您已熟悉如何为 AMP 故事添加网页,为我们的故事“宠物的乐趣”添加后续网页的步骤与此非常相似。请根据下面提供的信息,利用您目前已掌握的知识继续制作其余网页。如果您遇到问题,请查看已完成的 (pets-completed.html) 代码。

请注意,每个网页都需要有唯一的“id”属性(例如 id="page1")。

第 1 页:猫咪

演示如何在单个图层中显示图片和文字。

  • 包含 1 个图层:
    • 实施 vertical 模板。
    • 包含 3 个元素:
      • 1 个

        元素,标题为:猫咪

      • 1 个自适应 amp-imgcat.jpg,大小为 720 x 1280px)
      • 1 个 元素,用于引用以下语录:狗随招随到,猫闻声会意,但稍后才会来到您身边。--玛丽·布莱

第 2 页:狗狗

演示在使用两个图层时如何排列文字并显示全屏图片。

  • 包含 2 个图层:
    • 第 1 个图层:实施 fill 模板,并包含一个自适应 amp-imgdog.jpg,大小为 720 x 1280px)。
    • 第 2 个图层:实施 thirds 模板,并包含 2 个元素:
      • 1 个

        元素,标题为:狗狗

      • 1 个

        元素,用于指定 grid-area(占据 lower-third),并包含以下文字:犬类可能是最早被驯服的动物。数万年来,它们一直陪伴着人类。一些科学家认为,所有犬类(无论是家养的,还是野生的)都与南亚的小狼有着共同的祖先。

第 3 页:小鸟

演示如何为网页排列文字并显示会全屏播放的视频。

  • 包含 3 个图层:
    • 第 1 个图层:实施 fill 模板,并包含一个自适应 amp-imgbird.jpg,大小为 720 x 1280px)。
    • 第 2 个图层:实施 vertical 模板,并包含 1 个元素:
      • 1 个

        元素,标题为:小鸟

    • 第 3 个图层:实施 vertical 模板,并包含 1 个元素:
      • 1 个 元素,用于引用以下语录:鸟有三宝:羽毛、飞行的本领和歌声,其中羽毛是最次要的。--玛乔丽·艾伦·塞弗特
      • 第三个图层指定 class="bottom",以将子元素与屏幕底部对齐。
  • 网页显示时在后台播放音频文件。您可以在后台针对整个故事或单个网页播放音频。要针对某个网页播放音频,请将 background-audio="assets/bird-singing.mp3" 属性添加到 <amp-story-page> 元素中。

第 4 页:兔子

演示如何为网页排列文字并显示会全屏播放的视频。

  • 包含 3 个图层:
    • 第 1 个图层:实施 fill 模板,并包含一个自适应 amp-video (rabbit.mp4)。
      • 请务必在 部分为 amp-video 组件添加必需脚本,以便视频可以正常显示。
      • 指定 poster 图片 (rabbit.jpg)。这是有效 AMP 故事的必需属性。
      • 使用 autoplay 属性将视频设置为自动播放。这是有效 AMP 故事的必需属性。
      • 使用 loop 属性将视频设置为自动循环播放。
      • 将尺寸设置为 width="720"height="1280"layout="responsive"
    • 第 2 个图层:实施 vertical 模板,并包含 1 个元素:
      • 1 个

        元素,标题为:兔子

    • 第 3 个图层:实施 vertical 模板,并包含 1 个元素:
      • 1 个

        元素,包含以下文字:兔子可以学习执行简单的语音指令,而且会在听到自己的名字时跑过来,非常好奇好玩。

      • bottom CSS 类应用于该图层,以将子元素与屏幕底部对齐。

我们的故事“宠物的乐趣”即将完成。最后一页,我们将使用动画来集中展示所有宠物。