制作实时博客

Important: this documentation is not applicable to your currently selected format email!

实时博客是在整个持续性事件（如体育赛事或选举）中频繁更新的网页。在 AMP 中，您可以使用 amp-live-list 组件实现实时博客。

本教程简要概述了 amp-live-list 组件，并重点介绍了实时博客的一些实现细节，例如分页和深层链接。我们将使用 AMP By Example 的实时博客示例来说明如何在 AMP 中实现实时博客。

请使用 LiveBlogPosting 元数据标记，以便让您的博客能够与第三方平台功能集成。

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 每隔一段时间就会轮询一次服务器，查看条目是否有变化，因此，如果用户不在第一页上，则无需轮询服务器。

您可以将“已停用”属性添加到托管的网页以阻止轮询机制。在实时博客示例中，我们在服务器端模板中执行此行为；如果请求的网页不是第一个网页，我们就会将“已停用”属性添加到 amp-live-list 组件。

深层链接

在您发布博文时，务必要能够深层链接到该博文，以便启用分享等功能。借助 amp-live-list，您只需使用博客条目的 id 即可实现深层链接。例如，点击 https://amp.dev/documentation/examples/news-publishing/live_blog/preview/index.html#post3 可以直接转到 ID 为 post3 的博文。

AMP By Example 在实时博客示例中使用 Cookie 生成新内容，因此如果您是首次进入到该网页，则可能无法访问 ID 为“post3”的博文；在这种情况下，系统会将您重定向到第一篇博文。

资源

要了解详细信息，请参阅以下资源：

Written by @kul3r4
with contributions from @bpaduch