建構一般的 HTML 頁面

在專案目錄中，您會找到一個名為 article.html 的檔案。這是我們要為其建立 AMP 對應頁面的新聞文章。

複製 article.html 檔案中的全部程式碼，並將其貼到一個新檔案中。
儲存新檔案為 article.amp.html。

注意 – 您不必將 AMP 檔案命名為 .amp.html。實際上，AMP 檔案可以使用您想要的任何副檔名。常見的做法是發布商透過網址中的參數來區分 AMP 頁面與其標準版本。例如：http://publisher.com/article.html?amp。

您的 article.amp.html 檔案應如下所示

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

這是一個刻意簡化的頁面，其中包含常見的靜態新聞文章元素：CSS、JavaScript 和圖片標籤。

我們的 AMP 版本文章目前只是原始文章的副本。讓我們將其轉換為 AMP。

首先，我們將新增 AMP 函式庫檔案。單獨這樣做並不能使您的新檔案成為有效的 AMP 頁面，但我們將在下面看到 AMP 函式庫如何幫助我們找出需要做些什麼來解決這個問題。

若要包含 AMP 函式庫，請新增此行至 <head> 標籤的底部

<script async src="https://cdn.ampproject.org/v0.js"></script>

在瀏覽器中透過 https://127.0.0.1:8000/article.amp.html 載入新的 article.amp.html 頁面，然後在 Chrome（或您偏好的瀏覽器）中開啟開發人員控制台。

當您在開發人員控制台中檢查 JavaScript 輸出時（確保您已選擇控制台標籤），您應該會看到此日誌條目

Powered by AMP ⚡ HTML

AMP 函式庫包含一個 AMP 驗證器，它會告訴您是否有任何東西阻止您的頁面成為有效的 AMP 文件。透過將此片段識別碼新增至您的文件網址來啟用 AMP 驗證器

#development=1

例如

https://127.0.0.1:8000/article.amp.html#development=1

在開發人員控制台中，您應該會收到幾個驗證錯誤（您可能需要手動重新整理瀏覽器中的頁面才能看到這些錯誤）

我們範例的 AMP 驗證錯誤

為了使這成為一個有效的 AMP 文件，我們將不得不修正所有這些錯誤——這正是我們將在此程式碼實驗室中所做的。

在我們開始之前，讓我們先在瀏覽器的開發人員工具中模擬行動裝置體驗，因為我們正在處理一篇行動新聞文章。例如，在 Chrome DevTools 中，點擊手機圖示，並從選單中選擇一個行動裝置。

您應該在瀏覽器中看到一個模擬的行動裝置解析度，如下所示

我們 AMP 頁面的行動裝置模擬

現在我們準備好開始工作了！讓我們逐一檢查驗證錯誤，並解決它們與 AMP 的關係。