Hello World Email

簡介

瞭解如何建立您的第一個 AMP 電子郵件。此範例涵蓋 AMP 電子郵件的基本結構。

必須宣告文件類型。

<!doctype html>

這會告知所有人這是 AMP 電子郵件。<html amp4email> 也適用。

<html ⚡4email lang="en" data-css-strict>

Head

字元集定義必須是 <head> 標籤的第一個子項。

<meta charset="utf-8">

AMP 執行階段。

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP 電子郵件的樣板。

<style amp4email-boilerplate>body{visibility:hidden}</style>

在標頭中匯入 AMP 元件，例如 amp-carousel 元件。

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

允許的 CSS 屬性和選取器

任何 AMP 文件中的所有 CSS 都必須包含在標頭中的 <style amp-custom> 標籤中，如上所示。AMP 中不允許內嵌樣式屬性。電子郵件訊息中允許的 CSS 因電子郵件供應商而異。如需參考，Gmail 中允許的 CSS 屬性和值清單，請參閱 Gmail 支援的 CSS 屬性與媒體查詢。

<style amp-custom>
  .emailbody {
    padding: 16px;
  }
  .helloworld {
    font-family: Helvetica;
    color: red;
    font-size: 24px;
    padding-bottom: 8px;
  }
  .images {
    max-width: 100%;
  }
</style>

整個 <style> 標籤的大小不能超過 75,000 位元組。驗證工具會檢查此項目。

Body

如同在 AMP 網頁中，大多數 HTML 標籤都可以直接使用。

您好！

<h1 class="helloworld">Hello!</h1>

某些標籤 (例如 <img> 標籤) 會被替換為對等或稍微強化的自訂 AMP HTML 標籤 (請參閱規格中的 HTML 標籤)。

<amp-img src="https://amp.dev.org.tw/static/samples/img/amp.jpg" width="800" height="600" layout="responsive"></amp-img>

在 AMP 電子郵件中，網址大多使用絕對路徑。

由於我們在標頭中匯入了 amp-carousel 元件作為範例，讓我們在這裡試試看。

<amp-carousel width="800" height="600" layout="responsive" type="slides" controls>
  <amp-img src="https://amp.dev.org.tw/static/samples/img/image1.jpg" width="800" height="600" alt="a sample image"></amp-img>
  <amp-img src="https://amp.dev.org.tw/static/samples/img/image2.jpg" width="800" height="600" alt="another sample image"></amp-img>
  <amp-img src="https://amp.dev.org.tw/static/samples/img/image3.jpg" width="800" height="600" alt="and another sample image"></amp-img>
</amp-carousel>

需要進一步說明嗎？

如果本頁的說明無法涵蓋您的所有問題，歡迎聯絡其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

未說明的功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例

作者 @juliantoledo