打造您的第一个AMP故事：Google对Snapchat和Instagram的回答
在阿姆斯特丹举行的AMP Conf 2018期间，许多激动人心的公告中都引入了AMP Stories，这是一种类似于Snapchat和Instagram Stories的新格式，通过新的加速移动页面（AMP）组件实现。
与Snapchat和Instagram Stories是各自平台中的功能不同，AMP Stories将在移动Google搜索引擎结果页面（SERP）中找到。 与AMP项目的其余部分一样，其他平台也将利用这种格式。 这些功能为用户提供了引人入胜的幻灯片播放体验，并具有移动用户喜欢的格式的丰富媒体功能，例如视频，音频，图片和文本。
这是一分钟的视频，介绍了加速移动页面（AMP）的故事格式：
激动了吗？ 我是，但可惜的是，在撰写本文时，它尚未向公众推出。 amp-story组件仍处于“实验”和开发模式，必须先在AMP Dev Channel中为用户启用它，然后才能开始使用。
一组经过预先批准的发布商-包括Microsoft，Wired和CNN-已经在尝试这种格式，可以通过导航到g.co/ampstories并启动搜索相应发布商的名称来在Google体验中找到。
例如，搜索“有线”将弹出“有线”杂志为其网站设计的一系列AMP故事。
如果您有兴趣在自己的网站上试用AMP Stories，则可以在此处申请加入Origin审判。
我们应该期望AMP Stories在不久的将来向公众推出，从而为用户提供一种真正独特的方式来与Google搜索和您的内容进行交互。
值得为这些更改提前做好准备。 为了帮助您的内容管理系统（CMS）做好准备，我创建了一个可以使用的教程。
AMP故事的优势
与Instagram和Snapchat的产品相比，AMP Stories有几个优势：
- 它可以与Google搜索配合使用，并且可能会反映基于关键字的意图，而不是依赖于社交发现。
- 它与平台无关，并且可以是Twitter或Pinterest决定在其自己的平台中使用的格式。
- 它是可编写脚本的成熟版本，用于完全或半自动的故事创建。
让我们探索如何编写第一个AMP Story脚本。
您的第一个AMP故事
如您所料，AMP Story的基础是AMPHTML页面。
您可以使用上面的样板模板作为起点。
（注意：当您实际将脚本放在一起时，不应在本专栏其余部分的标记中看到的空格包括在内-需要删除它们。将较长的脚本示例用作适当语法的模型。）
由于amp-story是AMP的扩展组件，因此您需要在<head>上添加一个附加的<script>标签：
在这一点上，我们准备开始实际构建AMP Story。
创建一个AMP Story三明治
构成AMP Story的三个主要标签是您将它们夹在中间以创建整体体验的：
- <故事>
- <amp-story-page>
- <amp-story-grid>
首先以<amp-story>标签作为面包。 剩下的就是你的冷盘。 <安培故事-page>是内<安培故事>，然后<安培故事-grid>是内<安培故事-page>包封封装。
在给定的超文本标记语言（HTML）页面上，您只有一个<amp-story>标记。
如您所料， <amp-story-page>代表AMP Story中的单个“幻灯片”。 由于您可能会在AMP Story中放多个幻灯片（这很重要），因此您将在<amp-story>中包含多个这些标签。
最后，在每个<amp-story-page>中，您将具有一个或多个<amp-story-grid>标签，这是一个基于CSS Grid布局的标签，用于在每张幻灯片中排列各种元素。
这是构建第一个AMP Story的基本概念。 现在，让我们更深入地研究一些可用的其他配置和选项。
<故事>
我们从<amp-story>元素及其结束的</ amp-story>标签开始。 这将是我们HTML页面<body>内允许的唯一元素。
我们需要添加独立的属性，这是<amp-story>的要求，然后可以附加几个可选属性：
- bookend-config-src。 我们可以使用它来指定一个javascript对象符号（JSON）端点，该端点提供有关社交共享选项和相关链接的信息，这些信息将在AMP Story的最终屏幕上找到。 （我们将回到此。）
- 背景音频。 我们可以指定将在整个故事体验中播放的音频文件。 例如，这可能是MP3文件。
最后，您的<amp-story>标签可能看起来像这样：
<amp-story页面>
我们的AMP Story的每张幻灯片都需要一个< amp-story-page> 。 每个元素都有一个必需的id属性，该属性对于每个页面都应该具有唯一的值。
然后，我们可以选择包括两个可选属性：
- 之后自动前进。 我们设置时间单位，迫使单张幻灯片自动前进。 例如，如果我们设置auto-advance-after =“ 5s” ，则在经过五秒钟后，AMP Story将前进到下一张幻灯片。
- 背景音频。 我们可以将音频文件设置为在查看特定幻灯片时播放，这与在整个amp Story体验中播放的<amp-story>级别的属性不同。
例如，可能看起来像这样：
现在我们有了一个或多个<amp-story-page>元素，我们可以开始指定它们的内容。 我们可以在<amp-story-page>中使用其他元素，例如<h2> ， <p>和特殊的<amp-story-grid>元素。 这些元素是自下而上分层的，文档对象模型（DOM）中的第一层位于底部，最后一层位于顶部。
<amp-story-page>里面的每个元素都可以使用几个动画属性之一将自己独特的动画应用到其中：
- 动画化。 如果要为元素设置动画，则这是必需的，因为它表示入口动画。 可以将预定义的动画指定为值，例如“淡入”和“向左飞” 。 有关完整列表，请参阅文档。
- 持续动画。 如果要缩短或延长所述动画，可以指定一个时间单位并指定动画持续时间的长度。
- 延迟动画。 您可以通过指定时间单位来延迟动画的开始。
- 之后进行动画处理。 您可以使用它来表示给定<amp-story-page>中序列中动画的顺序。 给您的各种动画元素id属性，然后将所述id指定为after-animate的值。
例如，可能看起来像这样：
现在，让我们探索<amp-story-page>中元素的一些更高级的分层，并查看<amp-story-grid> 。
<amp-story-grid>
我们可以在<amp-story-page>中包含的许多标准HTML或加速移动页面HTML（AMPHTML）元素中，有一个特殊的<amp-story-grid>元素可以帮助构建类似于CSS网格的层，一些易于使用的预先设计的模板。
我们可以在<amp-story-grid>中使用四个预定义的模板：
- 填。 显示第一个孩子已满出血。 与图像一起使用真的很好。
- 垂直。 从上到下垂直分层元素。
- 水平的这会将元素从左到右水平放置，并可能占用<amp-story-page>的所有垂直空间。
- 三分。 此模板将您的屏幕分为三行，每行大小相等。 您可以在每一行中放入不同的内容。 这些行表示为上三分之一，中三分之一和下三分之一。
与往常一样，这方面的AMP文档充满了新鲜空气，如果您需要帮助，可以非常直观地看到这些模板。
例如：
在上面的示例中，我们使用了两个<amp-story-grid>元素。 第一个是使用填充模板将全屏图像显示为背景。
第二种是使用垂直模板将标题和子标题堆叠在该图像的顶部。
这是一个简单的示例，但是您绝对可以使用<amp-story-grid>进行一些有趣的分层。
书夹JSON文件端点
值得一提的最后一件事是，我们可以创建一个称为书夹的JSON端点，它使我们可以指定一些要显示在最后一张幻灯片上的内容。
它还可以用于指定AMP Story提供哪些社交共享选项。 如果您熟悉JSON，则配置非常简单。
对于社交共享功能，我们可以指定share-providers的JSON对象，在其中我们指定将启用的提供者为true：
我们还可以在相关文章对象中指定要显示的链接数组，每个链接都有标题，URL和缩略图：
我们将其放到一个JSON文件中，并在<amp-story>的bookend-config-src属性中进行调用。
放在一起的例子
此时，您应该拥有创建自己的AMP故事所需的所有知识。 例如，我创建了一个演示，将Barry Schwartz的每日搜索论坛回顾在搜索引擎圆桌会议上的内容转换为一种格式。
由于我不是批准的发布者，因此该演示不会显示在Google搜索结果中。 如果您对演示代码的构造感兴趣，请单击此处。
本文中表达的观点是来宾作者的观点，不一定是Search Engine Land。 工作人员作者在此处列出。
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。如若转载，请注明出处:http://www.botadmin.cn/sylc/9979.html