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

我們的第一個 AMP 頁面

專家模式關閉

專家模式

使用專家模式來隱藏針對初學者的網頁開發指南。

開始我們的旅程

今天是我們團隊首次建構 Chico’s Cheese Bike 網站的第一天。到目前為止，這個網站只是一個基本的 HTML 頁面，包含一個含有網站標題的頁首、一張我們自行車的圖片，以及一些行銷文字。

我們的基本 HTML 網站

在您的 Glitch 專案中，開啟 index.html 並確認 HTML 看起來像這樣

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Chico's Cheese Bicycles</title>
    <link
      rel="shortcut icon"
      href="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-favicon.png?1540228964214"
    />
  </head>
  <body>
    <header class="headerbar"><h2>Chico's Cheese Bicycles</h2></header>
    <main>
      <div class="main-content">
        <img
          src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746"
        />
        <div class="below-hero">
          <h2 class="main-heading">What we're about</h2>
          <p class="main-text">
            We sell the only ten-speed bicycles in the world made entirely of
            cheese. They get you where you need to go, and you never arrive
            hungry. Our bikes are 100% biodegradable. And with our new
            rodent-repelling varnish they last longer than ever!
          </p>
        </div>
      </div>
    </main>
  </body>
</html>

我們的團隊已確定使用 AMP 將能更輕鬆地建構我們想要的網站功能，因此我們的工作是將這個 HTML 頁面轉換成有效的 AMP 頁面。

首先，我們需要向全世界表明我們正嘗試建構 AMP 網站。為此，我們將在 <html> 標記中新增一些裝飾。如果 <html> 標記包含 ⚡ 符號或 amp 這個字，AMP Validator 和 AMP 快取等工具會將我們的網站視為 AMP 網站。

在您的 Glitch 專案中，將 ⚡ 符號新增至 <html> 標記，如下所示

<html ⚡ lang="en">

這個符號至關重要。它表示我們正在製作 AMP 網站。接下來，我們將討論 AMP Validator 等工具如何協助我們判斷需要進行哪些變更才能使網站有效。

驗證和 AMP 快取

我們已經提過幾次「有效 AMP」的概念。讓我們討論一下這代表什麼以及為什麼重要。

首先，最重要的是，有效 AMP 很重要，因為它對您的使用者有益。AMP 的規則代表效能、可存取性和安全性方面的最佳實務。因此，驗證錯誤是 AMP 告訴您，您的網站還有改善空間，讓使用者有更好的體驗！

其次，有效 AMP 很重要，因為 AMP 快取非常實用。快取是 AMP 架構中強大的一部分。它是一個內容傳遞網路 (CDN)，旨在

  • 僅提供有效的 AMP 頁面。

  • 允許有效率且安全地預先載入 AMP 頁面。

  • 對快取中的頁面執行多項效能最佳化。

當使用者要求您的 AMP 網站時，他們可能會從離他們最近的 AMP 快取伺服器收到網站。如果您的網站位於 AMP 快取中，當您使用 Google 等搜尋引擎時，它可以有效地在背景中預先載入。如果使用者從搜尋結果中選取您的網站，即使連線狀況不佳，網站也會在幾秒鐘內出現。此外，AMP 快取將對您的網站執行自動最佳化，例如

  • 快取字型。

  • 快取和壓縮圖片，並將其轉換為較新的格式，例如 WebP。

  • 清理 AMP 文件，以防止跨網站指令碼攻擊或其他漏洞。

  • 修正可能導致各種瀏覽器中呈現不一致的 HTML 問題；即關閉所有標記、將屬性名稱設為小寫或逸出文字

當您使用 AMP 建構網站並完成這些訓練中的練習時，請檢查以確保您的網站有效。為了追蹤驗證錯誤，我們將使用在課程簡介中安裝的 AMP Validator。

練習 1：使用 AMP Validator

在您安裝 AMP Validator Chrome 擴充功能後，驗證器將自動在任何開啟的頁面上執行，該頁面的 <html> 標記中具有 AMP 符號 (⚡)，就像我們現在這樣。開啟您的 Glitch 專案並查看 AMP Validator 擴充功能的圖示。它應該看起來類似於下面的紅色圖示，徽章表示有 7 個驗證錯誤。

