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