amp-story-cta-layer

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

注意：amp-story-cta-layer 已被棄用，詳情請參閱 I2D issue。請改用 amp-story-page-outlink。

用法

<amp-story-cta-layer> 元件允許在 <amp-story-page> 內使用 <a> 和 <button> 元素。

• <amp-story-cta-layer> 元素不得出現在第一個 story 頁面上。
• 如果指定了 <amp-story-cta-layer> 元素，則該元素必須是 <amp-story-page> 內的最後一層。
• 每個 <amp-story-page> (第一個除外) 可以有正好一個或零個 <amp-story-cta-layer> 元素。
• 此圖層的位置和大小無法控制。它始終佔據頁面寬度的 100%、頁面高度的 20%，並對齊頁面底部。

<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 欄位。