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

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。使用者可以透過「向上滑動」手勢或點擊行動呼籲元素來開啟外部連結。每個具有 amp-story-page-outlink 元素的頁面底部都會出現 UI 按鈕，提示瀏覽者開啟附件。它必須具有 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 (淺色)、dark (深色) 和 custom (自訂)。

theme="custom" 需要兩個額外屬性

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

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

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` (行動呼籲圖片) (選填)

字串，代表指向圖片的 URL。為了最佳化效能並避免失真，請使用 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