创建封面页
Web Story 中的页面由 <amp-story-page> 组件表示。在 amp-story 中，你可以有一个或多个 <amp-story-page> 组件，其中包含故事的每个单独的屏幕。文档顺序中指定的第一个页面是 Web Story 中显示的第一个页面。
要创建页面，请将 <amp-story-page> 元素添加为 amp-story 的子元素。为页面分配一个唯一的 id。对于我们的第一个页面，也就是封面页，让我们分配一个唯一的 id cover
<amp-story standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg">
<amp-story-page id="cover">
</amp-story-page>
</amp-story>
现在我们有了封面页的框架。但是，我们的故事仍然无效。在我们的页面中，我们需要指定至少一个图层。
页面中的图层
与图形中的图层一样，你可以在 AMP 故事页面中使用图层来创建视觉效果。图层彼此堆叠，因此，第一个图层是底层，下一个图层在其之上，依此类推。
我们的封面页实际上由两个图层组成
- 图层 1：用作背景的图像
- 图层 2：故事的标题和署名
创建图层 1
让我们将第一个图层添加到我们的封面页。该图层包含一个填充屏幕的图像。
通过添加 <amp-story-grid-layer> 元素作为 <amp-story-page> 的子元素来创建图层。由于我们希望图像填充屏幕，请为 amp-story-grid-layer 指定 template="fill" 属性。在图层内部，添加一个 amp-img 元素，用于 cover.jpg 文件，并确保它是响应式的（即，layout="responsive"），图像尺寸为 720 x 1280 像素。这是我们图层的样子
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/cover.jpg"
width="720" height="1280"
layout="responsive"
alt="">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
让我们看看页面的显示效果。在浏览器中打开页面：https://127.0.0.1:8000/pets.html。
它应该看起来像这样
创建图层 2
因此，我们有了背景，但现在我们需要第二个图层，它位于背景之上，并包含我们的标题和署名。要添加第二个图层，让我们完成与图层 1 相同的任务，但我们不使用 fill 模板，而是使用 vertical 模板。但是，在继续之前，让我们了解一下模板以及如何在 <amp-story-grid-layer> 中排列 AMP 和 HTML 元素。
使用模板布局元素
<amp-story-grid-layer> 元素以网格形式（基于 CSS 网格）布局其子元素。要指示你希望如何排列子元素，你需要指定以下布局模板之一
模板：填充 |
|
fill 模板使用图层中的第一个子元素填充屏幕。此图层中的任何其他子元素都不会显示。填充模板非常适合背景，包括图像和视频。 | |
模板：垂直 |
|
vertical 模板沿 y 轴布局子元素。元素与屏幕顶部对齐，并沿 x 轴占据整个屏幕。当你希望垂直堆叠元素一个接一个时，垂直模板非常有用。 | |
模板：水平 |
|
horizontal 模板沿 x 轴布局子元素。元素与屏幕的开头对齐，并沿 y 轴占据整个屏幕。当你希望水平堆叠元素一个接一个时，水平模板非常有用。 | |
模板：三分 |
|
thirds 模板将屏幕分为三个大小相等的行，并允许你将内容插入每个区域。你还可以指定一个名为 grid-area 的名称，以指示你希望内容位于哪个三分之一区域 - upper-third、middle-third 或 lower-third。命名网格区域对于更改元素出现的默认行为很有用。例如，如果图层中有两个元素，则可以指定第一个元素位于 grid-area="upper-third" 中，第二个元素位于 grid-area="lower-third" 中。 |
|
完成封面页
现在你了解了图层模板，让我们完成封面页的第二个图层。
对于图层 2，我们希望标题和署名位于顶部，并且我们希望元素一个接一个地排列，因此我们将指定 vertical 模板。我们的第二个 amp-story-grid-layer 跟在第一个之后，如下所示
<amp-story-grid-layer>
<!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
刷新你的浏览器并查看你的工作。我们的封面页已完成。
-