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

使用範本配置元素

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

範本：填滿 (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)
垂直範本會沿著 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)
水平範本會沿著 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)
三分範本會將畫面分成三個大小相等的列，並讓您可以將內容放入每個區域。您也可以指定具名的 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">element 1</h1> <p grid-area="lower-third">element 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>

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

上一章 下一章