实时博客

引言

这是在 AMP 中实现实时博客的示例模板。

设置

导入 amp-social-share 以添加共享按钮

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

导入 amp-live-list 以实现实时博客。

<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

元数据

实时博客更新可以在 Google 搜索结果中表示为博客页面的轮播项目。了解更多。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "LiveBlogPosting",
    "url": "https://amp.org.cn/documentation/examples/news-publishing/live_blog/",
    "articleBody": "This is the initial text in the blog post",
    "datePublished": "2016-09-08T23:04:28.24337",
    "about": {
      "@type": "Event",
      "description": "This is my great live blog sample",
      "startDate": "2016-07-23T13:00:00-07:00",
      "endDate": "2016-07-23T15:00:00-07:00",
      "name": "An AMP Live Blog",
      "url": "https://amp.org.cn/documentation/examples/news-publishing/live_blog/",
      "location": {
        "@type": "EventVenue",
        "name": "The Venue Name",
        "address" : {
          "@type": "PostalAddress",
          "streetAddress": "701 Mission St",
          "addressLocality": "San Francisco",
          "addressRegion": "CA",
          "postalCode": "94103",
          "addressCountry": "US"
        }
      }
    },
    "publisher": {
      "@type": "Organization",
      "name": "Google",
      "logo": {
        "@type": "ImageObject",
        "url": "/static/samples/img/favicon.png",
        "width": "512",
        "height": "512"
      }
    },
    "author": {
      "@type": "Person",
      "sameAs": "https://github.com/kul3r4",
      "name": "Chiara Chiappini"
    },
    "image": {
      "@type": "ImageObject",
      "url": "/static/samples/img/abe_preview.png",
      "height": "1532",
      "width": "2046"
    },
    "coverageStartTime": "2016-07-23T11:30:00-07:00",
    "coverageEndTime": "2016-07-23T16:00:00-07:00",
    "headline": "An AMP Live Blog",
    "description": "A Live Blog implementation with AMP",
    "liveBlogUpdate": ""
  }
</script>

博客文章

使用 amp-live-list 实现实时博客。amp-live-list 组件会定期轮询主机文档以获取更新的内容，并在新项目可用时更新最终用户的浏览器。这意味着每次需要添加新帖子时，CMS 都应该更新主机文档，以同时包含正文和元数据部分中的更新。在此处查找 amp-live-list 示例这里。

长博客可以使用分页来提高性能，方法是将页面上显示的博客项目数量限制为一定的数量。为了实现分页，amp-live-list 允许添加 <div pagination></div> 元素，然后插入分页所需的任何标记，例如页码、指向下一页和上一页的链接。

<amp-live-list class="live-list" layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list-insert-blog">

  <button id="live-list-update-button" update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
  </div>
  <div pagination>
    <nav aria-label="amp live list pagination">
      <ul class="pagination">
        <li></li>
      </ul>
    </nav>
  </div>
</amp-live-list>

需要进一步解释？

如果本页的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的确切用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @aghassemi 编写