如何实现一个 Email HTML 邮件模板

如何实现一个 Email HTML 邮件模板

前言

我们也许会发现，我们在生活中收到的邮件html邮件模板知乎，经常不是单纯地文字，往往会非常的丰富精彩，就像一个网页一样，是的，这就叫 Email HTML

一、开始探索

害，工欲善其事必先利其器，从设计那里拿设计图后，当时心想应该很简单，也就普通的html实现就好了，但避免有没有注意的东西，就先谷歌一波，查查看有木有啥要注意的如何实现一个 Email HTML 邮件模板，所以开始我就先查查了email html的实现，这一查就发现不得了~~~

先看的就是大佬HTML Email 编写指南 – 阮一峰的网络日志的文章，赶紧拜读一波，读后大呼，还好有事先准备，原来考虑到兼容性，Emial HTML在很多邮件客户端上会显示异常。

需要用到很多的技巧

这么一看下来，不得了呀，这可真麻烦呀！在继续看了好几篇文章，终于看到想要的，使用工具，人类的智慧在于偷懒呀，这么麻烦的事，谁去干呀，肯定会有人站出来的，结果就有各种各样的工具帮我们实现的这篇知乎的文章,当时就选择了一个，轻轻松松的完成了。

最后在一键生成html邮件模板知乎，堪称完美。大体如下编译后的结果：

二、浪子回头

看看就觉得工具真的伟大，要我写那这样的玩意那可真难受呀，回头自信慢慢的发给导师过眼（还好没有直接发给项目管理的大佬，也没有直接发给后端，不然估计，一个提刀找我html邮件模板知乎，还有个在找刀~~~~），结果导师傻眼了，会被打，会被打，会被打~~~~~~~~

哈哈哈哈，回头导师发我了一个，之前同样需求的模板，大呼，妙呀，马上改好，给导师看后，完美通过，再给项目主管，收获一个赞，在给后端，赞加一。会被打，会被打，会被打

内心直呼吓死了~~~下面分享给大家吧，基本完成基本的需求和框架的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重置您的 无敌软件的 密码</title>
  <style>
    body,html,div,ul,li,button,p,img,h1,h2,h3,h4,h5,h6 {
      margin: 0;
      padding: 0;
    }
    body,html {
      background: #fff;
      line-height: 1.8;
    }
    h1,h2,h3,h4,h5,h6 {
      line-height: 1.8;
    }
    .email_warp {
      height: 100vh;
      min-height: 500px;
      font-size: 14px;
      color: #212121;
      display: flex;
      /* align-items: center; */
      justify-content: center;
    }
    .logo {
      margin: 3em auto;
      width: 200px;
      height: 60px;
    }
    h1.email-title {
      font-size: 26px;
      font-weight: 500;
      margin-bottom: 15px;
      color: #252525;
    }
    a.links_btn {
      border: 0;
      background: #4C84FF;
      color: #fff;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      margin: 40px auto;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      outline: none;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      display: block;
      text-decoration: none;
    }
    .warm_tips {
      color: #757575;
      background: #f7f7f7;
      padding: 20px;
    }
    .warm_tips .desc {
      margin-bottom: 20px;
    }
    .qr_warp {
      max-width: 140px;
      margin: 20px auto;
    }
    .qr_warp img {
      max-width: 100%;
      max-height: 100%;
    }
    .email-footer {
      margin-top: 2em;
    }
    #reset-password-email {
      max-width: 500px;
    }
    #reset-password-email .accout_email {
      color: #4C84FF;
      display: block;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <section class="email_warp">
    <div id="reset-password-email">
      <div class="logo">
        <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg" alt="logo">
      </div>
      <h1 class="email-title">
        尊敬的<span>AAA</span>您好：
      </h1>
      <p>您正在为登录邮箱为如下地址的 啦啦啦 账户重置密码：</p>
      <b class="accout_email">xxxx@abc.com</b>
      <p>请注意，如果这不是您本人的操作，请忽略并关闭此邮件。</p>
      <p>如您确认重置 XXXX 的账户密码，请点击下方按钮。</p>
      <a class="links_btn" onclick="window.open('https:XXXXXXXXXXX')">重置密码</a>
      <div class="warm_tips">
        <div class="desc">
          为安全起见，以上按钮为一次性链接，且仅在24小时内有效，请您尽快完成操作。
        </div>
        <p>如有任何疑问或无法完成注册，请通过如下方式与我们联系：</p>
        <p>邮箱：support@XXX.cn</p>
        <p>微信助理：XXXXX</p>
        <div class="qr_warp">
          <img src="https://XXXXXXXXXXXX" alt="微信二维码图片">
        </div>
        <p>本邮件由系统自动发送，请勿回复。</p>
      </div>
      <div class="email-footer">
        <p>您的智能项目助理</p>
        <p>XXXXXXXX</p>
      </div>
    </div>
  </section>
</body>
</html>

如图的效果：

后端只需要把模拟的数据的部分如何实现一个 Email HTML 邮件模板，更改为传递的值的就可以啦！！！其实随着时代的发展，早已今非昔比了，当时还和我导师说，我看的文章就是说要这么写呀，她叫我去看看那篇文章的时间，害，已经五年前的东西了~~~

三、注意点

<a class="links_btn" onclick="window.open('{{issueAccessUrl}}')">查看详情</a>

总结

学海无涯~~~