文档章节

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

郁也风
 郁也风
发布于 2018/12/12 03:37
字数 510
阅读 1.1K
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

  • 得支持多种客户端
  • 支持响应式
  • 疼彻心扉的 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 来编译并做相应的替换操作。

基本就这样了。

最后上一张效果图:

样例图片

郁也风
粉丝 16
博文 31
码字总数 17009
作品 0
长宁
项目经理
私信 提问
加载中
请先登录后再评论。
MJML for Mac(标记语言编辑器) v2.5.0发布

你是否需要一款简洁的标记语言编辑工具呢?试试MJML for Mac吧!MJML Mac版是一款运行在MacOS平台上的标记语言编辑器。MJML Mac版是一种标记语言,MJML设计用于轻松实现一个简化设计的响应式...

云不若
2019/12/27
9
0
mjml - 如何快速编写响应式电子邮件?

一、背景 以前做项目碰到发邮件的需求,邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的,但是确是 HTML 子集程度的支持,所以存在必须通过 排版的恶心之处,还有很多兼容性的坑...

osc_b4qlyocq
2019/07/14
8
0
node.js使用Nodemailer发送邮件

原文链接:Node.js使用Nodemailer发送邮件 电子邮件是—种用电子手段提供信息交换的通信方式,是互联网应用最广的服务。通过网络的电子邮件系统,用户可以以非常低廉的价格(不管发送到哪里,...

流口水流
2017/12/02
0
0
Spring Boot实现仿博客园发送通知邮件

邮件服务已经是基础性服务了 ,是网站的必备功能之一,当注册了某些网站的时候,邮箱里通常会收到一封注册成功通知邮件或者点击激活账号的邮件,博客园也是如此。本文使用Spring Boot,通过Q...

osc_8quu62cg
2018/12/12
8
0
响应式邮件设计工具推荐

1、foundation-emails ,介绍 对于只需要替换个用户名或者只有少部分内容需要动态的邮件,foundation-emails是非常不错的选择,在其中使用响应式非常非常简单 2、mjml,介绍 MJML是一种标记语...

近在咫尺远在天涯
2018/11/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS二分查找

二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤: (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素...

osc_ftbxuxl1
29分钟前
9
0
王爽汇编语言(第三版)环境搭建(附PDF及工具下载)

一、前言 最近在学习汇编语言,使用的是读者评价非常高的王爽老师写的《汇编语言》(第三版),为了适应现在各个版本的windows操作系统,所以采用VMWare虚拟机来搭建纯DOS环境。 二、需要的工...

osc_xsd7kks3
31分钟前
4
0
关于面向对象和面向过程本质的区别(个人感悟)

前言:   接触面向对象的概念也差不多两年了,对于面向对象也有着自己的一些感悟,期间也看到过面向过程的一些文章,但总是对于两种思想没有明确的区别概念,刚好今天在某篇博客上看到对于...

osc_zf8orajc
32分钟前
7
0
6 个珍藏已久 IDEA 小技巧,这一波全部分享给你!

每周趣图 产品经理设计体验/用户实际体验 本周就不写技术分析文章了,分享几个珍藏已久的 IDEA 的「骚技巧」,助你快速完成代码。 还等什么?赶紧上车吧...... 先赞后看,养成习惯。微信搜索...

楼下小黑哥
34分钟前
3
0
关于面向对象和面向过程本质的区别(个人感悟)

前言:   接触面向对象的概念也差不多两年了,对于面向对象也有着自己的一些感悟,期间也看到过面向过程的一些文章,但总是对于两种思想没有明确的区别概念,刚好今天在某篇博客上看到对于...

osc_tjnx25e9
34分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部