Live Blog
Introduction
This is a sample template for implementing live blogs in AMP.
Setup
Import amp-social-share
for adding share buttons
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Import amp-live-list
for implementing a live blog.
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
Metadata
Live blog updates can be represented in Google Search results as carousel items of the blog page. Learn more.
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "LiveBlogPosting", "url": "https://amp.dev/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.dev/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>
Blog Posts
Use amp-live-list to implement a live blog. The amp-live-list component regularly polls the host document for updated content and updates the end user's browser as new items become available. This means that every time a new post needs to be added, the host document should be updated by the CMS to include the update both the body and the metadata section. Find an amp-live-list example here.
Long blogs could use pagination to improve performance by limiting the number of blog items to be displayed on a page. To implement pagination, amp-live-list allows to add the <div pagination></div>
element, to then insert any markup needed for pagination, for example the page number, a link to the next and previous page.
<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 上的示例-
Written by @aghassemi