创建您的第一个 AMP 电子邮件

重要提示：本文档不适用于您当前选择的格式 ads！

AMP for Email 允许电子邮件发送者在其电子邮件消息中使用 AMP 来支持一系列新功能。用 AMP 编写的电子邮件可以包含交互元素，例如图片轮播或折叠面板，内容在消息中保持最新，并且收件人无需离开收件箱即可执行诸如回复表单之类的操作。

AMP for Email 与现有电子邮件兼容。消息的 AMP 版本以新的 MIME 部分嵌入到电子邮件中，除了 HTML 和纯文本之外，确保在所有邮件客户端中的兼容性。

有关支持 AMP for Email 的电子邮件平台（ESP）、客户端和提供商的列表，请参阅常见问题解答中的支持的电子邮件平台。

按照本教程构建并发送您的第一个由 AMP 驱动的动态电子邮件。您可以在此处查看完成的代码。

从 AMP 电子邮件样板开始

AMP Playground 支持 AMP for Email 格式，允许您开发、测试和验证您的 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 for Email 支持布局元素，例如折叠面板和侧边栏。

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

将 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.org.cn/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://amp.org.cn/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://amp.org.cn/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://amp.org.cn/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"  alt="photo courtesy of Unsplash"></amp-img>
 </amp-carousel>

您现在应该可以通过单击轮播左侧或右侧的导航箭头来更改照片！

有格调地发送

AMP 允许在 <style amp-custom> 标签内的文档头部进行样式设置。此外，以前禁止的 CSS 类和伪类现在也可以使用。在此处阅读完整列表。

让我们将 Hello, AMP4EMAIL world 更新为真正的标题。

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

然后在头部添加一些样式。

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

添加动态功能

传统上，电子邮件只允许静态内容。通过 AMP，电子邮件向全新的可能性敞开了大门！用户现在可以回复表单、动态更新内容以及与内容进行交互。

在本教程中，我们将使用 <amp-bind> 在用户位于该猫的幻灯片上时显示我们可收养猫的名字和描述。首先在您的电子邮件的头部包含 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] 绑定，以便在每次通过评估 "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 for Email 基础知识的更多信息。

由 @CrystalOnScript 撰写