文档章节

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

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

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

  • 得支持多种客户端
  • 支持响应式
  • 疼彻心扉的 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
博文 26
码字总数 13568
作品 0
长宁
项目经理
私信 提问
node.js使用Nodemailer发送邮件

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

流口水流
2017/12/02
0
0
小柒2012/spring-boot-mail

spring-boot-mail 邮件发送服务,文本,附件,模板,队列,多线程,定时任务实现多种功能!!! SpringBoot开发案例之整合mail发送服务 SpringBoot开发案例之整合mail队列篇 开发环境 JDK1.7...

小柒2012
2017/08/02
0
0
Thymeleaf教程 (一) 简介

Thymeleaf是什么? Thymeleaf是一个Java库。它是一个XML / XHTML / HTML5模板引擎,能够应用于转换模板文件,以显示您的应用程序产生的数据和文本。 它尤其适合于基于XHTML / HTML5的web服务应用...

wangxinxx
2016/12/13
665
0
4、SpringBoot------邮件发送(2)

开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/Springboot/tree/0d6194d6ea2d7f4e19791a3d3f3167f861f6453d 前言: 在上一篇博客中,我们写了简单邮件的发送和带附件的邮件...

零度微笑
2018/07/16
0
0
BootDo 1.2 发布,增加内容管理和博客管理

项目介绍 面向学习型的开源框架,简洁高效,减少过渡封装,展现技术本质 Springboot作为基础框架,使用mybatis作为持久层框架 使用官方推荐的thymeleaf做为模板引擎,shiro作为安全框架,主流...

lcg0124
2017/09/20
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

嵌入式应用选择合适的微控制器

准备所需硬件接口列表 使用微控制器的基本硬件框图,准备一份微控制器需要支持的所有外设接口的列表。微控制器中有两种常见的接口类型需要列出。第一种是通信接口,这些是外围设备,如USB,S...

linuxCool
13分钟前
2
0
Group by使用

概述 GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类似Excel里面的透视表。 GROUP BY必须得配合...

小橙子的曼曼
24分钟前
3
0
机械臂写中文

Make Me a Hanzi https://www.skishore.me/makemeahanzi/ 使用uArm Swift Pro机械臂写中文-毛笔字 https://github.com/makelove/Robot_Arm_Write_Chinese...

itfanr
35分钟前
4
0
OSChina 周三乱弹 —— 孤独到都和病毒发生了感情了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# 逃跑计划《一万次悲伤 (Live)》 《一万次悲伤 (Live)》- 逃跑计划 手机党少年们想听歌,请使劲儿戳(这里) 现在...

小小编辑
今天
1K
14
test

//// main.c// Test//// Created by 吕颖 on 2019/1/16.// Copyright © 2019年 carmen. All rights reserved.//#include <stdio.h>#include <stdlib.h>#include <t......

carmen-ly
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部