AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-next-page

描述

文件層級頁面推薦的無限滾動體驗。

 

必要腳本

<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>

範例

amp-next-page

用法

<amp-next-page> 元件會依序載入內容頁面，建立無限滾動體驗。

設定與載入頁面

在 JSON 設定中指定頁面。使用 src 屬性從遠端 URL 載入 JSON 設定，或將其內嵌在 <amp-next-page> 的 <script> 子元素中。您可以同時指定遠端 URL 和內嵌 JSON 物件，以加快建議載入速度。

文件會附加到目前文件的末尾，作為 <amp-next-page> 元素的子元素。為了防止頁面內容向下位移，此元件必須是文件 <body> 的最後一個子元素。如有需要，任何頁尾內容都應嵌入 <amp-next-page> 標記內（透過新增具有 footer 屬性的容器），並且會在沒有更多文章建議時顯示。

以下程式碼範例顯示單篇文章的範例設定，這與行內和遠端設定使用的格式相同

{
  "image": "https://example.com/image.jpg",
  "title": "This article shows next",
  "url": "https://example.com/article.amp.html"
}

每個頁面物件都必須具有以下鍵/值對

鍵 值
url 頁面的字串 URL。必須與目前文件位於相同來源。URL 會在必要時自動重新編寫以指向 Google AMP 快取。
title 頁面的字串標題，將在呈現推薦方塊時使用。
image 要在推薦方塊中顯示的圖片的字串 URL。

行內設定

透過將 JSON 設定放置在子 <script> 元素內，在 <amp-next-page> 元件中內嵌 JSON 設定。

<amp-next-page>
  <script type="application/json">
    [
      {
        "url": ...,
        "title": ...,
        "image": ...
      },
      ...
    ]
  </script>
</amp-next-page>

僅使用行內設定時，預設會啟用 deep-parsing（請參閱屬性章節）。這允許它透過遞迴查看已載入文件上 <amp-next-page> 標記內的行內設定，來剖析更多建議。

文件會按照它們在 JSON 設定中出現的順序呈現。amp-next-page 會將所有定義的文件建議排入原始主機文件的 <amp-next-page> 設定佇列中，然後在使用者滾動瀏覽時，將呈現的頁面定義文件附加到佇列中。

以下設定建議使用者閱讀另外兩份文件。

<amp-next-page>
  <script type="application/json">
    [
      {
        "image": "https://example.com/image1.jpg",
        "title": "This article shows first",
        "url": "https://example.com/article1.amp.html"
      },
      {
        "image": "https://example.com/image2.jpg",
        "title": "This article shows second",
        "url": "https://example.com/article2.amp.html"
      }
    ]
  </script>
</amp-next-page>

從遠端 URL 載入設定

使用 src 屬性指向遠端 JSON 設定。

<amp-next-page src="https://example.com/next-page-config.json"></amp-next-page>

將遠端設定結構化，如下例所示。此設定提供另外兩份文件，並告知 amp-next-page 在使用者滾動瀏覽完畢後，查詢 https://example.com/more-pages。

{
  "pages": [
    {
      "image": "https://example.com/image1.jpg",
      "title": "This article shows first",
      "url": "https://example.com/article1.amp.html"
    },
    {
      "image": "https://example.com/image2.jpg",
      "title": "This article shows second",
      "url": "https://example.com/article2.amp.html"
    }
  ],
  "next": "https://example.com/more-pages"
}

遠端設定要求伺服器傳回具有 pages 鍵/值對的 JSON 物件，並允許選填的 next 鍵/值對。

鍵 值
pages 頁面陣列。此陣列包含如上定義的所有頁面物件定義。
next（選填） 指向下一個遠端 JSON 設定的字串 URL。這應遵守與初始 URL 相同的規則，實作 CORS 需求。）
URL 替換

amp-next-page src 允許所有標準 URL 變數替換。請參閱 替換指南 以取得更多資訊。例如

<amp-next-page src="https://foo.com/config.json?RANDOM"></amp-next-page>

此 URL 可能會向類似 https://foo.com/config.json?0.8390278471201 的內容發出請求，其中 RANDOM 值會在每次曝光時隨機產生。

推薦方塊（更多建議連結）

在下列其中一種情況發生時，<amp-next-page> 元件會呈現推薦方塊

  • 使用者在下一個頁面載入之前到達頁面末尾。
  • 下一個頁面載入失敗。
  • 如果指定了 max-pages 屬性，並且已達到顯示頁面的數量。

推薦方塊包含其餘頁面的連結。預設推薦方塊會呈現 JSON 設定中指定的 image 和 title。可以按照樣式設定章節中的指定方式設定樣式。

自訂推薦方塊

