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

amp-story-page-outlink

說明

在 AMP 故事頁面中，用於透過單次輕觸開啟外部連結的 CTA 按鈕。

必要指令碼

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

支援版面配置

nodisplay

用法

amp-story-page-outlink 提供單次輕觸外連體驗的 UI。使用者可以透過「向上滑動」手勢或輕觸行動呼籲元素來開啟外連。UI 按鈕會提示檢視者開啟附件，並會顯示在每個具有 amp-story-page-outlink 元素的頁面底部。它必須具有 layout="nodisplay" 屬性。

amp-story-page-outlink 需要單一個 a 元素子項。

<amp-story-page id="page-outlink-example">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://example.ampproject.org/helloworld/bg1.jpg" width="900" height="1600">
  </amp-story-grid-layer>
  <amp-story-page-outlink layout="nodisplay">
    <a href="https://www.google.com" title="Link Description"></a>
  </amp-story-page-outlink>
</amp-story-page>

放置位置

<amp-story-page-outlink> 元素必須是 <amp-story-page> 的最後一個子項，且必須具有 layout="nodisplay" 屬性。

amp-story-page-outlink 和 amp-story-page-attachment 都必須是 amp-story-page 的最後一個子標記。因此，您可以包含兩者之一或都不包含，但不能同時包含兩者。

`自訂文字` (選填)

子錨點元素內的文字會顯示在 CTA 中。預設值為「向上滑動」。

amp-story-page-outlink-cta-text

<amp-story-page-outlink layout="nodisplay">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

屬性

當未設定任何屬性時，將會呈現預設 UI

amp-story-page-outlink-default

<amp-story-page-outlink layout="nodisplay">
    <a href="https://www.google.com"></a>
</amp-story-page-outlink>

<amp-story-page-outlink
  layout="nodisplay"
  cta-text="Read More">
  ...
</amp-story-page-outlink>

`theme` (主題) (選填)

代表色彩主題的字串，預設為 light (淺色)。接受的值包括 light (淺色)、dark (深色) 和 custom (自訂)。

theme="custom" (主題 =「自訂」) 需要兩個額外屬性

`cta-accent-color` (CTA 強調色)：代表自訂主題色彩的字串。
`cta-accent-element` (CTA 強調元素)：代表要套用自訂主題的元素字串。接受的值包括 text (文字) 和 background (背景)。

系統會自動套用對比保護，以確保可讀性和符合 a11y 規範。例如，當強調元素為「background」(背景) 時，系統會將對比度較高的色彩 (黑色或白色) 套用至文字。

amp-story-page-outlink-dark-theme

<amp-story-page-outlink
  layout="nodisplay"
  theme="dark">
    <a href="https://www.google.com"></a>
</amp-story-page-outlink>

amp-story-page-outlink-custom-theme

<amp-story-page-outlink
  layout="nodisplay"
  theme="custom"
  cta-accent-element="background"
  cta-accent-color="#0047FF">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

amp-story-page-outlink-custom-theme

<amp-story-page-outlink
  layout="nodisplay"
  theme="custom"
  cta-accent-element="text"
  cta-accent-color="#247C3C">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

`cta-image` (行動呼籲圖片) (選填)

代表指向圖片網址的字串。請使用 32x32 像素的圖片來最佳化效能並避免失真。預設會顯示連結圖示。

amp-story-page-outlink-cta-image

<amp-story-page-outlink
  layout="nodisplay"
  cta-image="/static/images/32x32icon.jpg">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

指定 cta-image=none (行動呼籲圖片 = 無) 將會移除預設連結圖示。

amp-story-page-outlink-cta-image-none

<amp-story-page-outlink
  layout="nodisplay"
  cta-image="none">
    <a href="https://www.google.com">Call To Action</a>
</amp-story-page-outlink>

amp-story-page-outlink 的功能過去由 amp-story-page-attachment 支援。請使用 amp-story-page-outlink 作為單次輕觸外連 UI。

需要更多協助嗎？

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

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub