AMP 电邮基础知识

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

如果你熟悉 AMP，那太棒了！AMP 电邮只是 AMP HTML 库的一个子集。如果你不熟悉 AMP，那也很棒！本指南将为你提供开始编写有效 AMP 电邮所需的一切知识！

必需的标记

AMP 电邮看起来像传统的 HTML 电邮，但有一些不同之处。以下是使电子邮件成为有效 AMP 电邮所需的最小标记量。

<!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>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>

支持 AMP 电邮的电子邮件提供商已设置安全检查，以确保用户获得愉悦和安全的体验。使用 AMP 构建的电子邮件必须满足所有要求

从 <!doctype html> 文档类型开始。这也是 HTML 的标准。
包含一个顶级的 <html amp4email> 标签，或者如果你的电子邮件特别酷，则包含 <html ⚡4email> 标签。这将文档标识为 AMP 电邮，以便可以将其视为 AMP 电邮。
定义 <head> 和 <body> 标签。这在 HTML 中是可选的，但 AMP 保持一切原始！
在 <head> 标签的第一个子项中包含 <meta charset="utf-8> 标签。这标识页面的编码。
AMP 库通过放置在 <head> 中的 <script async src="https://cdn.ampproject.org/v0.js"></script> 标签导入。没有它，通过 AMP 获得的任何令人敬畏的动态功能都将不起作用！作为最佳实践，应将其尽早包含在 <head> 中，紧跟在 <meta charset="utf-8"> 标签的下方。
最初隐藏电子邮件内容，直到通过将 AMP 电邮样板放置在 <head> 中来加载 AMP 库。

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

AMP 特定标签替换

由于 AMP 电邮库是 AMP HTML 库的一个子集，因此许多相同的规则适用；AMP 特定标签会替换资源密集的 HTML 标签，并且需要定义的宽度和高度。这允许 AMP 样板隐藏内容，直到它了解内容在用户设备上的外观。

图片

为了有效地绘制页面，所有 <img> 标签都替换为 <amp-img>。<amp-img> 标签需要定义的宽度和高度，并支持 AMP 的布局系统

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

<amp-img> 标签带有强大的内置方法来控制响应式设计和设置回退。

阅读有关使用 AMP 布局和媒体查询以及如何设置图像回退的更多信息。

GIF

AMP 创建了 <amp-anim>，这是一个用于 GIF 图像的特定标签，它允许 AMP 运行时在动画位于屏幕外时减少 CPU 使用率。与 <amp-img> 类似，宽度和高度是定义的，并且该元素必须包含一个结束标签。

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

此外，它还支持可选的 placeholder 子项，以在加载 src 文件时显示，并支持 AMP 布局系统。

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

样式化的电子邮件

与所有电子邮件客户端一样，AMP 允许内联 style 属性，但也支持电子邮件头部中的 <style amp-custom> 标签内的 CSS。

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

与 HTML 电子邮件一样，AMP 电邮支持有限的 CSS 选择器和属性子集。

有关支持 AMP 的电子邮件客户端中允许的 CSS 的完整列表，请参阅 AMP 电邮支持的 CSS。

AMP 对样式设置强制执行 75,000 字节的大小限制。

允许的 AMP 组件

AMP 组件的动态、视觉和交互性功能是将 AMP 电邮带入电子邮件未来的原因。

AMP 电邮中支持的组件的完整列表可作为 AMP 电邮规范的一部分提供。

验证请求

动态个性化电子邮件内容通常需要验证用户身份。但是，为了保护用户数据，从 AMP 电子邮件内部发出的所有 HTTP 请求都可能被代理并剥离 Cookie。

要验证从 AMP 电子邮件发出的请求，你可以使用访问令牌。

访问令牌

你可以使用访问令牌来验证用户身份。访问令牌由电子邮件发送者提供和检查。发送者使用令牌来确保只有有权访问 AMP 电子邮件的人才能发出该电子邮件中包含的请求。访问令牌必须是加密安全的，并且具有时间和范围限制。它们包含在请求的 URL 中。

此示例演示如何使用 <amp-list> 显示经过身份验证的数据

<amp-list
  src="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  height="300"
>
  <template type="amp-mustache">
    ...
  </template>
</amp-list>

同样，在使用 <amp-form> 时，将你的访问令牌放在 action-xhr URL 中。

<form
  action-xhr="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  method="post"
>
  <input type="text" name="data" />
  <input type="submit" value="Send" />
</form>

示例

以下示例考虑了一个假设的笔记服务，该服务允许已登录的用户将其笔记添加到其帐户并在以后查看。该服务希望向用户 jane@example.com 发送一封电子邮件，其中包含他们之前记录的笔记列表。当前用户的笔记列表可在 JSON 格式的端点 https://example.com/personal-notes 中找到。

在发送电子邮件之前，该服务会为 jane@example.com 生成一个加密安全的有限使用访问令牌：A3a4roX9x。访问令牌包含在 URL 查询内的字段名称 exampletoken 中

<amp-list
  src="https://example.com/personal-notes?exampletoken=A3a4roX9x"
  height="300"
>
  <template type="amp-mustache">
    <p></p>
  </template>
</amp-list>

端点 https://example.com/personal-notes 负责验证 exampletoken 参数并查找与令牌关联的用户。

有限使用访问令牌

有限使用访问令牌可防止请求欺骗和重放攻击，从而确保操作是由发送消息的用户执行的。通过将唯一令牌参数添加到请求参数并在调用操作时验证它来实现保护。

令牌参数应生成为只能用于特定操作和特定用户的密钥。在执行请求的操作之前，应检查令牌是否有效并与为你生成的用户令牌匹配。如果令牌匹配，则可以执行该操作。如果该操作应该是一次性操作，则该令牌对于将来的请求应变为无效。

访问令牌应作为 HttpActionHandler 的 url 属性的一部分发送给用户。例如，如果你的应用程序在 http://www.example.com/approve?requestId=123 处理批准请求，则应考虑向其添加额外的 accessToken 参数，并侦听发送到 http://www.example.com/approve?requestId=123&accessToken=xyz 的请求。

组合 requestId=123 和 accessToken=xyz 是你必须提前生成的组合，确保 accessToken 不能从 requestId 推断出来。任何带有 requestId=123 但没有 accessToken 或 accessToken 不等于 xyz 的批准请求都应被拒绝。如果该操作应该是一次性操作，一旦此请求通过，任何将来具有相同 ID 和访问令牌的请求也应被拒绝。

在不同的电子邮件客户端中测试

支持 AMP 电邮的电子邮件客户端提供自己的文档和测试工具，以帮助你进行集成。

有关更多信息和指向特定于电子邮件客户端的文档的链接，请参阅测试 AMP 电子邮件。

由 @CrystalOnScript 撰写