创建实时博客
实时博客是在持续进行的事件（如体育赛事或选举）期间频繁更新的网页。在 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 允许您直接导航到 id 为 post3 的博客文章。
AMP By Example 在 实时博客示例中使用 Cookie 来生成新内容，因此如果您是第一次访问该页面，则 id 为“post3”的帖子可能不可用，在这种情况下，您将被重定向到第一篇帖子。
资源
从以下资源了解更多信息