MJML郵件模版實戰

前言

最近畫個郵件模版使用table佈局一言難盡，還要兼容各類郵件廠商，最後找了一個郵件模版來處理。html

MJML

MJML是一種標記語言，旨在減小編寫響應電子郵件的痛苦。它的語義語法使它簡單明瞭，它豐富的標準組件庫加快了您的開發時間，並減輕了您的電子郵件代碼庫。MJML的開源引擎生成符合最佳實踐的高質量響應HTML。node

環境搭建

建立個文件夾demo -> 進入demo目錄git

初始化項目github

npm init -y
複製代碼

安裝mjml包web

npm install mjml
複製代碼

建立demo.mjml文件npm

頁面編寫

vscode 和 webstorm都有預覽插件，直接搜索MJML便可。建議仍是在官網在線編寫，而後在複製到代碼保存。windows

在線編寫地址: mjml.io/try-it-live瀏覽器

固然你也能夠用可視化界面來編輯：grapesjs.com/demo-mjml.h…markdown

這是一封回覆郵件webstorm

像普通的HTML模板同樣，咱們能夠將這個模板分紅不一樣的部分以適應網格。電子郵件正文，由mj-body標記包含文檔的所有內容：

<mjml>
  <mj-body>
    to do..
  </mj-body>
</mjml>
複製代碼

從這裏，您能夠首先定義您的分區：

<mjml>
  <mj-body>
    <mj-section>
      1
    </mj-section>
    <mj-section>
      2
    </mj-section>
    <mj-section>
      3
    </mj-section>
    <mj-section>
      4
    </mj-section>
  </mj-body>
</mjml>
複製代碼

在任何部分中，都應該有列（即便您只須要一列），列是使MJML響應的緣由。

<mjml>
  <mj-body>
     <!-- 1 -->
     <mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg" background-size="cover" background-repeat="no-repeat">
      <mj-column width="600px">
        <mj-text align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Subject</mj-text>
      </mj-column>
    </mj-section>
    <!-- 2 -->
    <mj-section>
      <mj-column >
        <mj-text color="#000" font-size="16px" font-family="Helvetica Neue">Lorem ipsum dolor sit amet,consectetur adipiscing elit.sit amet,consectetur adipiscing elit.sit amet,consectetur adipiscing elit.sit amet,consectetur adipiscing elit.sit amet,consectetur adipiscing elit.</mj-text>
      </mj-column>
    </mj-section>
    <!-- 3 -->
    <mj-section>
      <mj-column >
       <mj-divider padding-left="0px" padding-right="0px"></mj-divider>
      </mj-column>
    </mj-section>
    <!-- 4 -->
    <mj-section background-color="#ffffff" full-width="full-width">
      <mj-column vertical-align="top" width="33.33333333333333%">
        <mj-image src="http://191n.mj.am/img/191n/1t/hs.png" alt="" width="50px"></mj-image>
        <mj-text align="center" color="#9da3a3" font-size="11px" padding-bottom="30px"><span style="font-size: 14px; color: #e85034">Best audience</span><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</mj-text>
      </mj-column>
      <mj-column vertical-align="top" width="33.33333333333333%">
        <mj-image src="http://191n.mj.am/img/191n/1t/hm.png" alt="" width="50px"></mj-image>
        <mj-text align="center" color="#9da3a3" font-size="11px" padding-bottom="30px"><span style="font-size: 14px; color: #e85034">Higher rates</span><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</mj-text>
      </mj-column>
      <mj-column vertical-align="top" width="33.33333333333333%">
        <mj-image src="http://191n.mj.am/img/191n/1t/hl.png" alt="" width="50px"></mj-image>
        <mj-text align="center" color="#9da3a3" font-size="11px" padding-bottom="30px" padding-top="3px"><span style="font-size: 14px; color: #e85034">24/7 Support</span><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
複製代碼

至此咱們就獲得一個響應式佈局的模板。

編譯

mjml demo.mjml -o demo.html
複製代碼

