mjml 支持nodejs 的集成，以下是一个简单的使用
使用typescript
项目准备
- 项目结构
├── app.ts
├── index.mjml
├── package.json
├── tsconfig.json
└── yarn.lock
- 代码说明
app.ts
import mjml2html from "mjml"
import fs from "fs"
import path from "path"
fs.readFile(path.normalize('./index.mjml'), 'utf8', (err, data) => {
if (err) throw err
const result = mjml2html(data, {
validationLevel: "soft",
minify: true
})
fs.writeFileSync(path.normalize('./index.html'), result.html)
})
- package.json
{
"name": "first",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"mjml": "^4.5.1"
},
"scripts": {
"out": "mjml index.mjml -o index.html",
"app":"tsc && node app.js > index.html"
},
"devDependencies": {
"@types/mjml": "^4.0.2",
"@types/node": "^13.1.1",
"typescript": "^3.7.4"
}
}
- 模版
<mjml version="3.3.3">
<mj-body background-color="#F4F4F4" color="#55575d" font-family="Arial, sans-serif">
<mj-section background-color="#C1272D" background-repeat="repeat" padding="20px 0" text-align="center" vertical-align="top">
<mj-column>
<mj-image align="center" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1h3k4.png" width="128px"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" background-repeat="repeat" padding="20px 0" text-align="center" vertical-align="top">
<mj-column>
<mj-image align="center" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1h3s5.gif" width="600px"></mj-image>
<mj-image align="center" alt="Happy New Year!" container-background-color="#ffffff" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1hlvp.png" width="399px"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" background-repeat="repeat" background-size="auto" padding="20px 0px 20px 0px" text-align="center" vertical-align="top">
<mj-column>
<mj-text align="center" color="#55575d" font-family="Arial, sans-serif" font-size="14px" line-height="28px" padding="0px 25px 0px 25px">New dreams, new hopes, new experiences and new joys, we wish you all the best for this New Year to come in 2018!</mj-text>
<mj-image align="center" alt="Best wishes from all the Clothes Team!" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1hlv8.png" width="142px"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#C1272D" background-repeat="repeat" padding="20px 0" text-align="center" vertical-align="top">
<mj-column>
<mj-text align="center" color="#ffffff" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding="10px 25px">Simply created on <a style="color:#ffffff" href="http://www.mailjet.com"><b>Mailjet Passport</b></a></mj-text>
</mj-column>
</mj-section>
<mj-section background-repeat="repeat" background-size="auto" padding="20px 0px 20px 0px" text-align="center" vertical-align="top">
<mj-column>
<mj-text align="center" color="#55575d" font-family="Arial, sans-serif" font-size="11px" line-height="22px" padding="0px 20px">[[DELIVERY_INFO]]</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
运行&&效果
- 运行
yarn app
- 效果
说明
官方也提供了一个基于api 的渲染接口，实际上实现起来很简单，基于nodejs pacakge 我们也可以很快开发类似的功能