顯示 AMP 問題的 AMP Validator Chrome 擴充功能。

按一下 AMP Validator 的圖示會開啟一個彈出視窗，其中列出目前頁面的驗證錯誤，並提供一些可能的解決方案來解決我們的問題。

AMP Validator Chrome 擴充功能中顯示的問題。

對於關於 <img> 標記的項目

標記 <img> 只能顯示為標記 'noscript' 的子系。您的意思是 'amp-img' 嗎？

按一下項目結尾的「Debug」連結。「Debug」連結會將您直接帶到頁面上包含所列錯誤的程式碼行。這有助於您找到檔案中發生的錯誤，並協助您了解修正錯誤所需的內容。別擔心：這個訊息現在看起來可能不明確，但這是一個簡單的修正。我們需要使用 AMP 元件 <amp-img> 而不是 HTML 標記 <img>。在本課程的元件思維章節中，我們將探討為什麼會出現此錯誤、<amp-img> 是什麼，以及如何修正它。

AMP 除錯工具顯示行內錯誤。

對於任何其他驗證錯誤項目，按一下標示為「Learn more」的連結。此連結會將您直接從錯誤描述帶到相應的 AMP 文件，這些文件將協助您修正問題。

透過 AMP Validator 中的「Learn more」連結存取的 AMP 文件。

注意：無法根據 AMP Validator 擴充功能中的「Debug」和「Learn More」選項找出修正錯誤的方法？請在此處閱讀驗證錯誤和建議修正動作的完整清單：這裡。

下一步是修正這些驗證錯誤。為此，我們需要進一步了解 AMP 頁面的必要元素。我們需要做的比在 HTML 中新增閃電符號來建立有效的 AMP 頁面更多。

AMP 頁面的結構

每個 AMP 頁面都從相同的基本範本開始。然後，我們從那裡自訂和建構頁面。這個入門範本有時稱為 AMP 樣板。樣板是標記的組合，用於設定 AMP 執行階段並協助 AMP 頁面順利執行。

在本節中，我們將稍微說明 AMP 樣板的每個部分。但是，您不需要記住每次使用 AMP 製作頁面時都新增這些標記。您可以直接使用這個樣板開始您未來的 AMP 頁面。

AMP 頁面中需要下列標記。有效的 AMP 頁面必須

  • 以 <!doctype html> 宣告類型開始。

  • 同時包含 <head> 和 <body> 標記。

  • 包含 <meta charset="utf-8"> 標記作為其 <head> 標記的第一個子項。

  • 在其 <head> 標記內包含 <meta name="viewport" content="width=device-width"> 標記。注意：也建議加入 initial-scale=1。

下列規則專門用於設定 AMP 執行階段。有效的 AMP 頁面也必須

  • 包含最上層的 <html ⚡> 標記。閃電符號表示這是 AMP 網站。注意：也接受 <html amp>。

  • 在其 <head> 標記內包含 <script async src="https://cdn.ampproject.org/v0.js"></script> 標記。這會載入 AMP JavaScript 函式庫。注意：最佳實務是盡可能在 <head> 中儘早加入指令碼。

  • 在其 <head> 內包含 <link rel="canonical" href="$SOME_URL"> 標記。如果網站存在，這會指向您網站的常規 HTML 版本，如果網站不存在非 AMP 版本，則指向其自身。注意：您應該將上述 href 屬性中的 $SOME_URL 替換為您頁面的實際 URL。

  • 在其 <head> 標記中包含 AMP 樣式樣板程式碼。這個 CSS 會隱藏頁面上的內容，直到 AMP 函式庫完成載入為止。AMP 樣式樣板是下列程式碼片段


<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

注意：AMP 樣板程式碼必須按原樣複製和貼上。上面的程式碼已縮小，但如果您在程式碼上使用自動格式器 (例如 Prettier)，它也可以運作。請確保不要變更上方標記內文字的順序或變更值。如果您想進一步了解 AMP 樣板中這些標記的含義以及它們為什麼重要，可以閱讀附錄中的相關資訊。

