提供元信息

开始我们的故事

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