建立一般的 HTML 頁面

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

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

注意 – 你不一定要將 AMP 檔案命名為 .amp.html。事實上，AMP 檔案可以使用任何你想要的副檔名。常見的做法是發布商透過在 URL 中使用參數來區分 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 輸出時 (請確認你已選取「主控台」分頁標籤)，你應該會看到這個記錄項目

Powered by AMP ⚡ HTML

AMP 程式庫包含一個 AMP 驗證器，它會告訴你是否有任何因素使你的頁面無法成為有效的 AMP 文件。透過將這個片段識別碼新增至你的文件 URL 來啟用 AMP 驗證器

#development=1

例如

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

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

我們範例的 AMP 驗證錯誤

為了使這成為有效的 AMP 文件，我們必須修正所有這些錯誤，這正是我們將在本程式碼研究室中進行的工作。

在我們執行此操作之前，讓我們在瀏覽器的開發人員工具中模擬行動裝置體驗，因為我們正在處理行動新聞文章。例如，在 Chrome 開發人員工具中，按一下手機圖示，然後從選單中選取行動裝置。

你應該會在瀏覽器中看到類似這樣的行動模擬解析度

我們 AMP 頁面的行動模擬

現在我們準備好開始工作了！讓我們逐步檢查驗證錯誤，並說明它們與 AMP 的關聯性。