重要提示：此文档不适用于您当前选择的格式 网站！
amp-story-page-outlink
描述
用于在 AMP 故事页面中一键打开外部链接的 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（可选）
表示指向图像的 URL 的字符串。使用 32x32px 的图像优化性能并避免失真。默认情况下会显示链接图标。
<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>
需要更多帮助？
您已经阅读此文档多次，但它并没有真正涵盖您的所有问题？也许其他人也有同样的感受：在 Stack Overflow 上联系他们。
前往 Stack Overflow 发现错误或缺少功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但也欢迎您为自己特别关注的问题做出一次性贡献。
前往 GitHub