注意：amp-story-cta-layer 已弃用，详情请参阅 I2D 问题。请改用 amp-story-page-outlink。
用法
- 有效的子元素

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