创建实时博客

实时博客是指在正在进行的事件（例如体育赛事或选举）期间频繁更新的网页。在 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”的帖子，在这种情况下，你将被重定向到第一个帖子。

资源

从这些资源中了解更多信息

• amp-live-list 参考文档
• amp-live-list
• AMP BY Example 的实时博客示例

• 撰写人： @kul3r4
  贡献者： @bpaduch