blog

制作你的第一个AMP故事:Google对Snapchat和Instagram的回答

<p>AMP Conf 2018在阿姆斯特丹举行的众多激动人心的公告中引入了AMP Stories,这是一种类似于Snapchat和Instagram Stories的新格式,通过新的加速移动页面(AMP)组件实现,与Snapchat和Instagram Stories不同,这是他们的功能</p><p>各自的平台,AMP Stories将在移动版Google搜索引擎结果页面(SERP)中找到</p><p>与AMP项目的其余部分一样,其他平台也将利用这种格式</p><p>这些为用户提供了极具吸引力的幻灯片体验丰富的媒体功能,如视频,音频,图片和文本,以移动用户所熟知的格式这里是一个介绍加速移动页面(AMP)故事格式的一分钟视频:兴奋吗</p><p>我是,但是,在撰写本文时,它尚未向公众推出</p><p>安培组件仍处于“实验”和开发模式,必须为AMP Dev Channel中的用户启用它才能一群精选的预先批准的发布商 - 包括微软,有线和CNN--已经在尝试使用该格式,可以通过导航到gco / ampstories并开始搜索相应发布商的名称来体验Google体验</p><p>例如,搜索“连线”将带来连线杂志为其网站设计的一系列AMP故事如果您有兴趣在自己的网站上试用AMP Stories,您可以在这里申请加入原始试用我们应该期待AMP故事在不久的将来向公众推出,为用户提供真正独特的方式与Google搜索和您的内容进行互动值得为这些更改提前做好准备为了帮助您的内容管理ystems(CMS)准备好了,我已经创建了一个你可以使用的教程AMP故事与Instagram和Snapchat的产品相比有几个优点:让我们探讨如何将我们的第一个AMP故事编写成一个AMP故事的基础,如同你可能会想到,一个AMPHTML页面您可以使用上面的样板模板作为起点(注意:当您实际将脚本放在一起时,不应包括您在本专线的其余部分中看到的标记中的空格 - 它们需要删除使用较长的脚本示例作为正确语法的模型)由于amp-story是AMP的扩展组件,您需要在<head>中添加一个额外的<script>标记:此时,我们'准备开始实际构建AMP故事有三个主要标签组成AMP故事,你可以将它们夹在一起以创造整体体验:你从<amp-story>标签开始作为你的面包其余的都是你的冷盘<amp -story-page>封装在<amp-story>中,然后<amp-story-grid>封装在<amp-story-page>中</p><p>在给定的超文本标记语言中只有一个<amp-story>标记(HTML)页面正如您所料,<amp-story-page>代表AMP故事中的单个“幻灯片”因为您的AMP故事中可能有多个幻灯片 - 这就是重点 - 您将拥有几个<amp-story>中的这些标签最后,在每个<amp-story-page>中,你将有一个或几个<amp-story-grid>标签,一个基于CSS网格布局的标签,用于安排各种元素每个单独的幻灯片这是构建您的第一个AMP故事背后的基本概念现在让我们更深入地了解一些可用的其他配置和选项我们从<amp-story>元素及其结束</ amp-story>标签开始这将是我们HTML页面的<body>中允许的唯一元素我们需要添加属性standalone,<amp-story>的要求,然后有几个可选属性可以附加:最后,你的<amp-story>标签可能看起来像这样:我们需要一个<amp-story -page>我们的AMP故事的每张幻灯片每个元素都有一个必需的id属性,每个页面应该有一个唯一的值然后我们可以选择包含两个可选属性:例如,可能看起来像这样:现在我们有一个或多个<amp-story-page>元素,我们可以开始指定它们的内容我们可以使用<amp-story-page>中的其他元素,如<h2>,<p>和特殊的<amp-story- grid>元素 这些元素是自下而上分层的,文档对象模型(DOM)中的第一层位于底部,最后一层位于顶部<amp-story-page>中的每个元素都有能力使用多个动画属性中的一个来应用自己独特的动画:例如,可能看起来像这样:现在,让我们在<amp-story-page>中探索一些更高级的元素分层,然后看看<amp-story-grid >在我们可以包含在<amp-story-page>中的许多标准HTML或加速移动页面HTML(AMPHTML)元素中,有一个特殊的<amp-story-grid>元素可以帮助构建类似于CSS网格的图层,使用一些易于使用的预先设计的模板我们可以使用四个预定义的模板与<amp-story-grid>:一如既往,关于此的AMP文档是一股清新的空气,它非常好用如果您需要帮助,可以使用这些模板的可视化表示例如:在上面的示例中,我们是使用两个<amp-story-grid>元素第一个是使用填充模板将全屏图像显示为背景第二个是使用垂直模板在该图像顶部堆叠标题和子标题这是一个简单的例子,但你绝对可以使用<amp-story-grid>做一些更有趣的分层</p><p>最后一件值得一提的是我们可以创建一个名为bookend的JSON端点,它允许我们指定一些要显示的内容</p><p>最后一张幻灯片它还可用于指定哪些社交共享选项可用于AMP故事如果您熟悉JSON,则配置非常简单对于社交共享功能,我们可以指定共享提供者的JSON对象,其中我们指定我们将启用哪些提供者为true:我们还可以在相关文章对象中指定要显示的链接数组,每个链接都有一个标题,URL和缩略图:我们将它们放在一个JSON文件中并调用它在bookend-c中<amp-story>的onfig-src属性此时,您应该具备创建自己的AMP故事所需的所有知识</p><p>例如,我创建了一个演示,将Barry Schwartz的搜索引擎圆桌会议的每日搜索论坛重新转换为格式由于我不是经过批准的发布者,因此演示文稿不会显示在Google搜索结果中如果您对构建演示代码感兴趣,请单击此处本文中表达的观点是来宾作者的观点,

查看所有