Live Blog

簡介

這是一個在 AMP 中實作 Live Blog 的範例範本。

設定

匯入 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 以實作 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 更新可以在 Google 搜尋結果中以部落格頁面的輪播項目呈現。瞭解詳情。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "LiveBlogPosting",
    "url": "https://amp.dev.org.tw/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.org.tw/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 實作 Live Blog。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