重要事項：此文件不適用於您目前選取的格式 stories！

amp-next-page

實驗性

描述

動態載入更多推薦給使用者的文件。

必要腳本

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

用法

動態載入更多推薦給使用者的文件。

給定頁面列表，amp-next-page 會嘗試在目前文件後載入這些頁面，以提供無限捲動類型的體驗。

頁面應在 JSON 設定中指定，此設定可從元素 src 中列出的遠端 URL 載入，或以 script 元素子項內嵌。

<amp-next-page src="https://example.com/next-page-config.json"></amp-next-page>
<!-- Or -->
<amp-next-page>
  <script type="application/json">
    {
      "pages": ...
    }
  </script>
</amp-next-page>

如果載入下一個文件成功，則會將其附加到目前文件的結尾，作為 amp-next-page 元件的子項，並將其後的所有內容進一步向下移動到頁面。因此，元件通常應放置在指定頁面的獨有內容之後：例如，在新聞文章或食譜的結尾，但在頁尾或其他跨文章重複內容之前。

此元件最多會在螢幕上呈現三個文件，元件最多會在單一執行個體中螢幕上呈現三個文件 (總計)。此限制可能會在未來變更或移除。

重要事項 <amp-analytics> 目前在使用者透過 <amp-next-page> 登陸的頁面上不受支援。透過主機頁面上的 <amp-pixel> 或 <amp-analytics> 支援追蹤網頁瀏覽量。

設定規格

此設定會將 amp-next-page 推薦給使用者的文件定義為 JSON 物件。

鍵	值
`pages` (必填)	一個或多個頁面物件的排序陣列
`hideSelectors`	用於隱藏子文件中字串 CSS 選擇器的選用陣列

每個頁面物件應具有以下格式

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

分隔符號

分隔符號會在每個載入的文件之間呈現。預設情況下，這會呈現為全寬細線。您可以透過設定 .amp-next-page-default-separator 類別的樣式來自訂。

或者，您可以透過使用 separator 屬性，指定包含任意 HTML 內容的自訂分隔符號作為 amp-next-page 元件的子項。

<amp-next-page src="https://example.com/config.json">
  <div separator>
    <h1>Keep reading</h1>
  </div>
</amp-next-page>

元素隱藏

在多個頁面中通用的元素可以透過程式設計方式在子文件中隱藏，以避免例如在文件結尾堆疊多個頁尾，或從每個後續頁面隱藏頁首。

元素可以透過在元素設定的 hideSelectors 鍵中指定一個或多個字串 CSS 選擇器來隱藏。符合任何選擇器的元素將在所有子文件中設定為 display: none。

<amp-next-page>
  <script type="application/json">
    {
      "hideSelectors": [
        ".header",
        ".main footer",
        "#navigation"
      ],
      "pages": ...
    }
  </script>
</amp-next-page>

替換

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

例如

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

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

屬性

`src`

遠端端點的 URL，此端點會傳回將用於設定此 amp-next-page 元件的 JSON。這必須是 CORS HTTP 服務。URL 的通訊協定必須是 HTTPS。您的端點必須實作 AMP 規格中 CORS 請求中指定的必要條件。

除非已內嵌指定設定，否則 src 屬性為必填。 |

範例設定

以下設定將建議使用者閱讀另外兩個文件，並從每個子文件中隱藏頁首和頁尾元素。

{
  "pages": [
    {
      "image": "https://example.com/image1.jpg",
      "title": "This article shows first",
      "ampUrl": "https://example.com/article1.amp.html"
    },
    {
      "image": "https://example.com/image2.jpg",
      "title": "This article shows second",
      "ampUrl": "https://example.com/article2.amp.html"
    }
  ],
  "hideSelectors": [".header", ".footer"]
}

分析

透過初始主機頁面提供分析功能的局部支援，透過兩個個別的事件提供。這些事件由 <amp-next-page> 觸發，您可以在您的 amp-analytics 設定中追蹤這些事件

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

triggers 皆提供 fromUrl 和 toUrl 變數，分別參照先前頁面和目前頁面。它們可以如下方式使用

<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>

驗證

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

需要更多協助嗎？

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

前往 Stack Overflow

發現錯誤或缺少功能嗎？

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

前往 GitHub

amp-next-page 1.0 0.1

描述