AMP for Email 基础

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

如果您熟悉 AMP，那就太棒了！AMP for Email 只是 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> doctype 开始。这也是 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 库加载之前，通过将 AMP for Email 样板放在 <head> 中来初始隐藏电子邮件内容。

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

AMP 特定标签替换

由于 AMP for Email 库是 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 for Email 支持 CSS 选择器和属性的有限子集。

请参阅 AMP for Email 支持的 CSS，以获取在支持 AMP 的电子邮件客户端中允许的 CSS 的完整列表。

AMP 对样式的大小限制为 75,000 字节。

允许的 AMP 组件

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

AMP for Email 中支持的组件的完整列表可作为 AMP for Email 规范的一部分获得。

验证请求

动态个性化电子邮件内容通常需要验证用户身份。但是，为了保护用户数据，从 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 发送一封电子邮件，其中包含他们之前所做的笔记列表。当前用户的笔记列表可以在端点 https://example.com/personal-notes 以 JSON 格式获得。

在发送电子邮件之前，该服务为 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 for Email 的电子邮件客户端提供其自己的文档和测试工具来帮助您进行集成。

请参阅测试 AMP 电子邮件，以获取更多信息以及指向电子邮件客户端特定文档的链接。

由 @CrystalOnScript 撰写