AMP

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-outlinkamp-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(可选)

表示颜色主题的字符串,默认为浅色。 接受值 lightdarkcustom

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(可选)

表示指向图像的 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