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

用法

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

給定頁面清單，amp-next-page 嘗試在目前文件之後載入它們，提供無限捲動類型的體驗。

頁面應在從元素 src 中列出的遠端網址載入的 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` (必要)	頁面的字串網址。必須與目前文件位於相同來源。在需要時，網址將自動重新編寫以指向 Google AMP 快取。
`title` (必要)	頁面的字串標題，將在呈現推薦方塊時使用
`imageUrl` (必要)	要在推薦方塊中顯示的圖片字串網址

分隔符號

分隔符號會在每個載入的文件之間呈現。預設情況下，這會呈現為全寬髮線。可以透過設定 .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`

遠端端點的網址，該端點傳回將用於設定此 amp-next-page 元件的 JSON。這必須是 CORS HTTP 服務。網址的協定必須是 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

描述

必要指令碼

範例

用法

設定規格

推薦方塊

分隔符號

元素隱藏

替換

屬性

src

範例設定

分析

驗證

amp-next-page

`src`