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

amp-link-rewriter

描述

允許發布商根據可設定的模式重新編寫網址

必要指令碼

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

支援的版面配置

nodisplay

用法

amp-link-rewriter 允許發布商根據可設定的模式重新編寫網址。

必要元素結構

新增必要的 `script`

在 AMP 網頁的 <head>...</head> 區段中，在 <script async src="https://cdn.ampproject.org/v0.js"></script> 行之前插入以下程式碼。

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

新增 `amp-link-rewriter` 元件

在 AMP 網頁的 <body>...</body> 區段中，插入範例下方所示的程式碼 (必須針對每個供應商的使用案例進行自訂)

<amp-link-rewriter layout="nodisplay">
  <script type="application/json">
    {
      "output": "https://visit.foo.net?pid=110&url=${href}&cid=${customerId}",
      "section": ["#product-listing-1", "#product-listing-2"],
      "attribute": {
        "href": "((?!(https:\/\/skip\.com)).)*",
        "id": "comments",
        "class": "sidebar",
        "rel": "(?!(skip))*"
      },
      "vars": {
        "customerId": "12345"
      }
    }
  </script>
</amp-link-rewriter>

完整範例

最終程式碼應如下所示

<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    ...
    <script
      async
      custom-element="amp-link-rewriter"
      src="https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js"
    ></script>
    ...
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    ...
    <amp-link-rewriter layout="nodisplay">
      <script type="application/json">
        {
          "output": "https://visit.foo.net?pid=110&url=${href}&cid=${customerId}",
          "section": ["#product-listing-1", "#product-listing-2"],
          "attribute": {
            "href": "`((?!(https:\/\/skip\.com)).)*`",
            "id": "comments",
            "class": "sidebar",
            "rel": "(?!(skip))*"
          },
          "vars": {
            "customerId": "12345"
          }
        }
      </script>
    </amp-link-rewriter>
    ....
  </body>
</html>

JSON 設定

`output` (必填)

output 屬性必須是字串值，其中包含重新導向網址，以及將使用 config JSON vars 屬性或錨點本身 (以資料屬性形式) 中定義的值進行位移的預留位置查詢字串。

<amp-link-rewriter layout="nodisplay">
  <script type="application/json">
    {
      "output": "https://visit.foo.net?pid=110&cid=${customerId}`",
      "vars": {
        "customerId": "12345"
      }
    }
  </script>
</amp-link-rewriter>

我們也可以在錨點資料屬性中定義資料值，如下列範例所示

<a
  href="https://www.amazon.de/s?i=computers&rh=n%3A340843031&ref=sn_gfs_co_computervs_AM_5"
  data-vars-event-id="231"
></a>

設定可能如下所示

{
  "output": "https://visit.foo.net?eid=${eventId}&cid=${customerId}"
}

重新編寫後的結果網址會是

`https://visit.foo.net?eid=231&cid=12345`

除了 JSON 設定的 vars 屬性中定義的變數，或是以資料屬性形式定義的變數之外，還有其他預先定義的 vars，包括 AMP 網址巨集以及錨點屬性 id 和 href，可用於取代輸出模式中的值。可用的 AMP 網址巨集包括 AMP_GEO、DOCUMENT_REFERRER 和 SOURCE_URL。下表顯示已定義資料與預留位置之間的關係。

值	來源	範例	預留位置
國家/地區	地理位置	`美國`	`AMP_GEO(ISOCountry)`
data-vars-*	錨點	`<a href="..." data-vars-merchant-id="123" />`	`${merchantId}`
href	錨點	`<a href="https://retailer.com" />`	`${href}`
id	錨點	`<a href="..." id="link" />`	`${id}`
位置	網頁	`https://www.partnerweb.com/`	`SOURCE_URL`
隨機	網頁	`Math.random().toString(32).substr(2)`	`${random}`
參照網址	網頁	`https://google.de/`	`DOCUMENT_REFERRER`
rel	錨點	`<a href="..." rel="pass" />`	`${rel}`
rev	錨點	`<a href="..." rev="author" />`	`${rev}`
vars.*	設定	`{ "vars": { "publisherId": "123" } }`	`${publisherId}`

區段 (選填)

section 屬性定義 CSS 選取器運算式陣列，用於篩選應執行網址重新編寫的區域。

{
  "output": "https://visit.foo.net?pid=110&url=${href}&cid=${customerId}",
  "section": ["#product-listing-1", "#product-listing-2"]
}

在先前的範例中，以 ID 屬性定義為 product-listing-1 和 product-listing-2 的 HTML 區段將會被納入網址重新編寫的考量。

屬性 (選填)

attribute 屬性定義規則清單，用於比對從篩選區段擷取的錨點元素。這些規則是根據與 HTML 元素屬性 (例如 id、href、class 或 rel) 相關聯的規則運算式所建構。

{
  "section": ["#product-listing-1"],
  "attribute": {
    "href": "((?!(https://skip.com)).)*",
    "class": "comments"
  }
}

ID 為 product-listing-1 的 HTML 區域中的錨點必須符合針對屬性 href 和 class 定義的規則運算式。規則運算式會以 ^ 和 \$ 包裝，以進行完整比對。

在此範例中，這表示所有包含 youtube.com 和 mobile.vodafone.de 的錨點都會被排除。此外，包含的錨點必須具有 class 屬性，且值為 comments。

scopeDocument (選填)

根據預設，如果網頁沒有任何連結符合設定中指定的 attribute 和 section 範圍，則所有錨點都會重新編寫。

如要變更此行為，您需要將 scopeDocument 設定為 false。

驗證

請參閱 AMP 驗證工具規格中的 amp-link-rewriter 規則。

需要更多協助嗎？

您已閱讀本文件十幾次，但內容仍然沒有涵蓋您的所有問題嗎？或許其他人也有相同感受：在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

前往 GitHub