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>

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

上一章 下一章