Accelerated Mobile Pages 進階概念

1. 總覽

本程式碼研究室會延續 Accelerated Mobile Pages 基礎概念中介紹的概念。開始本實驗室前，您應已完成先前的程式碼研究室，或至少已基本瞭解 AMP 的核心概念。

在本程式碼研究室中，您將瞭解 AMP 如何處理廣告、數據分析、影片嵌入、社群媒體整合、圖片輪轉介面等。為達成這個目標，您將以基礎程式碼研究室的範例為基礎，透過各種 AMP 元件新增這些功能。

課程內容

使用 amp-ad 顯示廣告。
嵌入 YouTube 影片、Twitter 資訊卡和回應式文字元素。
使用 amp-carousel 建立圖片輪轉介面和內容組合。
使用 amp-analytics 追蹤簡單的模式。
在頁面中新增網站導覽的方式。
字型如何與 AMP 搭配運作。

軟硬體需求

程式碼範例
Chrome (或可檢查 JavaScript 控制台的同類瀏覽器)
Python (建議使用 2.7 版) 或 Chrome 200 OK Web Server 擴充功能
程式碼編輯器 (例如 Atom、Sublime、Notepad++)

2. 取得程式碼範例

您可以將所有範例程式碼下載至電腦：

...或從指令列複製 GitHub 存放區：

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

系統會下載 ZIP 檔案，內含多個範例資源檔案和起始 article.html 頁面。

解壓縮資料夾，然後透過電腦上的指令列前往該目錄。

3. 執行範例網頁

如要測試範例網頁，我們需要從網路伺服器存取檔案。您可以透過多種方式建立臨時本機網路伺服器，以進行測試。本程式碼研究室將提供 3 種做法的操作說明：

Google Chrome 應用程式「Web Server for Chrome」：這是最簡單的跨平台解決方案，因此我們建議採用這種做法。注意：這個方法需要安裝 Google Chrome。
Firebase 託管 - 如果您也想探索新的靜態資產託管平台「Firebase 託管」，這是替代選項。預設啟用 SSL。
本機 HTTP Python 伺服器 - 需要存取指令列。

選項 1：Web Server for Chrome

您可以在 Chrome 線上應用程式商店透過這個連結找到「Web Server for Chrome」應用程式。

安裝 Chrome 應用程式後，請透過「選擇資料夾」按鈕，將應用程式指向特定資料夾。在本程式碼研究室中，您應選取解壓縮程式碼研究室範例檔案的資料夾。

此外，請勾選「Automatically show index.html」選項，並將連接埠設為「8000」。您必須重新啟動網路伺服器，變更才會生效。

透過下列方式存取這個網址：

http://localhost:8000/article.amp.html

如果上述網址能順利載入，請繼續前往下一節。

選項 2：Firebase 託管

如要探索全新的 Firebase 靜態網站代管服務，請按照這裡的操作說明，將 AMP 網站部署至 Firebase 代管網址。

Firebase 代管是靜態託管服務供應商，可供您快速部署及代管靜態網站及其資產，包括 HTML、CSS 和 JavaScript 檔案。由於靜態內容會快取在內容傳遞網路 (CDN) 中，而 CDN 的網路連接點 (PoP) 遍布全球，因此使用者可享有低延遲的優勢。

最後，Firebase 代管一律透過 SSL 提供服務，因此非常適合 AMP 和一般網站。如果您只想專注於 AMP，請直接忽略這個選項。

選項 3：HTTP Python 伺服器

如果您未使用 Chrome，或無法順利安裝 Chrome 擴充功能，也可以透過指令列使用 Python 啟動本機網頁伺服器。

如要從指令列執行 Python 的內建 HTTP 伺服器，只要執行下列指令即可：

python -m SimpleHTTPServer

並存取這個網址：

http://localhost:8000/article.amp.html

4. 瞭解核心 AMP 元件

AMP 的元件系統讓我們能以最少的心力，在文章中快速建構有效率且具備回應式設計的功能。<head> 代碼中的核心 AMP JavaScript 程式庫包含數個核心元件：

amp-ad - 用於顯示廣告的容器。
amp-img - HTML img 標記的替代項目。
amp-pixel：用做追蹤像素，計算網頁瀏覽次數。
amp-video - HTML5 影片代碼的替代項目。

