amp-story-page-outlink
說明
在 AMP Story 頁面中，用於一鍵開啟外部連結的 CTA 按鈕。
必要指令碼
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
支援版面配置
用法
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 layout="nodisplay"> <a href="https://www.google.com">Call To Action</a> </amp-story-page-outlink>
屬性
當未設定任何屬性時，將會呈現預設 UI
<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 layout="nodisplay" theme="dark"> <a href="https://www.google.com"></a> </amp-story-page-outlink>
<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 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 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 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