建構標準 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>

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

當您檢查開發人員主控台中的 JavaScript 輸出時 (請確認您已選取「Console (主控台)」標籤)，您應該會看到此記錄項目

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 DevTools 中，按一下手機圖示，然後從選單中選取行動裝置。

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

我們的 AMP 頁面的行動模擬

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