邮件模板实践小结

  • Z时代
  • 2024-01-10
  • 分类：综合

背景

有这么一种业务情景，比如说一个电商网站，用户下单了，然后就往用户的邮件里面发一封邮件告知用户。

此过程一般经历如下

用户下单

后端读取前端的邮件模板（HTML）

后端填充数据

后端把邮件发送到用户邮件服务器

用户打开邮件，浏览器呈现邮件内容

处理时候注意要点

这里面，用户的邮件服务器接收到邮件之后，会进行各种各样奇怪的处理

  • 简单的，会把js去掉，因为这些不太安全

  • 有一些会把样式标签去掉，例如<link rel="stylesheet">，<style>

  • hotmail会非常变态地，把你的网页改得面目全非，一些HTML标签和类名都会改

针对以上情况，我们在做邮件模板的时候，要注意以下要点：

  • 样式内联，即 <div style="color:red;">我是红色字</div>

  • 不能用伪元素，内联是不支持的

  • 不要用css hack <div style="*zoom:1;color:red;">我是红色字</div> 会导致红色的样式无效

  • 浮动最好不要用

  • 推荐table 布局

实践 — juice

实践过程中，要把样式都写在style中是一件很蛋疼的事情，这可以用工程化去处理，juice 是一个解决方案。

juice 会分析邮件中html与css语法，根据语法规则去内联css。而邮件发送的过程是需要嵌套后台模板的，所以此处就需要在嵌套的时候不要破坏html的语法，比如

<div class="a <!-- IF b --> b<!-- ENDIF -->">

就要写成

<!-- IF b --><div class="a b"><!-- ELSE --><div class="a"><!-- ENDIF -->

或者是利用node作为中间层去处理。

实践 — nodemailer

如何调试邮件的模板？首先我们内联之后，嵌套了数据的页面要能在本地访问到，然后可利用 nodemailer 去发送给到要测试的服务器上

request(url).then(resp =>sendEmailUseNodemailer({
    subject: item.subject,
    html: resp.body
}));

体会 — hotmail

hotmail会把你的邮件改得面目全非，自己体会

原html

<div class="mail">
    <p style="height:100px;background:red;"></p>
    <div class="mail2" style="position:relative;margin-top:1px; background-image:url(https://avatars1.githubusercontent.com/u/4214942);">
        <div class="mail3" style="margin:-3px;">234234234234</div>
    </div>
    <section>asdfasdf</section>
</div>

发送之后

<div class="x_mail">
<p style="height:100px; background:red"></p>
<div class="x_mail2" style="margin-top:1px">
<div class="x_mail3" style="">234234234234</div>
</div>
asdfasdf </div>

体会 — qqmail

在qq邮箱的css代码中，有这么一行代码

.btn,button,.qm_btn{
    color:#000!important;
}

那么你的邮件正文中 <div class="btn" style="color:red;">我想要红色字</div> 结果将会是 黑色字

总结

我们对于邮件模板的处理方案如下

  1. 样式内联

  2. 不用伪元素

  3. 不用css hack

  4. 不用浮动

  5. 多用table布局

  6. 不要用html5语义化标签如section,header,article,hgroup,asides

  7. 不要用 position:relative;margin-top; background-image;

  8. 不要用一些属性值为负值 例如 left:-1px，没有细测所有情况

  9. 不要带有类名

  10. 最后最后，提供一个让用户可以在线访问你的邮件正文的连接

以上是 邮件模板实践小结 的全部内容， 来源链接： utcz.com/z/264672.html

回到顶部