撰写您的第一封 AMP 电子邮件

Important: this documentation is not applicable to your currently selected format stories!

借助 AMP 电子邮件，电子邮件发件人可以在电子邮件中使用 AMP 来支持大量的新功能。使用 AMP 撰写的电子邮件可以包含各种互动元素（例如图片轮播界面或手风琴式菜单）。内容可以在消息中保持最新状态。收件人可以在不退出收件箱的情况下执行操作，例如对表单做出响应。

AMP 电子邮件与现有电子邮件兼容。除了 HTML 和明文外，AMP 版本的消息还会作为新的 MIME 部分嵌入到电子邮件中，以此确保在所有电子邮件客户端中兼容。

提示：有关支持 AMP 电子邮件的电子邮件平台 (ESP)、客户端和提供商，请参阅常见问题解答中的支持的电子邮件平台。

按照本教程的说明，撰写并发送由 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 电子邮件所需的全部标记和最少的代码。此外，请注意，在右上角的下拉菜单中，下拉列表中还有许多关于有效电子邮件模板的其他示例。

我们花一些时间来了解 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 电子邮件中使用。但是，某些标记将被替换为等效的 AMP 标记，例如 <img> 标记被替换为 <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>

此外，GIF 文件通过 <amp-anim> 获得支持。

由于电子邮件不在服务器上托管，因此，网址必须在 AMP 电子邮件中使用绝对路径，并且必须为 HTTPS。

Placekitten 网站使用小猫图片作为占位符，因而允许您直接在网址中选择图片的大小！

添加以下代码后，我们可以在第一封电子邮件中加入图片。

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

实现自适应

收件人会在各种设备和各种屏幕大小上查看电子邮件。AMP 自带布局系统！借助 amp-layout 系统和媒体查询，可以轻松实现自适应电子邮件。要将我们的占位小猫图片调整为适合相应的屏幕，请在 <amp-image> 中添加 layout="responsive" 属性。

详细了解 AMP 如何使用布局和媒体查询。

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

放大和缩小浏览器窗口，观看图片调整大小！点击此处查看受支持布局特有的组件列表。

修改呈现形式和布局

图片很精美，但如果想要显示更多图片，应该怎么办？AMP 电子邮件支持手风琴式菜单和边栏等布局元素。

在本教程中，我们将使用 <amp-carousel> 来显示可以收养的小猫的照片。

在电子邮件的 head 中添加 amp-carousel 脚本。

<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 属性，这意味着它每次显示一张照片。由于我们仅在标记中放入了一张照片，因此，用户看不到滑块箭头。

接下来，在 <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/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/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/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"
    alt="photo courtesy of Unsplash"
  ></amp-img>
  <amp-img
    layout="fill"
    src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"
    alt="photo courtesy of Unsplash"
  ></amp-img>
</amp-carousel>

现在，点击轮播左侧或右侧的浏览箭头，应该可以更改照片！

带样式发送

AMP 支持在文档 head 的 <style amp-custom> 标记中设置样式。此外，现在也可以使用以前被禁止的 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>
</body>

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] 绑定，每次在评估 "myState.cats[currentCat].name" 表达式时状态发生变化后，该绑定便会更新 <span> 标记中的文本。

出于性能考虑，同时为了避免出现意外的内容跳转，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 电子邮件基础知识的详细信息。

Written by @CrystalOnScript