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

組件化思考

關閉專家模式

專家模式

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

為我們的網站新增功能

到目前為止，我們已將基本的 HTML 網站轉換為基本的 AMP 網站。我們的網站只剩下一個驗證錯誤，我們將使用 <amp-img> 組件來取代 <img> 標記來修正此錯誤。在修正最後一個驗證錯誤時，我們將了解 AMP 組件是什麼、為何某些 HTML 標記在 AMP 中會被取代或禁止，以及如何在我們的網站中新增組件。

在那之後，就到了為我們的網站新增額外功能的時候了。為了完成 Chico’s Cheese Bike 首頁的初始版本，我們將新增一些額外的行銷內容。團隊已決定新增一部關於製作起司自行車的 YouTube 影片、各種起司自行車產品的圖片輪播，以及一些社群媒體連結，以協助使用者將我們的網站分享到他們喜愛的社群網路。

快速地為我們的網站新增這麼多元素似乎令人卻步。我們需要建立 HTML、CSS 和 JavaScript，才能滿足我們想要新增的功能 (例如如何變更輪播的活動幻燈片) 的許多需求。然後，我們還必須考量如何讓整個網站具有高效能。

但這正是 AMP 的美妙之處。有了 AMP，我們不必擔心所有這些細節！AMP 函式庫作者為我們提供了嵌入式的建構區塊，這些區塊為我們提供這些功能，並協助處理效能、可存取性和安全性等品質。這些區塊稱為組件，它們是使用 AMP 成功建立網站的關鍵。

什麼是網頁組件？

組件是網頁的建構區塊。它們代表結構 (HTML)、樣式 (CSS) 和行為 (JavaScript) 的組合，以及易於在您的網站中使用和與他人分享的介面。組件具有

  • 一個名稱 (例如 <amp-img>)，用作標記名稱以識別組件。

  • 自訂屬性，可變更組件的行為、樣式或內容 (例如 width、height、src 和 attribution)。

  • 可以擷取使用者對組件的輸入的事件 (on 屬性)。

選擇性地，組件也具有「子項」。此處的「子項」指的是放置在組件的開始和結束標記之間的內容 (例如文字、HTML 標記或其他組件)。這些子項在頁面上顯示的方式因組件而異。

AMP 的組件系統可協助您快速地將有效率且回應迅速的功能建置到您的頁面中，而只需最少的力氣。AMP 函式庫提供了您可以使用的完整組件清單。有組件可用於建置表單和輪播、整合頁面分析、向伺服器發出 XHR 請求等等。可能性幾乎是無限的。您可以在 AMP 組件參考資料中查看可用組件的完整清單 此處。

例如，以下是我們可以在網站中使用的三個 AMP 組件

AMP 組件 在我們網站上的呈現方式
<amp-img src="IMG-URL" layout="responsive" width="640" height="480"></amp-img>
<amp-twitter width="486" height="657" layout="responsive" data-tweetid="ID"></amp-twitter>
<amp-youtube data-videoid="ID" layout="responsive" width="480" height="270"></amp-youtube>

在建置 AMP 網站時，目標是盡可能使用 AMP 組件。組件可最大化使用 AMP 建置的效能優勢，因為您不必建立已存在的東西，從而充分利用 AMP 函式庫作者的工作成果。

幾乎所有 AMP 組件都至少由某些 JavaScript 執行。對於某些 AMP 組件 (例如 <amp-img>)，JavaScript 直接建置到您包含在頁面頂部範本中的 AMP 執行階段指令碼中。對於大多數 AMP 組件，您需要包含一個個別的指令碼標記。這是有充分理由的：您只包含您實際在網站中使用的指令碼。然後，使用者只需要下載瀏覽您的網頁所需的程式碼。下載的程式碼越少，您的網站載入速度就越快！

練習 3：我們的第一個組件 - <amp-img>

大多數 HTML 標記可以直接在 AMP 中使用，但某些標記 (例如 <img> 標記) 必須替換為對等的 AMP 組件。這些組件結合了可存取性、回應性和效能方面的內建最佳實務。

例如，以 <amp-img> 為例，AMP 要求我們指定影像的尺寸。AMP 需要在資源 (例如影像) 載入之前了解頁面的版面配置。這可以改善您的網頁載入時 (但在影像資源下載之前) 的使用者體驗。當影像下載完成時，可以將它們插入頁面中，而不會導致頁面上的任何現有內容移動。這讓 AMP 執行階段有空間根據使用者的裝置和網際網路連線能力來決定何時載入影像資源。

