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 上的示例-