创建实时博客
实时博客是在进行中的事件（例如体育赛事或选举）中频繁更新的网页。在 AMP 中，您可以使用 amp-live-list 组件来实现实时博客。
本教程简要概述了 amp-live-list 组件，重点介绍了实时博客的一些实现细节，例如 分页 和 深度链接。我们将使用 AMP By Example 的 实时博客示例 来演示如何在 AMP 中实现实时博客。
amp-live-list 概述
amp-live-list 组件定期轮询主机文档以获取新内容，并在有新项目可用时更新用户的浏览器。这意味着每次需要添加新的博客文章时，CMS 都应更新主机文档，以便在正文和页面的 元数据 部分中包含更新。
以下是博客的初始代码可能的样子
<amp-live-list id="my-live-list"
data-poll-interval="15000"
data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates</button>
<div items></div>
</amp-live-list>
我们来看看这段代码
每个 amp-live-list 组件都需要一个唯一的 ID，因为一个页面上可能有多个组件。在此示例中，我们指定 my-live-list 作为唯一 ID。
data-poll-interval 属性指定轮询发生的频率；如果宿主文档已更新，则在下一个时间间隔后，用户应可获得更新。
每次向宿主文档添加新项目时，<button update on="tap:my-live-list.update"> 元素都会显示一个“您有更新”按钮，单击该按钮时，会触发页面显示最新帖子。
实时博客可能会不断增加，使页面过长。您可以使用 data-max-items-per-page 属性指定可添加到实时博客中的项目数。如果更新后的项目数超过 data-max-items-per-page，则会删除超过此数量的最旧更新。例如，如果页面当前有 9 个项目，并且 data-max-items-per-page 设置为 10，并且最新更新中到达了 3 个新项目，则页面中会删除最新更新中的两个最旧项目。
amp-live-list 中的所有博客帖子都必须是 <div items></div> 的子级。通过将每个帖子称为一个项目，每个项目都必须具有唯一的 id 和 data-sort-time。
实施详情
现在您已熟悉 amp-live-list 组件，让我们了解如何实现更复杂的实时博客。继续阅读以了解有关如何实现分页以及深度链接的工作原理的更多信息。
分页
较长的博客可以使用分页来提高性能，方法是限制页面上显示的博客项目数。要在 amp-live-list 组件中实现分页，请添加 <div pagination></div>，然后插入分页所需的任何标记（例如，页码或指向下一页和上一页的链接）。
使用分页后，我们之前使用的简单代码变为
<amp-live-list id="my-live-list"
data-poll-interval="15000"
data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates</button>
<div items></div>
<div pagination>
<nav>
<ul>
<li>1</li>
<li>Next</li>
</ul>
</nav>
</div>
</amp-live-list>
您有责任通过更新托管页面来正确填充导航项目。例如，在 实时博客示例 中，我们通过服务器端模板呈现页面，并使用查询参数指定页面的第一个博客项目应是什么。我们将页面大小限制为 5 个项目，因此，如果服务器生成了 5 个以上的项目，则在主页上着陆的用户将在导航区域中看到“下一页”元素。有关详细信息，请参阅 amp-live-list。
当博客帖子的数量超过 data-max-items-per-page 指定的最大项目数后，较旧的博客项目将显示在“下一页”中，例如在第 2 页中。鉴于 amp-live-list 会定期轮询服务器以查看项目中是否有任何更改，因此如果用户不在第一页，则无需轮询服务器。
您可以将 disabled 属性添加到托管页面以防止轮询机制。在实时博客示例中，我们在服务器端模板中执行此行为；当请求的页面不是第一页时，我们会将 disabled 属性添加到 amp-live-list 组件。
深度链接
发布博客文章时，能够对文章进行深度链接非常重要，以便启用分享等功能。使用 amp-live-list，只需使用博客项目的 id 即可进行深度链接。例如，https://amp.org.cn/documentation/examples/news-publishing/live_blog/preview/index.html#post3 允许您直接导航到具有 post3 id 的博客文章。
AMP By Example 在 实时博客示例 中使用 cookie 生成新鲜内容，因此，如果您是第一次访问该页面，则 id 为“post3”的文章可能不可用，在这种情况下，您将被重定向到第一篇文章。
资源
从以下资源中了解更多信息