CSS 和 AMP

CSS 可自訂網站的外觀。您幾乎總是會將自訂樣式新增至您的 AMP 頁面。不過，請注意 AMP 對 CSS 的使用施加了一些限制

  • 樣式只能存在於文件標頭中的 <style amp-custom> 標記內，或在需要時作為行內 style 屬性。此限制可防止載入外部樣式表，但也可以節省網路請求、啟用快取並提高效能。

  • AMP 頁面只能有一個 <style amp-custom> 標記（裝飾樣式標記）。

  • 頁面包含的 CSS 不得超過 75K。

  • !important 規則受到限制。

  • 如需更多不允許或受限制的 CSS 規則，請查看這裡的文件。

為了練習將自訂樣式新增至您的 AMP 頁面，請將下列 <style amp-custom> 標記新增至您頁面的 <head> 中，看看會發生什麼事。完成後，您可以從頁面中移除樣式。

<style amp-custom>
    body {
        font-family: sans-serif;
        line-height: 1.5rem;
        padding: 20px;
    }
    p, h2 {
        border: 1px dotted red;
    }
</style>

影響我們頁面的自訂 CSS。

練習 2：轉換我們 HTML 頁面的其餘部分

現在是時候修正我們在上一個練習中發現的網站驗證錯誤了。為此，我們必須將 AMP 樣板範本的遺失部分新增至我們的基本 HTML 網站。

對於這個和所有未來的練習，我們將應用我們所學到的知識，對 Glitch 中的網站實作真實的程式碼變更。我們會一路提供您一些提示。在每個練習結束時，我們都會提供完整的解決方案。請嘗試自己完成練習，但如果您遇到困難或需要提示，請隨時從解決方案章節複製程式碼。

此外，在這些課程的開始和結束時，我們都會提供一個 Glitch 範本，其中包含我們到目前為止完成的所有程式碼。如果您遺失目前的 Glitch 頁面，或想從我們的解決方案開始，您可以從這些 Glitch 範例複製程式碼，或直接重新混合這些範例並從那裡繼續前進。

使用 AMP 樣板的文件和上面的註解，更新您的 Glitch 專案，使只有 <img> 標記驗證錯誤仍然存在。此外，為了協助我們建構 Chico’s Cheese Bikes 網站，我們提供了一些 CSS 以在整個訓練中使用。如果您開啟這個頁面，<style amp-custom> 標記在那裡，其中包含您需要的樣式。您應該將這些樣式複製到您一直在使用的專案中。

解決方案

解決方案可以在這個 Glitch 範例中找到。包含變更的頁面部分應如下所示

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Chico's Cheese Bicycles</title>
  <link rel="shortcut icon" href="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-favicon.png?1540228964214">
  <meta name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="https://hungry-modem.glitch.me/">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    ... styles elided due to length ...
  </style>
</head>

幾乎有效的 AMP 頁面...

如果您完成上述所有練習，恭喜您！您的頁面幾乎是有效的 AMP 頁面。如果您開啟您的頁面和 Chrome 開發人員工具 (Mac 上為 Command+Option+I 或 Windows/Linux 上為 Control+Shift+I)，然後選取 Console 標籤，您應該會在主控台中看到此訊息，表示 AMP 函式庫已成功載入

Powered by AMP ⚡ HTML

接下來，如果您開啟 AMP Validator 擴充功能，它會顯示我們只剩下最後一個錯誤

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

這是需要理解的重要錯誤。某些 HTML 標記在 AMP 文件中是不允許的。在某些情況下，AMP 要求您使用替代方案。我們將這些自訂、非標準 HTML 標記稱為「元件」，我們將在本訓練的下一節中更詳細地討論它們。

注意：您可以使用這裡的 HTML 作為起點，開始您未來的 AMP 頁面。此 HTML 包含上述的 AMP 樣板。它包含我們到目前為止涵蓋的所有必要標記和元素。或者，您可以使用這裡的樣板產生工具，使用其他功能自訂您的起點。

上一章 下一章