使用 mjml 生成 thymeleaf 邮件框架模板

原创
2018/12/12 03:37
阅读数 3.3K

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。

  • 得支持多种客户端
  • 支持响应式
  • 疼彻心扉的 outlook
  • 多数客户端只支持 inline 形式的 css
  • 布局只支持 table
  • 等等

结果最后模板页面维护起来就是哇哇吐的效果。

想当初是用的 velocity 模板来搞的,反正写完之后就再也懒得看第二眼了。

还好有病就有药,有人搞了个 mjml 来维护这东西,简单的 markup 标记语法,看文档也就个把小时的事,配合 thymeleaf 模板居然完美解决了。

在 GitHub 上搞了个项目测试了一下效果,完美!!!

地址:https://github.com/someok/mjml-thymeleaf-mail-layout

此项目下有两个子项目:

  • mjml-template: mjml 模板项目,可以维护模板并编译发布 HTML,使用 gulp 编译并拷贝到 spring boot 项目下
  • spring-boot-demo: spring boot demo 项目,提供一些单元测试代码用于测试生成的 HTML 模板

东西很简单,不过有些注意事项:

  • thymeleaf 支持 data-th-* 格式注入,可以在编辑器中不会出现 H5 页面错误提示

  • thymeleaf 支持 注释 方式的注入,配合 mjml(支持 xml 格式注释)可以比较方便地控制条件。 例如:

    <!--/*/ <section data-th-fragment="divider"> /*/-->
    <mj-section padding="0">
      <mj-column>
        <mj-divider />
      </mj-column>
    </mj-section>
    <!--/*/ </section> /*/-->
    

    注意:上面的 /*/ 在生成 html 之后可能会出现空格,而这个在 thymeleaf 上面是不支持的,所以使用 gulp 来编译并做相应的替换操作。

基本就这样了。

最后上一张效果图:

样例图片

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部