AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

重要提示：此文档不适用于您当前选择的格式 电子邮件！

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-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 的字符串。通过使用 32x32px 的图像来优化性能并避免失真。默认情况下将显示链接图标。

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