提供元信息

开始我们的故事

整个 Web Story 由 amp-story 组件表示，该组件充当故事中所有页面的容器。amp-story 组件还负责创建 UI 外壳，包括处理手势和导航。

amp-story 组件是一个自定义 AMP 组件，与所有自定义组件一样，您必须为该组件向 AMP 文档添加关联的脚本。

在您的文本编辑器中打开 pets.html 文件，并在 <head> 部分添加以下脚本

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

将 <amp-story> 元素添加到文档的 <body> 中，并指定强制性的 standalone 属性，如下所示

<body>
  <amp-story standalone>
  </amp-story>
</body>

请务必注意，要拥有有效的 AMP 故事，<body> 元素必须只有一个子元素，即 amp-story 组件；所有其他元素都包含在 amp-story 中。

提供元信息

为了让故事在网络上被发现，需要某些元数据来提供故事的迷你细节，例如

故事的标题，由 title 属性表示（例如，“宠物之乐”）。
发布者的名称，由 publisher 属性表示（例如，“AMP 教程”）。
发布者的徽标，由 publisher-logo-src 属性表示。这是徽标图像的 URL，采用 1x1 纵横比的方形格式。
故事的海报图像，由 poster-portrait-src 属性表示。这是海报的 URL，并且图像必须是 3x4 纵横比的纵向格式。

让我们将这些属性添加到我们的 amp-story 标记中

<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 参考文档。

注意 – 这些元数据属性是对页面上任何结构化数据（例如 JSON-LD）的补充，而不是替代。为了确保您的 Web Stories 在所有平台上被发现，您应该将结构化数据添加到您的所有 AMP 页面，包括 AMP 故事。

此时，我们有一个没有内容的 Story 外壳。让我们创建那个页面。

作者： @bpaduch