建立您的第一個 AMP 電子郵件

重要：此文件不適用於您目前選擇的格式 stories！

AMP 電子郵件讓電子郵件寄件者可以在電子郵件訊息中使用 AMP，以支援一系列全新功能。使用 AMP 編寫的電子郵件可以包含互動式元素，例如圖片輪播或摺疊選單，內容在訊息中保持最新狀態，並且收件者可以執行動作，例如回覆表單，所有這些都無需離開收件匣。

AMP 電子郵件與現有電子郵件相容。訊息的 AMP 版本作為新的 MIME 部分嵌入到電子郵件中，除了 HTML 和純文字之外，確保跨所有郵件用戶端的相容性。

如需支援 AMP 電子郵件的電子郵件平台 (ESP)、用戶端和提供者的清單，請參閱 FAQ 中的支援的電子郵件平台。

按照本教學課程建立和發送您的第一個由 AMP 驅動的動態電子郵件。您可以在此處查看完成的程式碼。

從 AMP 電子郵件樣板開始

AMP playground 支援 AMP 電子郵件格式，讓您可以開發、測試和驗證您的 AMP 電子郵件。開啟 AMP Playground 並確保左上角的格式設定為 AMP for Email。您應該會看到以下程式碼

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>

它包含所有必要的標記和最少的程式碼，使其成為有效的 AMP 電子郵件。另請注意右上角下拉式選單中有效電子郵件範本的許多其他範例。

讓我們花一點時間點出與傳統 HTML 電子郵件的一些顯著差異

AMP 電子郵件必須在 html 標籤中包含 ⚡4email 或 amp4email，以識別自己。
<head> 標籤也必須包含一個 <script> 標籤，用於載入 AMP 執行階段。 <script async src="https://cdn.ampproject.org/v0.js"></script>
CSS 樣板，用於在載入 AMP 之前初步隱藏內容。 <style amp4email-boilerplate>body{visibility:hidden}</style>

如果您之前使用過電子郵件，則將指令碼放入電子郵件的想法可能會在您腦海中敲響警鐘！請放心，支援 AMP 電子郵件的電子郵件提供商會強制執行嚴格的安全檢查，只允許經過審查的 AMP 指令碼在其用戶端中執行。這使得動態和互動式功能可以直接在收件者的信箱中執行，而沒有安全漏洞！在此處閱讀有關 AMP 電子郵件所需標記的更多資訊。

只有支援的元件的 AMP 指令碼可以包含在 AMP 電子郵件中。

包含圖片

大多數用於電子郵件的 HTML 標籤都可以在 AMP 電子郵件中使用。但是，某些標籤（例如 <img> 標籤）會被 AMP 等效標籤 <amp-img> 取代。

<amp-img> 標籤需要定義圖片的寬度和高度，並且與 <img> 不同，<amp-img> 必須透過 </amp-img> 明確關閉。

<amp-img src="https://link/to/img.jpg"
         alt="photo description"
         width="100"
         height="100">
</amp-img>

此外，透過 <amp-anim> 支援 GIF 檔案。

由於電子郵件未託管在您的伺服器上，因此 URL 必須在 AMP 電子郵件中使用絕對路徑，並且必須是 HTTPS。

Placekitten 是一個使用小貓圖片作為預留位置的網站。它們允許您直接在 URL 中選擇圖片的大小！

我們可以透過新增以下程式碼在我們的第一封電子郵件中包含圖片。

<body>
  <amp-img src="https://placekitten.com/800/400"
           alt="Welcome"
           width="800"
           height="400">
  </amp-img>
</body>

使其具有回應式

電子郵件會在各種裝置和螢幕尺寸上檢視，而 AMP 隨附內建版面配置系統！透過 amp-layout 系統和媒體查詢，實作回應式電子郵件非常容易。若要調整我們放置的小貓圖片大小以適應適當的螢幕，請將 layout="responsive" 屬性新增至您的 <amp-image>。

閱讀更多關於 AMP 如何與版面配置和媒體查詢搭配運作的資訊.

<amp-img layout="responsive" src="https://placekitten.com/800/400" alt="Welcome" height="400" width="800"></amp-img>

展開和縮小瀏覽器視窗以觀看圖片調整大小！在此處查看支援的版面配置特定元件清單。

修改呈現方式和版面配置

一張圖片很好，但如果我們想要顯示更多圖片呢？AMP 電子郵件支援版面配置元素，例如摺疊選單和側邊欄。

在本教學課程中，我們將使用 <amp-carousel> 來顯示待領養貓的照片。

將 amp-carousel 指令碼新增至電子郵件的 head。

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

然後將我們的第一張圖片包裝在 <amp-carousel> 標籤中。

