提供元信息

开始我们的故事

整个 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 story，<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 stories）添加结构化数据。

至此，我们有了一个没有任何内容的 story 外壳。让我们创建该页面。

作者： @bpaduch