建立即時部落格

即時部落格是網頁，會在進行中的活動 (例如體育賽事或選舉) 期間頻繁更新。在 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 貢獻