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

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-accent-element`：代表要套用自訂主題的元素的字串。接受的值為 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