建立即時部落格

即時部落格是在持續進行的活動（例如體育賽事或選舉）期間頻繁更新的網頁。在 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 可讓您直接導覽至 ID 為 post3 的部落格文章。

AMP By Example 在 即時部落格範例中使用 Cookie 來產生新的內容，因此，如果您是第一次登陸該頁面，則 ID 為「post3」的文章可能無法使用，在這種情況下，您會被重新導向到第一篇文章。

資源

從這些資源瞭解更多資訊

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

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