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>

CTA Layer

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

有效的子元素

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

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

需要更多帮助?

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

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

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

转到 GitHub