您可以在 AMP 文件中立即使用上述所有核心元件。我們的範例程式碼已在網頁中使用 amp-img，且我們在 AMP 基礎程式碼研究室中探討了這與 AMP 版面配置系統的關係，因此接下來就來瞭解 amp-ad 吧！

5. 新增廣告

範例 article.amp.html 頁面應如下所示：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </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>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

上述是簡單的網頁，這個網頁最有趣的地方在於，它通過了 AMP 驗證和 Schema.org 搜尋引擎中繼資料驗證。如果這個網頁部署在新聞網站上，就有資格納入 Google 搜尋中專為 AMP 內容設計的輪轉介面，因此很適合做為我們的工作起點。

在變更網頁之前，請先開啟 Chrome 開發人員工具。在網站上作業時 (尤其是以行動裝置為主的網站)，通常建議在瀏覽器中測試時模擬行動裝置體驗。開始：在 Chrome 中開啟 Developer Console，方法是按下 Menu > More Tools > Developer Tools：

現在請檢查開發人員控制台中的 JavaScript 輸出內容。確認已選取「Console」(控制台) 分頁標籤：

現在點選開發人員控制台中的裝置模擬按鈕。以並排的手機和平板電腦表示：

在隨即顯示的選單中，將裝置設為「Nexus 5X」：

現在可以開始處理網頁本身。我們來嘗試在 AMP 文章中加入廣告！

AMP 中的所有廣告都是使用 amp-ad 元件建構而成。使用這個元件，我們可以透過多種方式設定廣告，例如寬度、高度和版面配置模式。不過，許多廣告平台都需要額外設定，例如廣告聯播網的帳戶 ID、應放送的廣告，或是廣告指定目標選項。對於 amp-ad，我們只需填入各種必要選項做為 HTML 屬性。

請參閱這個 Double Click 廣告範例：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

如您所見，這項設定非常簡單。請注意 type 屬性，這項屬性會告知 amp-ad 元件要使用哪個廣告平台。在本例中，我們需要 Double Click 平台，因此類型值為 doubleclick。

data-slot 屬性更獨特。以 data- 開頭的任何 amp-ad 屬性都是供應商專屬屬性。也就是說，並非所有供應商都一定會要求提供這項屬性，也不一定會對此做出反應。舉例來說，請比較上述 Double Click 範例與 A9 平台提供的測試廣告：

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

請嘗試在 <header> 標記後，將上述兩個範例新增至文章中。重新整理頁面，您應該會看到兩個測試廣告：

我們來看看還有哪些選項可搭配 DoubleClick 使用。請嘗試在網頁中加入這兩項地理區域目標廣告設定：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

很抱歉，您無法透過網頁程式碼控制地理區域目標。不過，這些測試廣告已在 Double Click 資訊主頁中設定，只會在特定國家/地區顯示，也就是英國和美國。

重新整理頁面，然後查看。以下螢幕截圖是在澳洲拍攝，因此兩個廣告都無法載入：

上述地理區域指定目標範例說明 amp-ad 具有足夠的彈性，可支援各種廣告平台功能。

目前支援的廣告聯播網如下：

如要瞭解最新支援的廣告平台，請務必查看 AMP 廣告元件的說明文件頁面。

在下一章中，我們將探討更多進階 AMP 元件，以及如何在 AMP 文件中加入這些元件。

6. 使用擴充元件擴展內容

到目前為止，您已建立基本的 AMP 文件，其中包含文字、圖片，甚至嵌入網頁的廣告，這些都是講述故事和透過內容營利的重要元素。不過，現代網站通常不只包含圖片和文字，還提供更多功能。

現在，讓我們進一步瞭解 AMP 文件，並探索除了先前提到核心元件以外的可用元件。

在本章中，我們將嘗試新增新聞文章中常見的進階網頁功能：

YouTube 影片
Tweet
文章引文

嵌入 YouTube 影片

讓我們試著在文件中嵌入 YouTube 影片。下列程式碼會嵌入影片，並新增至頁面：

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

重新整理頁面，然後查看頁面。你應該會看到「無法載入影片」這段文字，而不是影片。

即使瀏覽器可以正常顯示 YouTube 影片，您仍會收到這則錯誤訊息。這是因為影片並未無法載入，而是元件本身發生錯誤。