<amp-carousel layout="responsive"
              width="800"
              height="400"
              type="slides">
        <amp-img layout="fill" src="https://placekitten.com/800/400"  alt="Welcome" height="400" width="800"></amp-img>
</amp-carousel>

您可能會注意到沒有任何改變，這是一件好事！我們的輪播已獲得屬性 type=slides，這表示它一次會顯示一張照片。由於我們只在標籤內放置了一張照片，因此它不會為使用者提供滑桿箭頭。

接下來，將 place kitten 圖片替換為 <amp-carousel> 內待領養的 AMP 貓咪。

<amp-carousel id="carousel-with-preview"
    width="800"
    height="400"
    layout="responsive"
    type="slides"
    on="slideChange:AMP.setState({currentCat: event.index})">
  <amp-img layout="fill" src="https://amp.dev.org.tw/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://amp.dev.org.tw/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://amp.dev.org.tw/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://amp.dev.org.tw/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"  alt="photo courtesy of Unsplash"></amp-img>
 </amp-carousel>

您現在應該能夠透過按一下輪播左側或右側的導覽箭頭來變更照片！

以風格發送

AMP 允許在 <style amp-custom> 標籤內的文件 head 中設定樣式。此外，先前禁止的 CSS 類別和虛擬類別現在可以使用。在此處閱讀完整清單。

讓我們將 Hello, AMP4EMAIL world 更新為真實標題。

<body>
  <h1>Adorable Adoptable Animals</h1>
  ...
</body>

然後在 head 中新增一些樣式。

<head>
  ...
  <style amp-custom>
    h1 {
      font-family: arial;
      margin: 10px;
    }
    .center {
      text-align: center;
    }
    .carousel-preview {
      margin-top: 10px;
    }
  </style>
</head>

新增動態功能

傳統上，電子郵件只允許靜態內容。透過 AMP，電子郵件開啟了一個全新的可能性世界！使用者現在可以回覆表單、取得動態更新的內容，並與內容互動。

在本教學課程中，我們將使用 <amp-bind> 在使用者位於該貓咪的幻燈片上時顯示我們可領養貓咪的名字和描述。首先在電子郵件的 head 中包含 amp-bind 指令碼。

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

接下來，我們將在 <amp-state> 標籤內將 AMP 繫結變數「myState」宣告為 JSON 字串。由於我們有四張貓咪照片，因此我們將包含所有四張照片的狀態。

<body>
<amp-state id="myState">
  <script type="application/json">
    {
      "cats": [
         {
          "name": "Aakash",
          "description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug."
        },
        {
          "name": "Filip",
          "description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
        },
        {
          "name": "Julian",
          "description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
        },
        {
          "name": "John",
          "description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move."
        }
      ]
    }
  </script>
</amp-state>

AMP 動作和事件觸發不同的狀態。在我們的案例中，我們希望在使用者按一下輪播導覽箭頭時更新狀態。amp-carousel 會觸發 slideChange 事件，我們將在此事件上使用 AMP.setState 更新 currentCat 變數。

<h1>Adorable Adoptable Animals</h1>
<amp-carousel width="800"
              height="400"
              layout="responsive"
              type="slides"
              on="slideChange:AMP.setState({ currentCat: event.index} )">
  ...
</amp-carousel>

此程式碼將 currentCat 的狀態設定為符合輪播索引處的貓咪照片。因此，如果我們位於幻燈片 event.index=2，則狀態將對應到陣列中索引 2 的項目。

剩下要做的就是顯示我們貓咪的名字和描述。在結束 amp-carousel 標籤下方新增以下程式碼。

</amp-carousel>
<div class="center">
  <h1>
    <span [text]="myState.cats[currentCat].name">Aakash</span>  is available for adoption!
  </h1>
</div>

amp-bind 擴充功能使用運算式和繫結來動態變更內容。上面的程式碼範例使用 [text] 繫結來更新 <span> 標籤內的文字，每次狀態透過評估 "myState.cats[currentCat].name" 運算式變更時。

為了效能並避免意外內容跳動的風險，amp-bind 不會在頁面載入時評估運算式。這表示視覺元素應被賦予預設狀態，而不是依賴 amp-bind 進行初始呈現。

別忘了在 </div> 標籤後新增我們的貓咪描述！

  </div>
  <p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
  <p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
</body>

現在，當您變更輪播中的貓咪照片時，牠們的名字和描述也應該更新！

發送您的 AMP 電子郵件

若要了解如何將您的電子郵件發送到您的收件匣，請閱讀更多關於測試 AMP 電子郵件的資訊

恭喜！您已發送您的第一封 AMP 電子郵件！

如需後續步驟，請閱讀更多關於 AMP 電子郵件基礎知識的資訊。

由 @CrystalOnScript 撰寫