创建实时博客

实时博客是在持续进行的事件（如体育赛事或选举）中频繁更新的网页。 在 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，因为一个页面上可能有多个 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” 的帖子，在这种情况下，您将被重定向到第一个帖子。

资源

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

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

• 作者： @kul3r4
  贡献者： @bpaduch