用法
有效的子元素
屬性
樣式
- 範本
  - fill
  - vertical
  - horizontal
  - thirds
- 預先範本化的 UI
  - 橫向對半 UI
  - 現代外觀比例
    - 前景
    - 背景

重要事項：本文件不適用於您目前選取的廣告格式！

amp-story-grid-layer

描述

AMP Story 單一頁面的單一層級，以格線為基礎的版面配置來定位其內容。

必要指令碼

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

用法

<amp-story-grid-layer> 元件會將其子元素佈局到格線中。其導入是以 CSS Grid Spec 為基礎。

有效的子元素

一個 amp-story-grid-layer 可以包含下列任何元素

注意：此清單日後將會擴充。

區域	允許的標籤
媒體	`<amp-audio>` `<amp-img>` `<amp-video>` `<source>` `<svg>` `<track>`
分析與評估	`<amp-experiment>` `<amp-pixel>`
分區	`<address>` `<article>` `<aside>` `<footer>` `<h1>-<h6>` `<header>` `<hgroup>` `<nav>` `<section>`
文字	`<abbr>` `<amp-fit-text>` `<amp-font>` `<amp-gist>` `<b>` `<bdi>` `<bdo>` `<blockquote>` `<br>` `<cite>` `<code>` `<data>` `<del>` `<dfn>` `<div>` `<em>` `<figcaption>` `<figure>` `<hr>` `<i>` `<ins>` `<kbd>` `<main>` `<mark>` `<p>` `<pre>` `<q>` `<rp>` `<rt>` `<rtc>` `<ruby>` `<s>` `<samp>` `<small>` `<span>` `<strong>` `<sub>` `<sup>` `<time>` `<u>` `<var>` `<wbr>`
清單	`<amp-list>` `<amp-live-list>` `<dd>` `<dl>` `<dt>` `<li>` `<ol>` `<ul>`
表格	`<caption>` `<col>` `<colgroup>` `<table>` `<tbody>` `<td>` `<tfoot>` `<th>` `<thead>` `<tr>`
連結	`<a>`
嵌入式元件	`<amp-twitter>`
其他	`<amp-install-serviceworker>` `<noscript>`

屬性

template [必填]

template 屬性決定了格線層的版面配置。可用的範本將在下方的「範本」章節中說明。

grid-area [選填]

此屬性是在 <amp-story-grid-layer> 的子元素上指定。grid-area 指定具名的區域 (來自使用定義這些區域的範本)，包含此屬性的元素應出現在其中。

範例

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

aspect-ratio [選填]

此值以「水平：垂直」格式指定外觀比例，其中「水平」和「垂直」都是整數。如果指定此屬性，格線層的版面配置會設定為符合指定比例。在這種情況下，字型大小會自動設定為結果高度的 1/10，以啟用比例內容縮放。

範例

<amp-story-grid-layer aspect-ratio="9:16" template="vertical">
  <div style="width: 10%; height: 10%; font-size: 2em;">
    This block will be in 9:16 aspect ratio and font size will be set at the 20%
    of the layer's height.
  </div>
</amp-story-grid-layer>

preset [選填]

指定回應式預設值，該預設值會使用外觀比例和縮放比例來設定圖層。

預設值為

2021-background：外觀比例圖層會放大以涵蓋信箱邊距。可能只包含背景素材 (圖片或影片)。
2021-foreground：外觀比例圖層，包含所有前景素材。

值為

預設值	外觀比例	縮放比例
2021-background	69:116	1.142
2021-foreground	69:116	1

這些預設值已針對 2021 年的行動裝置螢幕進行最佳化。隨著技術演進，請密切注意新的預設值，並關注 Web Stories roadmap。

anchor [選填]

將外觀比例圖層 (包括預設值) 對齊至指定的邊框或角落。當相對於邊框或角落定位元素時，請使用此屬性來維持跨圖層的縮放比例。選項：top、left、bottom、right、top-left、top-right、bottom-left、bottom-right。

樣式

範本

以下是可用於指定格線層版面配置的範本。