編譯完成便可看到咱們生成的html，打開瀏覽器進行預覽。

發送測試郵件

這裏採用 nodemailer包，來發送郵件。官網地址: nodemailer.

npm install nodemailer fs path
複製代碼

// send.js

var nodemailer = require('nodemailer');
var fs = require('fs')
var path = require('path')
var transporter = nodemailer.createTransport({
    service: 'qq',
    auth: {
        user: '11111111@qq.com', // 你的帳號
        pass: 'xxxxxxxx' //你的qq受權碼
    }
});
var mailOptions = {
    from: '"nick" <11111111@qq.com>', // 你的帳號名 | 你的帳號
    to: '222222@qq.com,333333@qq.com,', // 接受者,能夠同時發送多個,以逗號隔開
    subject: 'MJML', // 標題
    html: fs.createReadStream(path.resolve(__dirname,'demo.html')) // 指定發送文件路徑
};

transporter.sendMail(mailOptions, function (err, info) {
    if (err) {
        console.log(err);
        return;
    }
    console.log('發送成功');
});

複製代碼

qq受權碼獲取:打開qq郵箱，找到設置，打開配置，你就能獲得qq受權碼。

運行命令

node send.js
複製代碼

至此郵件已經發送到你的郵箱。

自動編譯

後續郵件越寫越多，文件目標不少，不太想一個個手動編譯成html,因此寫個腳本自動編譯輸出html文件。

新增 src目錄新增 build.js

// build.js

const fs = require('fs')
const path = require('path');
const child_process = require('child_process');

/** * src 目錄下文件 * dist 打包的目標文件 */
copyDir('./src/*', './dist')


// 複製文件 -> 編譯文件
function copyDir(src, dist) {
    if (fs.existsSync(dist)) {
        copyFile(src, dist)
    }else{
        fs.mkdir(dist, function (err) {
            if (err) {
                console.log(err)
                return
            }
            copyFile(src, dist)
        })
    }
    function copyFile(src, dist){
        // 若是是windows
        if(process.platform === 'win32'){
            child_process.exec(`ROBOCOPY src ${dist} /E /MT:30`,function () {
                compile()
            });
        }else{
            child_process.exec(`cp -r ${src} ${dist}`,function () {
                compile()
            });
        }
    }
}
// 編譯文件
function compile( src = 'dist') {
    let startPath = process.cwd()
    fs.readdir(src,{withFileTypes:true},  function (err, files) {
        files.forEach(file=>{
            if(file.isDirectory()){
                let dir = `${src}/${file.name}`
                compile(dir)
            }else{
                // 獲取當前文件名稱
                let fileName = file.name.split('.')[0]
                // 具體目錄
                process.chdir(src);
                // 若是是windows
                if(process.platform === 'win32'){
                    // 編譯MJML文件
                    const compile = child_process.exec(`mjml ${fileName}.mjml -o ${fileName}.html`)
                    compile.on('close', (code) => {
                        console.log('編譯成功:',`${fileName}.mjml`)
                        let filePath = path.join(__dirname,`${src}/${fileName}.mjml`)
                        child_process.exec(`del ${filePath}`)
                    });
                }else{
                    // 編譯MJML文件
                    const compile = child_process.spawn(`mjml`, [`${fileName}.mjml`,`-o`,`${fileName}.html`], {cwd: path.resolve(__dirname, src)})
                    compile.on('close', code => {
                        // 刪除MJML文件
                        child_process.spawn(`rm`, [`${fileName}.mjml`], {cwd: path.resolve(__dirname, src)})
                        console.log('編譯成功:',`${fileName}.mjml`)
                    })
                }
                // 復原目錄
                process.chdir(startPath);
            }
        })
    })
}

複製代碼

運行命令

node build.js
複製代碼

會自動編譯生成和src目錄相同的html結構。

結語

MJML在幾個郵件廠商測試樣式誤差不大，值得使用。若是文章對你有幫助，請幫我點贊收藏，謝謝你們。

參考

HTML Email 編寫指南【阮一峯】：地址

github demo地址:github