AMP
EN
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 相同的任務，但我們將使用 vertical 範本，而不是使用 fill 範本。不過，在我們繼續之前，讓我們先瞭解範本，以及我們如何在 <amp-story-grid-layer> 中排列 AMP 和 HTML 元素。

使用範本配置元素

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

範本：填滿
填滿範本會使用圖層中的第一個子元素填滿畫面。此圖層中的任何其他子元素都不會顯示。「填滿」範本非常適合用於背景，包括圖片和影片。
<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>
範本：垂直
垂直範本會沿著 y 軸配置子元素。這些元素會與畫面頂端對齊，並沿著 x 軸佔據整個畫面。「垂直」範本非常適合用於您想要垂直堆疊元素，一個緊接在另一個之後的情況。
<amp-story-grid-layer template="vertical"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </amp-story-grid-layer>
範本：水平
水平範本會沿著 x 軸配置子元素。這些元素會與畫面開頭對齊，並沿著 y 軸佔據整個畫面。「水平」範本非常適合用於您想要水平堆疊元素，一個緊接在另一個之後的情況。
<amp-story-grid-layer template="horizontal"> <p>元素 1</p> <p>元素 2</p> <p>元素 3</p> </amp-story-grid-layer>
範本：三分
三分範本會將畫面分成三個大小相等的列，並讓您將內容插入每個區域。您也可以指定具名的 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>

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

上一章 下一章