透過在 <amp-next-page> 元件內定義具有 recommendation-box 屬性的元素來自訂推薦方塊。透過使用 amp-mustache 或其他範本引擎範本化推薦方塊來顯示其餘頁面。使用範本時，剩餘文件的陣列 pages 會傳遞至範本，包括 title、url 和 image。

<amp-next-page src="https://example.com/config.json">
  <div recommendation-box class="my-custom-recommendation-box">
    Here are a few more articles:
    <template type="amp-mustache">
      <div class="recommendation-box-content">
{{#pages}}        <span class="title">{{title}}</span>
        <span class="url">{{url}}</span>
        <span class="image">{{image}}</span>
{{/pages}}      </div>
    </template>
  </div>
</amp-next-page>

分隔線

<amp-next-page> 元件會在每個文件之間呈現分隔線。預設分隔線是全寬灰色線條。請參閱樣式設定章節以變更預設樣式。

自訂分隔線

或者，也可以透過在 <amp-next-page> 元件內定義具有 separator 屬性的元素來建立自訂分隔線。透過使用 amp-mustache 或其他範本引擎範本化自訂分隔線來顯示有關下一篇文章的資訊。使用範本時，即將到來的文章的 title、url 和 image 會傳遞至範本。

<amp-next-page src="https://example.com/config.json">
  <div separator class="my-custom-separator">
    <template type="amp-mustache">
      <div class="my-custom-separator-content">
        <amp-img
          src="{{image}}"
          layout="fixed"
          height="16"
          width="16"
        ></amp-img>
        <span>Next article: {{title}}</span>
      </div>
    </template>
  </div>
</amp-next-page>

防止頁面元素重複

使用 next-page-hide 屬性隱藏跨多個載入頁面通用的元素。隱藏某些元素有助於建立整潔的無限滾動體驗。此類考量包括

  • 避免堆疊通用頁面元素，例如頁尾。
  • 避免後續頁面中重複的頁面標題
  • 防止多個側邊欄等等。

當具有 next-page-hide 屬性的元素作為建議載入到 <amp-next-page> 內時，這些元素會設定為 display: none。當文件作為頂層主機載入時，這些元素是可見的。

<header class="my-header" next-page-hide>
  <h2>Text here.</h2>
</header>

在某些情況下，您可能想要保留具有固定位置和多個執行個體的元素的最後一個執行個體。此類元素可能包括黏性廣告、黏性頁尾或通知橫幅。在這種情況下，next-page-replace 屬性會派上用場。若要保留最後一個執行個體，請為每種元素類型選擇一個通用的識別值。在每個元素執行個體上使用該通用識別值作為 next-page-replace 屬性的值。

在以下範例中，當使用者向下滾動時，第一個黏性元素將被第二個類型的執行個體取代。

在第一個文件中

<div class="sticky" next-page-replace="sticky-123">
  <h2>The second sticky will replace me once you scroll past my page</h2>
</div>

在第二個文件中

<div class="sticky" next-page-replace="sticky-123">
  <h2>I replaced the first instance of my type (sticky-123)</h2>
</div>

由於 <amp-next-page> 應為 body 的最後一個元素，因此頁尾內容（應在顯示所有文件後顯示）必須放在 <amp-next-page> 內。新增一個具有 footer 屬性的容器元素，並讓您的內容成為其子系。

<amp-next-page>
  <script type="application/json">
    ...
  </script>
  <div footer>
    My footer content here
  </div>
</amp-next-page>

從 0.1 版遷移

實驗性 0.1 版 amp-next-page 具有類似但更受限的 API。1.0 版允許無限數量的建議，並具有進階功能，例如範本化分隔線和推薦方塊。若要使用這些功能，請依照下列指示操作

  1. 更新您的 <script custom-element> 標記以連結到 amp-next-page 的 1.0 套件
  2. 確保 amp-next-page 是 body 元素的最後一個子元素，將過去位於 <amp-next-page> 後面的任何頁尾或其他元件移至 <amp-next-page> 標記內具有 footer 屬性的容器內。
  3. 如果您使用的是行內設定，則 JSON 設定現在是頁面的 array 而不是具有 pages 條目的 object。此外，您必須將每個頁面的 ampUrl 鍵重新命名為 url。
    <amp-next-page>
      <!-- BEFORE: amp-next-page 0.1 -->
      <script type="application/json">
        {
          "pages": [
            {
              "image": "https://example.com/image1.jpg",
              "title": "This article shows first",
              "ampUrl": "https://example.com/article1.amp.html"
            }
          ],
          "hideSelectors": [".header", ".main footer", "#navigation"]
        }
      </script>
      <!-- AFTER: amp-next-page 1.0 -->
      <script type="application/json">
        [
          {
            "image": "https://example.com/image1.jpg",
            "title": "This article shows first",
            // `ampUrl` was renamed to `url`
            "url": "https://example.com/article1.amp.html"
          }
        ]
        // Instead of `hideSelectors`, use the `next-page-hide` attribute
      </script>
    </amp-next-page>

屬性

src

src 屬性指向傳回 amp-next-page JSON 設定的遠端端點。這必須是 CORS HTTP 服務。URL 的協定必須是 HTTPS。

您的端點必須實作 AMP 中的 CORS 請求 規格中指定的必要條件。

除非 <amp-next-page> 元件包含行內 JSON 設定，否則 src 屬性是必要屬性。

max-pages (選填)

要載入並向使用者顯示的最大頁面數。最大數量應小於頁面總數。達到此數量後，<amp-next-page> 會顯示推薦方塊。預設值為 Infinity。

deep-parsing (選填)

deep-parsing 屬性啟用後續載入文件的 <amp-next-page> JSON 設定的遞迴剖析。

當 <amp-next-page> 行內 JSON 設定時，這是預設行為。您可以透過設定 deep-parsing="false" 來停用它。當 <amp-next-page> 指向遠端 JSON 設定時，這不是預設行為。您可以透過設定 deep-parsing="true" 來啟用它。

xssi-prefix (選填)

指定後，此屬性會啟用 amp-next-page 以在剖析遠端託管的 JSON 之前剝離前置字元。這對於包含 安全性前置字元（例如 )]}）的 API 非常有用，有助於防止跨網站指令碼攻擊。

