建立即時部落格

即時部落格是在進行中的事件（例如體育賽事或選舉）中頻繁更新的網頁。 在 AMP 中，您可以使用 amp-live-list 元件來實作即時部落格。

本教學提供了 amp-live-list 元件的簡短概述，並重點介紹了即時部落格的一些實作細節，例如分頁和深層連結。 我們將使用 AMP By Example 的 即時部落格範例來說明如何在 AMP 中實作即時部落格。

amp-live-list 概述

amp-live-list 元件會定期輪詢主機文件以獲取新內容，並在新項目可用時更新使用者的瀏覽器。 這意味著每次需要新增新的部落格文章時，CMS 都應更新主機文件，以在頁面的主體和 metadata 部分中包含更新。

這可能是部落格的初始程式碼

<amp-live-list id="my-live-list"
    data-poll-interval="15000"
    data-max-items-per-page="5">
  <button update on="tap:my-live-list.update">You have updates</button>
  <div items></div>
</amp-live-list>

讓我們看看這段程式碼

每個 amp-live-list 元件都需要一個唯一的 ID，因為頁面上可能有多個元件。 在此範例中，我們指定 my-live-list 作為唯一 ID。

data-poll-interval 屬性指定應多久進行一次輪詢；如果主機文件已更新，則使用者應在下一個時間間隔後可以使用更新。

每次將新項目新增到主機文件時，<button update on="tap:my-live-list.update"> 元素都會顯示一個「您有更新」按鈕，點擊該按鈕會觸發頁面顯示最新的文章。

即時部落格可能會增長並使頁面過長。 您可以使用 data-max-items-per-page 屬性來指定可以新增到即時部落格的項目數量。 如果更新後的項目數量超過 data-max-items-per-page，則會從頁面中刪除超過此數量的最舊更新。 例如，如果頁面目前有 9 個項目，並且 data-max-items-per-page 設定為 10，並且在最新更新中新增了 3 個新項目，則在最新更新中會從頁面中刪除兩個最舊的項目。

amp-live-list 中的所有部落格文章都必須是 <div items></div> 的子元素。 透過將每篇文章稱為一個項目，每個項目都必須具有唯一的 id 和 data-sort-time。

實作細節

現在您已熟悉 amp-live-list 元件，讓我們來了解如何實作更複雜的即時部落格。 繼續閱讀以了解更多關於如何實作分頁以及深層連結如何運作的資訊。

分頁

較長的部落格可以使用分頁來限制頁面上顯示的部落格項目數量，以提高效能。 若要實作分頁，請在 amp-live-list 元件中新增 <div pagination></div>，然後插入分頁所需的任何標記（例如，頁碼或指向上一頁和下一頁的連結）。

使用分頁，我們之前使用的簡單程式碼變為

<amp-live-list id="my-live-list"
    data-poll-interval="15000"
    data-max-items-per-page="5">
  <button update on="tap:my-live-list.update">You have updates</button>
  <div items></div>
  <div pagination>
    <nav>
      <ul>
        <li>1</li>
        <li>Next</li>
      </ul>
     </nav>
   </div>
</amp-live-list>

您有責任透過更新託管頁面來正確填充導航項目。 例如，在 即時部落格範例中，我們透過伺服器端範本呈現頁面，並使用查詢參數來指定頁面的第一個部落格項目應該是什麼。 我們將頁面大小限制為 5 個項目，因此如果伺服器產生的項目超過 5 個，則進入主頁的使用者將在導航區域中看到「下一頁」元素。 詳情請參閱 amp-live-list。

在部落格文章的大小超過 data-max-items-per-page 指定的最大項目數後，較舊的部落格項目將顯示在「下一頁」頁面中，例如第 2 頁。鑑於 amp-live-list 會間隔輪詢伺服器以查看項目是否有任何變更，因此如果使用者不在第一頁上，則無需輪詢伺服器。

您可以將 disabled 屬性新增到託管頁面以防止輪詢機制。 在即時部落格範例中，我們在伺服器端範本中執行此行為； 當請求的頁面不是第一頁時，我們將 disabled 屬性新增到 amp-live-list 元件。

深層連結

當您發佈部落格文章時，能夠深層連結到該文章以啟用共享等功能非常重要。 使用 amp-live-list，只需使用部落格項目的 id 即可進行深層連結。 例如，https://amp.dev.org.tw/documentation/examples/news-publishing/live_blog/preview/index.html#post3 允許您直接導航到具有 post3 ID 的部落格文章。

AMP By Example 在即時部落格範例中使用 cookie 來產生新內容，因此如果這是您第一次進入該頁面，則具有 ID“post3”的文章可能不可用，在這種情況下，您將被重定向到第一篇文章。

資源

從這些資源中了解更多

• amp-live-list 參考文件
• amp-live-list
• AMP BY Example 的即時部落格範例

• 作者： @kul3r4
  貢獻者： @bpaduch