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 問題。請改用 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 欄位。