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

發郵件算是系統開發的一個基本需求了，不過搞郵件模板實在是件噁心事，估計搞過的同仁都有體會。

• 得支持多種客戶端
• 支持響應式
• 疼徹心扉的 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 來編譯並做相應的替換操作。

基本就這樣了。

最後上一張效果圖：