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> 元素不得出現在第一個故事頁面中。
• 如果指定了 <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 欄位。