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

尋找合適的元件

關閉專家模式

專家模式

使用專家模式來隱藏為初學者設計的網站開發指南。

到目前為止，我們使用的元件都相當簡單明瞭。對於 <amp-img> 和 <amp-youtube>，只要瀏覽文件、查看範例，然後複製到我們的網站即可。若要使用這些元件更進階的功能，或是更複雜的元件，我們就需要閱讀並吸收文件中的更多資訊。

為了有效率地開發 AMP 網站，學習如何瀏覽 AMP 元件文件非常重要。在本系列的所有訓練課程中，我們都會大量練習這項技能。

接下來，我們要加入一系列起司自行車產品的圖片，供使用者捲動瀏覽。為此，我們將使用圖片輪播元件。輪播是一種元素，其中包含一組可以像幻燈片一樣滑動瀏覽的項目。AMP 輪播的實作方式是元件：<amp-carousel>。此元件並非內建，因此您需要在網頁的 <head> 中加入其指令碼。

當我們查看 <amp-carousel> 的文件時，我們正在尋找以下問題的答案：

  • 這個元件有什麼用途？

  • 我該如何使用這個元件？

  • 我可以使用哪些屬性來自訂這個元件？

  • 我該如何設定這個元件的樣式？

  • 我是否需要加入額外的指令碼才能啟用這個元件？

  • 這個元件支援哪些版面配置？

<amp-carousel> 的 AMP 文件頁面。

查看 <amp-carousel> 文件中的下列項目：

  • 說明 - 每個元件的文件頂端都有簡短的說明。它總結了元件是什麼以及它存在的原因。

  • 行為區段 - 本區段說明元件的運作方式。它通常會提供一些範例程式碼以及元件外觀的預覽。

  • 屬性清單 - 我們在先前關於網頁元件的章節中討論過自訂屬性。這些屬性可讓我們以特定方式自訂 AMP 元件。本區段包含不同屬性的清單、其可能的值，以及屬性控制的內容。

  • 樣式設定區段 - 本區段說明如何使用 CSS 變更此元件的外觀。除了依標籤名稱或 ID 設定樣式外，許多元件還提供額外的 CSS 類別，可用於變更元件在特定狀態下的外觀。例如，<amp-carousel> 提供 .amp-carousel-button 類別，讓開發人員可以重新設定變更輪播投影片的按鈕樣式。

  • 必要的指令碼標籤 - 此標籤位於文件頂端，需要新增至我們網站的 <head> 中，才能使元件運作。大多數元件都需要這些額外的指令碼才能運作。

  • 支援的版面配置 - 我們在先前的章節中討論過 layout (版面配置) 屬性。它控制元素在螢幕上的呈現方式。本區段說明哪些版面配置對此元件有效。

幾乎所有 AMP 元件的文件中都列出了這些項目。讓我們使用其中一個範例來探索文件

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
<amp-img src="images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
<amp-img src="images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
<amp-img src="images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
</amp-carousel>

此輪播包含三張圖片，供使用者滑動瀏覽。此輪播元件實例 (id、width、height、layout 和 type) 的屬性分為三組：所有 HTML 元素通用的屬性 (id)、所有 AMP 元件通用的屬性 (width、height 和 layout)，以及輪播元件獨有的屬性 (type)。

在 <amp-carousel> 的文件中，我們看到元件可以具有 type 屬性。它顯示 type 的有效輸入包括 slides 和 carousel。

這表示如果您未指定 type，則預設值將為 carousel。

提示：有些屬性完全不需要值。這些屬性稱為 布林屬性。在這些情況下，屬性的預設值為 false，而當附加到元素或元件時，值為 true。

許多其他自訂屬性可以與 <amp-carousel> 元件搭配使用。第一次使用 AMP 元件時，請瀏覽文件以了解您可以透過屬性自訂元件外觀或行為的所有方式。

練習 5：建立圖片幻燈片

讓我們練習使用文件，將 <amp-carousel> 新增至我們的專案。在 <p class="main-text"> 元素下方新增一個具有下列設定的輪播：

  • 讓輪播具有 responsive 版面配置。

  • 讓輪播的 type 為 slides。

  • 將三張圖片新增至輪播：assets/cheddar-chaser.jpg、assets/cheese.jpg 和 assets/mouse.jpg。

  • 如果使用者嘗試超出最後一張投影片，讓輪播圖片循環回到開頭。

