HTML 邮件模板开发指南：渲染一致性与可维护性

HTML 邮件模板开发指南：渲染一致性与可维护性

HTML 邮件开发比普通 HTML 难得多——你面对的是几十年前的渲染引擎，不能用现代 CSS，也不能用 JavaScript。

为什么邮件 HTML 这么难

• 表格布局：Outlook 到 2016 年还在用 Word 渲染引擎，只有表格布局能保证兼容性
• 内联样式：大多数邮件客户端会剥离 <head> 里的样式，只有内联 style 才安全
• 图片默认关闭：Outlook 和 Gmail 默认屏蔽外部图片
• 没有 JavaScript：邮件里不能跑脚本

基础模板结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:0;padding:0;background:#f4f4f4;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding:20px 0;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0"
               style="background:#ffffff;border-radius:8px;">
          <tr>
            <td style="padding:40px;">
              <!-- 内容放这里 -->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

用 React Email 或 MJML

手写内联样式又丑又难维护。推荐用 React Email（JSX 写邮件组件）或 MJML（类 HTML 的 DSL）生成最终 HTML：

// React Email 示例
import { Button, Html, Text } from '@react-email/components';

export function OrderEmail({ orderId }) {
  return (
    <Html>
      <Text>你的订单 #{orderId} 已确认</Text>
      <Button href={`https://yourapp.com/orders/${orderId}`}>
        查看订单
      </Button>
    </Html>
  );
}

用 Rovela 发送渲染好的模板

const { render } = require('@react-email/render');
const html = render(<OrderEmail orderId="12345" />);

await rovela.emails.send({
  from: 'orders@yourdomain.com',
  to: user.email,
  subject: '订单确认',
  html,
});

测试工具

• Email on Acid / Litmus：在真实客户端上预览渲染效果
• Mail Tester：检测垃圾邮件评分
• Rovela 发送日志：查看实际投递状态

不要只在浏览器里看邮件，浏览器渲染和 Gmail/Outlook 渲染差别很大。