AMP
繁體中文
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 简体中文 Polski Tiếng việt

建立封面頁

Web Story 內的頁面是以 <amp-story-page> 元件表示。在 amp-story 中，您可以有一個或多個 <amp-story-page> 元件，其中包含故事的每個個別畫面。您在文件順序中指定的第一個頁面，就是 Web Story 中顯示的第一個頁面。

如要建立頁面，請新增 <amp-story-page> 元素做為 amp-story 的子項。為頁面指派不重複的 ID。對於我們的第一個頁面 (也就是封面頁)，我們將指派不重複的 ID cover

<amp-story standalone
    title="Joy of Pets"
    publisher="AMP tutorials"
    publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
    poster-portrait-src="assets/cover.jpg">
   <amp-story-page id="cover">
   </amp-story-page>
</amp-story>

現在我們有了封面頁的外殼。不過，我們製作的故事仍然無效。在頁面中，我們需要至少指定一個圖層。

頁面中的圖層

如同圖形中的圖層，您可以在 AMP 故事頁面中使用圖層來建立視覺效果。圖層會堆疊在彼此之上，因此第一個圖層是最底層，下一個圖層則在它的上方，依此類推。

我們的封面頁實際上是由兩個圖層組成

  • 圖層 1：做為背景的圖片
  • 圖層 2：故事的標題和作者署名

建立圖層 1

讓我們將第一個圖層新增至封面頁。這個圖層包含一張填滿畫面的圖片。

建立圖層的方式是新增 <amp-story-grid-layer> 元素做為 <amp-story-page> 的子項。由於我們希望圖片填滿畫面，請為 amp-story-grid-layer 指定 template="fill" 屬性。在圖層內，為 cover.jpg 檔案新增 amp-img 元素，並確保其具有回應式 (也就是 layout="responsive")，且圖片尺寸為 720 x 1280 像素。以下是我們的圖層外觀

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-img src="assets/cover.jpg"
        width="720" height="1280"
        layout="responsive"
        alt="">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

讓我們看看頁面會如何顯示。在瀏覽器中開啟頁面：https://127.0.0.1:8000/pets.html。

以下是應有的外觀

建立圖層 2

因此，我們有了背景，但現在我們需要第二個圖層，也就是位於背景上方並包含標題和作者署名的圖層。如要新增第二個圖層，請完成我們為圖層 1 執行的相同工作，但這次不要使用 fill 範本，而是使用 vertical 範本。不過，在繼續進行之前，我們先來瞭解範本，以及如何在 <amp-story-grid-layer> 中排列 AMP 和 HTML 元素。

使用範本配置元素

<amp-story-grid-layer> 元素會在格線中 (根據 CSS 格線) 配置其子元素。如要指出您希望如何排列子元素，您需要指定下列其中一個版面配置範本

範本：Fill
fill 範本會使用圖層中的第一個子元素填滿畫面。這個圖層中的任何其他子元素都不會顯示。fill 範本非常適合用於背景，包括圖片和影片。
<amp-story-grid-layer template="fill"> <amp-img src="dog.png" width="720" height="1280" layout="responsive" alt="Dog"> </amp-img> </amp-story-grid-layer>
範本：Vertical
vertical 範本會沿著 y 軸配置子元素。這些元素會與畫面頂端對齊，並佔據整個畫面的 x 軸。當您想要垂直堆疊元素 (一個接一個) 時，vertical 範本非常適合。
<amp-story-grid-layer template="vertical"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </amp-story-grid-layer>
範本：Horizontal
horizontal 範本會沿著 x 軸配置子元素。這些元素會與畫面開頭對齊，並佔據整個畫面的 y 軸。當您想要水平堆疊元素 (一個接一個) 時，horizontal 範本非常適合。
<amp-story-grid-layer template="horizontal"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </amp-story-grid-layer>
範本：Thirds
thirds 範本會將畫面分成三個大小相等的列，並讓您將內容置入每個區域。您也可以指定具名的 grid-area，以指出您希望內容位於哪個三分之一區域，即 upper-third、middle-third 或 lower-third。具名的格線區域可用於變更元素顯示位置的預設行為。例如，如果圖層中有兩個元素，您可以指定第一個元素位於 grid-area="upper-third"，第二個元素位於 grid-area="lower-third"。
<amp-story-grid-layer template="thirds"> <h1 grid-area="upper-third">元素 1</h1> <p grid-area="lower-third">元素 2</p> </amp-story-grid-layer>

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

完成封面頁

現在您已瞭解圖層範本，讓我們完成封面頁的第二個圖層。

對於圖層 2，我們希望標題和作者署名位於頂端，並希望元素依序排列，因此我們將指定 vertical 範本。我們的第二個 amp-story-grid-layer 緊接在第一個圖層之後，如下所示

<amp-story-grid-layer>
 <!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
  <h1>The Joy of Pets</h1>
  <p>By AMP Tutorials</p>
</amp-story-grid-layer>

重新整理瀏覽器並檢查您的作品。我們的封面頁已完成。

上一章 下一章