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