AMP Conf 2018年在阿姆斯特丹举行，在众多激动人心的公告中，AMP story是一种类似Snapchat和Instagram故事的新格式，通过一个新的加速移动页面(AMP)组件实现。
不像Snapchat和Instagram的故事，都是在各自的平台上的功能，AMP的故事将被发现在手机谷歌搜索引擎结果页面(SERP)。与AMP项目的其余部分一样，其他平台也将利用这种格式。它们为用户提供了一种高度吸引人的幻灯片体验，具有丰富的媒体特性，如视频、音频、图片和文本，其格式为移动用户所喜爱的格式。
这里有一个一分钟的视频介绍加速移动页面(AMP)故事格式:
兴奋了吗?是的，但是可惜的是，在我写这篇文章的时候，它还没有向公众推出。AMP故事组件仍处于“实验”和开发模式，必须在AMP开发频道中为用户启用才能开始。
包括微软、有线电视和CNN在内的一些预先批准的出版商已经开始试验这种格式，你可以在谷歌中找到这种格式，只要点击g.co/ampstories，然后搜索各自出版商的名字就可以了。
例如，搜索“连线”将会出现一系列的AMP故事，这是《连线》杂志为他们的网站设计的。
如果你有兴趣在自己的网站上试用AMP故事，你可以在这里申请加入origin试用。
我们期待AMP故事在不久的将来向公众推出，为用户提供一种真正独特的方式与谷歌搜索和你的内容互动。
提前为这些变化做好准备是值得的。为了帮助您的内容管理系统(CMS)做好准备，我创建了一个可以使用的教程。
AMP故事的优势
与Instagram和Snapchat的产品相比，AMP Stories有几个优势:
它将与谷歌搜索一起工作，并且可能会反映基于关键字的意图，而不是依赖于社交发现。
它是独立于平台的，可能是Twitter或Pinterest决定在自己的平台上使用的格式。
对于完全或半自动化的故事创作来说，它已经具备了编写脚本的能力。
让我们一起探索如何编写我们的第一个AMP故事。
你的第一个安培故事
AMP故事的基础，如你所料，是一个AMPHTML页面。
您可以使用类似于上面的样板模板作为起点。
(注意:当你把脚本放在一起的时候，你在这一栏剩下的标签中看到的空格不应该被包括在内——它们需要被删除。使用较长的脚本示例作为适当语法的模型。)
由于AMP -story是AMP的一个扩展组件，您将需要添加一个额外的< script >标签到您的< head >:
在这一点上，我们准备开始实际建设AMP的故事。
制作一个AMP故事三明治
安培的故事有三个主要的标签，你可以把它们夹在一起来创造整体的体验:
< amp-story >
< amp-story-page >
< amp-story-grid >
你以< amp-story >标签作为你的面包。剩下的是你的冷盘。< amp-story-page >封装在< amp-story >内，< amp-story-grid >封装在< amp-story-page >内。
在给定的超文本标记语言(HTML)页面上，只有一个< amp-story >标记。
如您所料，< AMP – Story -page >表示一个AMP故事中的一个“幻灯片”。因为你可能会有多个幻灯片在你的AMP故事-这是某种意义上-你将有几个标签< AMP故事>。
最后，在每个< amp-story-page >中，您将拥有一个或几个< amp-story-grid >标签，这是一个基于CSS网格布局的标签，用于在每个单独的幻灯片中安排各种元素。
这是建立你的第一个AMP故事背后的基本概念。现在让我们更深入地研究一些可用的附加配置和选项。
< amp-story >
我们从< amp-story >元素和它的结束标签< /amp-story >开始。这将是HTML页面的< body >中允许的唯一元素。
我们需要添加独立属性，这是< amp-story >的要求，然后有几个可选属性可以附加:
bookend-config-src。我们可以使用它来指定一个javascript对象符号(JSON)端点，提供有关社交分享选项和相关链接的信息，这些信息将会在你的AMP故事的最后屏幕上找到。(我们会回到这个话题。)
background-audio。我们可以指定一个将在整个故事体验中播放的音频文件。例如，这可能是一个MP3文件。
最后，您的< amp-story >标签可能看起来像这样:
< amp-story page >
我们需要一个< AMP故事页>为我们的每一张幻灯片的AMP故事。每个元素都有一个必需的id属性，该属性对于每个页面都应该有一个惟一的值。
然后