mjml nodejs 集成

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&nbsp;on&nbsp;<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 我们也可以很快开发类似的功能

参考资料

https://mjml.io/documentation/