AMP

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

amp-story-cta-layer

描述

AMP 故事的单个页面上的一个单层,允许链接到其他内容。

 

必需的脚本

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

注意:amp-story-cta-layer 已被弃用,请查看 I2D 问题了解详情。请改用 amp-story-page-outlink

用法

<amp-story-cta-layer> 组件允许在 <amp-story-page> 中使用 <a><button> 元素。

  • <amp-story-cta-layer> 元素不能出现在第一个故事页面上。
  • 如果指定了 <amp-story-cta-layer> 元素,则该元素必须是 <amp-story-page> 中的最后一个层。
  • 每个 <amp-story-page>(第一个除外)可以有恰好一个或零个 <amp-story-cta-layer> 元素。
  • 此层的位置和大小无法控制。它始终是页面的 100% 宽度,页面 20% 的高度,并且与页面底部对齐。

amp-story-cta-layeramp-story-page-attachment (amp-story-page-attachment.md) 都必须是 amp-story-page 的最后一个子标签。因此,您可以包含两者都不包含或只包含一个,但不能同时包含两者。

<amp-story-page id="vertical-template-thirds">
  <amp-story-grid-layer template="thirds">
    <div class="content" grid-area="upper-third">Paragraph 1</div>
    <div class="content" grid-area="middle-third">Paragraph 2</div>
    <div class="content" grid-area="lower-third">Paragraph 3</div>
  </amp-story-grid-layer>
  <amp-story-cta-layer>
    <a href="https://www.ampproject.org" class="button">Outlink here!</a>
  </amp-story-cta-layer>
</amp-story-page>

完整示例可在 examples 目录中找到

有效的子元素

amp-story-cta-layer 允许与 amp-story-grid-layer 大致相同的后代元素,并且还允许使用 <a><button> 标签。

有关受支持子元素的更新列表,请务必查看验证规则中的 amp-story-cta-layer-allowed-descendants 字段。

需要更多帮助?

您已经阅读本文档十几次了,但它并没有真正涵盖您的所有问题?也许其他人也有同样的感觉:在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的持续参与者,但我们也欢迎您对您特别感兴趣的问题做出一次性贡献。

转到 GitHub