若要查看版面配置範本的使用方式，請查看 AMP By Example 上的版面配置示範。

fill

fill 範本會以滿版顯示其第一個子元素。所有其他子元素皆不會顯示。

具名區域：(無)

範例

<amp-story-grid-layer template="fill">
  <amp-img src="cat.jpg" alt="..."></amp-img>
</amp-story-grid-layer>

vertical

vertical 範本會沿著 y 軸佈局其元素。預設情況下，其元素會對齊頂端，並可佔據整個螢幕的 x 軸。

具名區域：(無)

<amp-story-grid-layer template="vertical">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>

horizontal

horizontal 範本會沿著 x 軸佈局其元素。預設情況下，其元素會對齊行的開頭，並可佔據整個螢幕的 y 軸。

具名區域：(無)

<amp-story-grid-layer template="horizontal">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>

thirds

thirds 範本會將螢幕劃分為三個大小相等的列，並允許您將內容置入每個區域。

具名區域

upper-third
middle-third
lower-third

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

雖然這些範本可讓您在螢幕上以視覺方式排列內容，但螢幕閱讀器/輔助技術仍會依照內容在底層標記中出現的順序宣告內容。請確保文件標記中的內容順序符合邏輯，無論其視覺呈現方式為何。

預先範本化的 UI

橫向對半 UI

橫向對半預先範本化的 UI 會調整 <amp-story-grid-layer> 元素的大小，使其僅佔據螢幕的一半而非整個螢幕，並定位在檢視區的左半邊或右半邊。此屬性僅影響橫向檢視區，在直向檢視區中會遭到忽略。此範本讓設計滿版橫向 Stories 更容易：將螢幕分成兩半，讓每一半在大多數裝置上都具有直向比例，進而允許重複使用已為直向 Stories 建置的直向素材、設計和範本。

<amp-story-grid-layer> 元素上的 position 屬性接受兩個值：landscape-half-left 或 landscape-half-right。

您的 Story 需要啟用 supports-landscape 模式才能使用此範本。

範例

<amp-story-page id="foo">
  <amp-story-grid-layer template="fill" position="landscape-half-left">
    <amp-img src="cat.jpg" alt="..."></amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" position="landscape-half-right">
    <h2>Cat ipsum dolor sit amet...</h2>
  </amp-story-grid-layer>
</amp-story-page>

現代外觀比例

格線層上的回應式預設值可最大化前景元素的可使用螢幕空間，並一致地縮放素材。

<amp-story-grid-layer preset="2021-background" template="fill">
    <amp-img src="cat.jpg" layout="fill" alt="...">
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground">
    <h1>This will stay consistent with the bg</h1>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="bottom-left">
    <!-- Position the icon close to the corner on all screens -->
    <amp-img src="icon.jpg" alt="..." style="bottom: 1em; left: 1em">
</amp-story-grid-layer>

背景預設值主要適用於設計同時具有背景和前景元素的版面配置。如果頁面只包含背景中的圖片或影片，請考慮針對該情境使用一般的格線層。

前景

針對前景元素使用 2021-foreground 預設值。此圖層將始終完全可見，並水平或垂直展開至邊框，最大化尺寸而不會裁切。屬性 anchor 可用於將前景圖層釘選至頁面角落或邊框，以便將元素相對於這些邊框或角落定位 (這對於標誌或註腳很有用)。

背景

針對背景圖層使用 2021-background 預設值。此預設值使用背景素材涵蓋大多數行動電話上的整個螢幕。它在不使用信箱效果的情況下執行此操作，並使定位與前景元素保持一致。雖然此技術提供最一致的使用者體驗，但可能會裁切背景的一個或所有邊框最多 7%。在設計和挑選素材時，請牢記這一點。

在不具備傳統手機螢幕尺寸的裝置 (例如平板電腦或摺疊式手機) 上，此預設值可能會顯示信箱效果。您可以變更頁面的背景顏色以符合背景，以獲得最佳視覺效果。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有涵蓋您的所有問題？或許其他人也有同樣的感覺：在 Stack Overflow 上與他們聯絡。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub