Hello World 電子郵件

簡介

學習如何建立您的第一個 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>

URL 在 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 撰寫