樣式設定

<amp-next-page> 元件會呈現預設推薦方塊和分隔線。您可以按照以下方式設定這兩個元素的外觀樣式

設定預設推薦方塊的樣式

您可以將自訂 CSS 樣式新增至預設推薦方塊。它公開了以下類別

  • 父容器元素的 .amp-next-page-links
  • 個別文章的 .amp-next-page-link，其中包含
  • 連結圖片的 .amp-next-page-image
  • 連結文字的 .amp-next-page-text

設定預設頁面分隔線的樣式

每個文件都會載入全寬灰色水平線，以將其與前一個頁面分隔開來。可以使用 .amp-next-page-separator 類別透過 CSS 自訂預設分隔線

.amp-next-page-separator {
  background-color: red;
  height: 5px;
}

數據分析

<amp-next-page> 元件支援託管頁面以及後續載入文章的數據分析。我們建議使用與獨立文章上使用的相同數據分析觸發器，包括滾動綁定觸發器。

透過主機頁面上的 <amp-pixel> 或 <amp-analytics> 支援追蹤頁面瀏覽量。建議使用 <amp-analytics> 的 useInitialPageSize 屬性，以更準確地測量滾動觸發器，否則只有在使用者滾動瀏覽所有子文件後，才會觸發主機頁面的 100% 觸發點。請注意，這也會忽略由其他擴充功能（例如展開嵌入式內容）引起的大小變更，因此某些滾動事件可能會過早觸發。

主機頁面上也提供了兩個自訂數據分析事件，以指示頁面之間的轉換。可以在 amp-analytics 設定中追蹤這些事件，如下所示

事件 觸發時機
amp-next-page-scroll 使用者滾動到新頁面。
amp-next-page-click 使用者按一下推薦方塊中的文章。

<amp-next-page> 特定觸發器都提供變數 url 和 title。title 和 url 指的是滾動到的頁面或按一下的文章。以下程式碼範例示範了它們的使用方式

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "nextpage": "https://foo.com/pixel?RANDOM&toURL=${toURL}"
      },
      "triggers": {
        "trackScrollThrough": {
          "on": "amp-next-page-scroll",
          "request": "nextpage"
        },
        "trackClickThrough": {
          "on": "amp-next-page-click",
          "request": "nextpage"
        }
      }
    }
  </script>
</amp-analytics>

無障礙功能

預設推薦方塊和預設分隔線都具有通用的、非本地化的 aria-label 來描述其內容。如果此標籤不令人滿意，請考慮使用自訂推薦方塊或分隔線元素來改善無障礙功能。

預設推薦方塊和預設分隔線都可透過鍵盤對焦。提供自訂分隔線時，如果存在，則會保留其 tabindex，否則會將 tabindex 為 0 的值新增至給定元素。

版本說明

版本 描述
1.0 支援無限數量的頁面推薦、縮減的套件大小、改良的 API、支援 amp-analytics、範本化分隔線和推薦方塊，以及更好地處理固定元素。

API 變更具有破壞性，請查看遷移章節以取得詳細資訊。
0.1 初始實驗性實作。僅限於三個建議文件

驗證

請參閱 AMP 驗證器規格中的 amp-next-page 規則。

需要更多協助嗎？

您已閱讀本文檔十幾次，但它並沒有真正涵蓋您的所有問題？也許其他人也有同樣的感覺：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub