建立一般的 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>

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

當您檢查開發人員工具主控台中的 JavaScript 輸出時（請確認您已選取「Console」分頁），您應該會看到這個記錄項目

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 的關聯性。