Hello World 電子郵件

簡介

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

需要 Doctype 宣告。

<!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 for Email 樣板。

<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 for Email 中必須使用絕對路徑。

由於我們在標頭中匯入了 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