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

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

  • 图层 1：作为背景的图像
  • 图层 2：故事的标题和署名

创建图层 1

让我们将第一个图层添加到封面页。该图层包含一个填充屏幕的图像。

通过将 <amp-story-grid-layer> 元素添加为 <amp-story-page> 的子元素来创建图层。由于我们希望图像填充屏幕，请为 amp-story-grid-layer 指定 template="fill" 属性。在图层内部，为 cover.jpg 文件添加一个 amp-img 元素，并确保它是响应式的（即，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 和 HTML 元素排列在 <amp-story-grid-layer> 中。

使用模板布局元素

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

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

上一章 下一章