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

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 嘗試在目前文件之後載入它們，提供類似無限捲動的體驗。

頁面應在從元素 src 中列出的遠端 URL 載入的 JSON 設定中指定，或以内嵌方式作為 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

描述