建議的樣式指南

  • 讓輪播的 width 為 412，height 為 309。

  • 讓每張圖片的 width 為 412，height 為 309。

完成變更後，查看即時頁面以檢查您的成果。您的頁面應看起來像這樣：

我們頁面中的輪播。

解決方案

以下是您新增的程式碼在專案中的外觀：

<amp-carousel layout="responsive" width="412" height="309" type="slides" loop>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
             width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
             width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
             width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>

請記得在 <head> 中加入 <amp-carousel> 指令碼

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

探索新元件

當我們繼續開發起司自行車網站時，我們不一定總是知道想要新增的 AMP 元件名稱，才能實作某些想要的新功能。AMP 社群已產生大量的元件集合，可處理許多不同類型的功能：廣告和分析、動態內容、版面配置、媒體、簡報和社群。開發 AMP 網站時，通常會收到一組新功能的需求，然後在 AMP 元件清單中搜尋符合這些需求的元件。

探索新 AMP 元件的第一種方法是使用您慣用的搜尋引擎或 AMP 專案 網站上的搜尋功能。這是直接前往您已知道名稱的元件文件的有效方法。此外，您可以搜尋您感興趣的元件說明來尋找結果。例如，搜尋「YouTube 影片」會將 <amp-youtube> 列為第一個結果。同樣地，搜尋「可摺疊內容」會將 <amp-accordion> 元件列為第一個結果。

尋找元件的另一種方法是使用 AMP 元件參考頁面。其中包含 AMP 支援的元件清單。每個元件項目都包含元件的名稱和元件提供哪些功能的簡短說明。我們可以點擊元件的名稱來存取元件的文件。正如我們稍早所學到的，文件將更深入地介紹元件的行為。根據這些資訊，我們應該能夠判斷元件是否符合我們的需求，或者我們是否需要搜尋不同的元件。在未來的訓練課程中，我們將討論在沒有單一元件符合我們所有需求時該怎麼辦。

AMP 元件參考頁面。

最後，我們可能仍然對元件在我們網站上的行為方式有疑問，或者我們可能不清楚如何在更複雜的方式中使用元件。amp.dev 上的 AMP 範例區段有許多頁面展示 AMP 元件，顯示各種設定這些元件的方式，以滿足現代網站中的常見使用案例。通常，您可以直接從元件的文件前往元件的對應 AMP 範例頁面。

<amp-carousel> 元件的 AMP 範例頁面。

社群媒體連結在現代網頁中很常見。AMP 為我們提供了現成的連結按鈕，讓使用者只需按一下即可在他們的社群媒體上分享您的網頁，從而協助您提高使用者參與度。

使用 AMP 文件，在 <amp-youtube> 元件下方新增按鈕，讓使用者只需按一下即可分享我們的網頁。但是，您需要瀏覽並在AMP 元件參考中搜尋，才能找到相關的 AMP 元件。(提示：本節的標題應該可以幫助您找到您要尋找的內容。)

找到正確的元件後，點擊元件的名稱以存取其文件。使用該文件新增以下元件：

  • 讓使用者可以選擇在以下平台分享您的網頁：電子郵件、LinkedIn、Tumblr 和 Twitter。

建議的樣式指南

  • 將 AMP 元件包裝在具有 social-bar 類別的 div 中。

  • 讓每個 AMP 元件的 width 和 height 均為 44。

完成此任務後，您的頁面應包含供使用者分享您網站的按鈕：

嵌入在網頁中的社群媒體按鈕。

解決方案

<div class="social-bar">
  <amp-social-share type="email" width="44" height="44"></amp-social-share>
  <amp-social-share type="linkedin" width="44" height="44"></amp-social-share>
  <amp-social-share type="tumblr" width="44" height="44"></amp-social-share>
  <amp-social-share type="twitter" width="44" height="44"></amp-social-share>
</div>

請記得在 <head> 中加入 <amp-social-share> 指令碼

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

上一章 下一章