重要提示:本文档不适用于您当前选择的格式电子邮件!
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-layer
和 amp-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>
有效的子元素
amp-story-cta-layer
允许与 amp-story-grid-layer
大致相同的后代元素,并且还允许使用 <a>
和 <button>
标签。
有关受支持子元素的更新列表,请务必查看验证规则中的 amp-story-cta-layer-allowed-descendants 字段。
需要更多帮助?
您已经阅读本文档十几次了,但它并没有真正涵盖您的所有问题?也许其他人也有同样的感觉:在 Stack Overflow 上联系他们。
转到 Stack Overflow 发现错误或缺少功能?AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的持续参与者,但我们也欢迎您对您特别感兴趣的问题做出一次性贡献。
转到 GitHub