請注意，核心 AMP 程式庫 JavaScript 檔案不包含所有元件。我們需要特別為 YouTube 元件加入額外的 JavaScript 請求。除了核心集以外，所有元件都需要這些額外的 JavaScript 參照。

在 <head> 標記中新增下列要求：

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

重新整理頁面，應該就會看到 YouTube 影片：

我們再次指定影片的寬度和高度，讓 AMP 版面配置系統計算顯示比例。此外，版面配置類型已設為回應式，表示這個影片會填滿父項元素的寬度。

進一步瞭解 YouTube 元件。

顯示 Tweet

在新聞報導中嵌入 Twitter 預先格式化的推文，是常見的功能。AMP Twitter 元件可輕鬆提供這項功能。

首先，請在文件的 <head> 標記中加入下列 JavaScript 要求：

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

現在請在文章中新增這段程式碼，嵌入推文本身：

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid 屬性是另一個例子，說明特定平台供應商需要自訂屬性。在這種情況下，Twitter 會將 data-tweetid 屬性視為對應至要嵌入網頁的特定推文。

重新整理瀏覽器，然後查看頁面。您應該會看到推文：

進一步瞭解 Twitter 元件。

醒目顯示文章引文

新聞文章中常見的元素是醒目顯示文章中特別引人入勝的文字片段。舉例來說，為了吸引讀者注意，可能會以較大的字體重複顯示特定來源的引文或重要事實。

不過，由於並非所有引文或文字片段的字串字元長度都相同，因此很難在較大的字型大小與特定文字在網頁上佔用的空間之間取得平衡。

AMP 包含另一個專為這類情況設計的元件，稱為 amp-fit-text。您可以定義固定寬度和高度的元素，以及最大字型大小。元件會智慧地縮放字型大小，配合可用寬度和高度，顯示引文文字。

我們來試試看。首先，將元件的程式庫新增至 <head> 標記：

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

在網頁中新增下列內容：

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

重新整理頁面，然後查看結果！

現在請進一步實驗。如果引文短得多，會發生什麼情況？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

還是要引用較長的內容？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

