创建结束画面

现在，所有网页均已添加完毕，下面我们来看看故事的最后一个屏幕，即“结束画面”。最后一个屏幕对故事进行收尾，您可以在该屏幕上提供社交分享按钮以及与故事相关的链接，使用户能够分享故事或深入了解您网站上的其他内容。

结束画面屏幕上的信息来自在 <amp-story-bookend> 标记中指定的 JSON 文件。对于我们的教程，我们已经有一个包含结束画面数据的 JSON 文件 (bookend.json)。

<amp-story-bookend> 标记必须是 amp-story 中的最后一个标记。因此，我们在末尾的 </amp-story> 标记前面添加 <amp-story-bookend></amp-story-bookend>。在 amp-story-bookend 标记中，将 src 属性指向 bookend.json 文件，并设置 layout="nodisplay"：

  </amp-story-page>
  <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>

如果刷新浏览器，并转到最后一个屏幕，则会看到以下结束画面：

我们来看看 JSON 文件。在文本编辑器中打开 bookend.json 文件。

每个结束画面屏幕都需要一个 bookendVersion，本教程为 v1.0：

"bookendVersion": "v1.0",

借助社交分享按钮，用户可以通过 Twitter、Facebook、Pinterest 等社交平台分享您的内容。您可以在 shareProviders 对象中指定社交分享提供程序，并创建一个数组，在其中包含各社交平台的类型名称。

对于本教程，我们选择 Facebook、Twitter 和电子邮件作为分享提供程序：

"shareProviders": [
  "facebook",
  "twitter",
  "email"
],

结束画面屏幕的其余空间用于显示相关内容。所有相关内容都包含在 components 对象中。

您可以使用各种组件显示相关内容和链接；每个组件都是使用类型属性指定的。我们来看看可用的组件：

{
  "type": "heading",
  "text": "More to read"
},

{
  "type": "small",
  "title": "Learn about cats",
  "url": "https://wikipedia.org/wiki/Cat",
  "image": "assets/bookend_cats.jpg"
},

{
  "type": "landscape",
  "title": "Learn about border collies",
  "url": "https://wikipedia.org/wiki/Border_Collie",
  "image": "assets/bookend_dogs.jpg",
  "category": "Dogs"
},

{
  "type": "portrait",
  "title": "Learn about macaws",
  "url": "https://wikipedia.org/wiki/Macaw",
  "image": "assets/bookend_birds.jpg",
  "category": "birds"
},

{
  "type": "cta-link",
  "links": [
    {
      "text": "Learn more",
      "url": "https://amp.dev/about/stories.html"
    }
  ]
}

关于 bookend 组件，还有更多信息有待了解。有关详情，请参阅 amp-story 参考文档。

我们的故事就快完成了。我们需要先检查 AMP HTML 是否有效，然后才能发布内容。

• Written by @bpaduch