注意：如果您想進一步了解 AMP 的自動最佳化，可以閱讀 附錄 中關於 AMP 中的延遲載入的資訊。

若要使用組件並解決稍早的 <amp-img> 驗證錯誤，請將我們頁面中現有的 img 標記替換為對等的 AMP 標記。提示：不要寫 <img …>，而是寫 <amp-img …>，並為您的影像指定固定尺寸。將影像的 width 設為 640，height 設為 480。

如有必要，請參考 <amp-img> 的文件 此處。

解決方案

包含影像的頁面部分應如下所示

<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" width=”640” height="480"></amp-img>

注意：：檢查 AMP Validator 擴充功能。如果您已成功完成本練習，擴充功能圖示應為綠色。如果是，恭喜！您的網頁現在是有效的 AMP！

排列組件和調整組件大小

我們需要疑難排解的下一個問題與我們網頁的外觀有關。您在大型桌上型電腦螢幕上不會注意到它，但在行動裝置上查看網站時，很容易看出問題所在。

自行車的影像超出螢幕邊緣

我們新增到頁面的影像不會縮小以符合較小的螢幕；它只會溢出到側邊。如果我們沒有指定版面配置影像和調整影像大小的策略，它將預設為我們在程式碼中指定的固定寬度和高度。幸運的是，我們可以使用 AMP 的版面配置系統來修正此問題。

我們將為我們的影像指定 responsive 類型的 layout，使其在視窗調整大小時自動縮放。回應式版面配置會使影像採用父容器的尺寸，同時尊重原始長寬比。如果父容器只有 320 像素寬，影像將保持其長寬比並調整大小為 320x240 (而不是 640x480)。

將 layout 屬性新增到我們的影像。如果正確完成，它看起來會像這樣

<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" layout="responsive" width="640" height="480"></amp-img>

在您進行變更之後，查看您的網頁。影像具有正確的長寬比，並以回應式的方式填滿螢幕寬度。問題已解決。

具有正確長寬比的自行車影像

除了回應式版面配置之外，還有其他版面配置類型 (事實上至少有 8 種)。例如，fixed 版面配置表示組件永遠不應從分配給它的高度和寬度調整大小。intrinsic 版面配置與 responsive 版面配置類似，不同之處在於它具有組件無法超過的固有高度和寬度的概念。某些版面配置只能應用於某些組件。每個組件的文件將指定哪些版面配置對該組件有效。您可以閱讀關於其餘版面配置類型的資訊 此處。

如果您想成為成功的 AMP 開發人員，學習如何使用版面配置系統至關重要。AMP 提供的所有版面配置都可以使用純 CSS 實作，但它們通常可能很複雜，或者有需要深入了解才能解決的棘手邊緣案例。AMP 簡化了流程，並公開了許多這些版面配置選項，以便在您的 AMP 網頁中的任何元素上使用。查看 官方文件 以取得關於版面配置系統的更多資訊。

提示：嘗試從下拉式選單中選取不同的行動裝置 (請參閱下方的螢幕截圖)，以查看影像如何適應不同的螢幕尺寸。在不同的螢幕尺寸上測試您的網站是良好的做法。實際行動裝置上的瀏覽器行為可能不同，因此在可能的情況下，也在真實裝置上測試您的網頁。

Chrome 中的裝置下拉式清單

練習 4：嵌入影片

接下來，讓我們在文件中嵌入一部 YouTube 影片。我們 Chico’s Bikes 的行銷團隊發布了 這部 關於組裝我們的起司自行車的影片。

使用 <amp-youtube> 文件，將這部 YouTube 影片嵌入到 <amp-img> 組件下方，並使用以下設定

  • 將影片 ID 設定為 BlpMQ7fMCzA。

  • 將影片版面配置設為 responsive。

  • 注意：別忘了將指令碼新增到 <head> 中。

建議的樣式指南

  • 將元素 width 設定為 480，height 設定為 270。

提示：文件包含如何使用 <amp-youtube> 組件的範例。對於本練習，複製其中一個範例並使其適應上述要求就已足夠。

在您進行變更之後，查看您的網頁。您現在應該會看到 YouTube 影片

頁面中 YouTube 影片的影像

解決方案

<amp-youtube data-videoid="BlpMQ7fMCzA" layout="responsive" width="480" height="270"></amp-youtube>

請記得將 <amp-youtube> 指令碼包含在 <head> 中

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

注意：AMP 也包含對其他影片播放器的支援。請查看 AMP by Example 上的「在 AMP 中整合影片的概觀」。

上一章 下一章