最後，請嘗試使用 amp-fit-text 建立一小段文字 (例如 #YOLO)，並將高度設為大得多 (例如 400)，同時維持 max-font-size 屬性值為 42。結果頁面會是什麼樣子？文字是否垂直置中？amp-fit-text 標記的高度是否會縮小，以符合最大字型大小？根據您對 AMP 版面配置系統的瞭解，請先回答問題，再編輯文件！

7. 複雜的輪轉介面

輪播是網頁開發的另一項常見功能。AMP 包含專為滿足這項需求而設計的一般元件。我們先從簡單的範例開始，例如圖片輪轉介面。

請記得在文件的 <head> 標記中加入下列 JavaScript 要求，納入輪轉介面元件程式庫：

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

接著，我們會嵌入簡單的圖片輪轉介面，並採用回應式版面配置和預先定義的寬度和高度。在網頁中新增下列內容：

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

重新整理頁面，頁面中應該會顯示輪轉介面：

輪播元件的設定方式有很多種，請嘗試將類型變更為 slides，然後查看結果。請務必將 amp-carousel 的 layout 屬性和其中的圖片也變更為 responsive。

現在畫面一次只會顯示一個元素，而非捲動清單。嘗試水平滑動，在各個元素之間移動。如果滑動到第三個元素，就無法再滑動。

接著，新增 loop 屬性。重新整理頁面，然後立即向左滑動。輪轉介面會無限循環播放。

最後，我們讓這個輪播內容每 2 秒自動播放一次。在網頁中加入 autoplay 屬性，以及值為 2000 的延遲屬性，如下所示：delay="2000"。

最終結果應如下所示：

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

重新整理頁面，即可開始使用！

圖片輪轉介面很棒，但如果我們想在輪轉介面中顯示更複雜的內容呢？我們來試著將廣告、文字和圖片全部放在同一個輪轉介面中，稍微混搭一下。amp-carousel 真的可以一次處理這麼多混合內容嗎？沒錯。

首先，請將這個樣式新增至網頁，確保 amp-fit-text 和 amp-carousel 元件能安全地共同運作：

amp-fit-text {
    white-space: normal;
}

現在請嘗試將下列輪播介面程式碼放入網頁：

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

重新整理頁面，畫面應如下所示：

進一步瞭解輪轉介面元件。

8. 使用 amp-analytics 追蹤

通常會透過內嵌 JavaScript 程式碼片段和函式呼叫，將 Analytics 平台整合到網站中，藉此觸發事件並傳回 Analytics 系統。AMP 提供彈性的 JSON 設定語法，可為多個 Analytics 合作夥伴複製這個程序。

以下是傳統 JavaScript 驅動的 Google Analytics 追蹤範例，我們將以 amp-analytics 的 JSON 格式重新編寫。首先是傳統的 JavaScript 方法：

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

上述程式碼相當簡單，會針對要追蹤的網頁瀏覽事件傳送通知。

如要在 amp-analytics 元件中複製上述所有內容，請先在文件的 <head> 中加入元件程式庫：

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

然後我們加入元件，如下所示：

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

這看起來可能比較複雜，但其實是描述多種不同類型事件的彈性格式。此外，JSON 格式不包含傳統範例中的 JavaScript 程式碼 Blob，如果意外變更，可能會導致錯誤。

在 JSON 格式中，觸發條件鍵包含一組鍵，代表我們要追蹤的所有事件觸發條件，這些觸發條件的鍵是事件說明，例如上方的「預設網頁瀏覽」。標題鍵值與所檢視網頁的名稱有關。

擴充上述範例，我們可以新增另一個觸發條件「點選 #header 觸發條件」：

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

這個觸發條件的用途如其名，使用 DOM 選取器「#header」查詢 ID 為「header」的標記，並在裝置上「點擊」或輕觸該標記時，將事件動作「clicked-header」連同類別標籤「examples」傳送至 Analytics 平台。

如果您想整合自訂追蹤平台，仍可使用 amp-analytics，並為追蹤資訊定義專屬的個人化網址端點。如要進一步瞭解 amp-analytics 元件，請參閱這篇文章！

9. 瀏覽網站

行動版網站的常見需求是納入網站導覽選單。這些選單的形式相當多元，以下列舉幾個在 AMP 文件中顯示導覽的方式：

連結回首頁，這是最簡單的方法。
透過輪轉介面元件顯示的子標題選單。

首頁連結

如要讓使用者存取網站的正常導覽選項，最簡單的方法就是將他們導回一般網站介面！

請嘗試新增這個 HTML 連結至 <header> 標記：

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

並新增這項規則至內嵌 CSS：

.home-button {
  float: left;
}

現在重新整理頁面。您應該會在頁面左上角看到指向 homepage.html 的連結，但點選這個連結後，會發現它不會導向任何位置。

您可以將這個連結換成網站首頁的網址，讓使用者透過一般網站的導覽功能前往網站的其他部分。

如前所述，這是最簡單的方法，只要運用現有的網站導覽即可。接下來，我們將探討兩種替代方案。

解決這個問題的另一種方法，是在 AMP 文件中顯示網站的導覽選單。如要將內容限制在網頁的一小部分，可以使用輪播介面，在網站標題下方顯示可捲動的選單。

由於我們需要輪轉介面元件，請務必將元件的 JavaScript 新增至網頁的 <head> 標記：

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

請嘗試在 <header> 標記下方新增這個 HTML 程式碼片段：

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

並新增下列規則至內嵌 CSS：

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

現在重新整理頁面。文章標題下方應該會顯示連結選單。這個選單可以水平捲動，儲存許多導覽連結。

這個子選單導覽是儲存大量連結的好方法，不會佔用太多頁面空間。

10. 新增字型

如先前所述，AMP 文件不允許外部樣式表要求。不過，字型是這項規則的例外。

字型是網頁使用者閱讀文章體驗的重要一環，由於網頁瀏覽器會透過外部樣式表要求擷取字型檔案，因此 AMP 必須排除這類要求。

讓我們試著將 Raleway 字型的參照新增至文件：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

現在請更新 CSS，加入 Raleway 的參照：

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

重新整理頁面，即可查看頁面的新樣貌。同時檢查驗證器的輸出內容，您會發現這個外部要求沒有任何問題。

11. 恭喜！

您已完成進階 AMP 程式碼研究室，並成功探索 AMP 的許多重要元件！

希望您已清楚瞭解如何使用 amp-ad 和 amp-analytics 支援各種不同的廣告平台和數據分析供應商。請務必查看完整清單，瞭解所有可用的 AMP 元件。

以下提供一些額外主題和連結，可供您進一步探索，提升技能！