AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

创建封面页

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 Story 页面中的图层来创建视觉效果。图层彼此堆叠，因此，第一个图层是底层，下一个图层在它之上，依此类推。

我们的封面页实际上由两个图层组成

  • 图层 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 模板使用图层中的第一个子元素填充屏幕。此图层中的任何其他子元素都不会显示。填充模板非常适合背景，包括图像和视频。
<amp-story-grid-layer template="fill"> <amp-img src="dog.png" width="720" height="1280" layout="responsive" alt="Dog"> </amp-img> </amp-story-grid-layer>
模板：垂直
vertical 模板沿着 y 轴布局子元素。这些元素与屏幕顶部对齐，并沿 x 轴占据整个屏幕。当您想要将元素一个接一个地垂直堆叠时，垂直模板非常有用。
<amp-story-grid-layer template="vertical"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </amp-story-grid-layer>
模板：水平
horizontal 模板沿着 x 轴布局子元素。这些元素与屏幕开始处对齐，并沿 y 轴占据整个屏幕。当您想要将元素一个接一个地水平堆叠时，水平模板非常有用。
<amp-story-grid-layer template="horizontal"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </amp-story-grid-layer>
模板：三分
thirds 模板将屏幕划分为三个大小相等的行，并允许您将内容插入每个区域。您还可以指定一个名为 grid-area 的名称，以指示您希望内容所在的第三部分 - upper-third、middle-third 或 lower-third。命名网格区域对于更改元素出现位置的默认行为很有用。例如，如果图层中有两个元素，您可以指定第一个元素位于 grid-area="upper-third" 中，第二个元素位于 grid-area="lower-third" 中。
<amp-story-grid-layer template="thirds"> <h1 grid-area="upper-third">元素 1</h1> <p grid-area="lower-third">元素 2</p> </amp-story-grid-layer>

虽然这些模板允许您在屏幕上直观地排列内容，但屏幕阅读器/辅助技术仍将按照底层标记中出现的顺序公布内容。确保文档标记中的内容顺序是合乎逻辑的，无论其视觉呈现方式如何。

完成封面页

既然您了解了图层模板，让我们完成封面页的第二个图层。

对于图层 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>

刷新浏览器并查看您的作品。我们的封面页已完成。

上一章 下一章