preface
Recently, it was difficult to draw an email template using table layout, and it was compatible with various email manufacturers. Finally, I found an email template to deal with it.
MJML
MJML is a markup language designed to reduce the pain of writing response e-mails. Its semantic syntax makes it straightforward, and its rich library of standard components speeds up your development time and lightens your email code base. MJML’s open source engine generates high-quality responsive HTML that conforms to best practices.
Environment set up
Create a folder demo -> Go to the demo directory
Initialize the project
npm init -y
Copy the codeInstall MJML package
npm install mjml
Copy the codeCreate the demo.mjml file
Page to write
Vscode and webstorm have preview plugins, just search MJML. It is recommended to write online in the official website, and then copy to the code to save.
IO /try-it-live
Of course you can also use visual interface to edit: grapesjs.com/demo-mjml.h…
This is a reply email
Like a normal HTML template, we can divide this template into different parts to fit the grid. The body of the E-mail message, with the MJ-body tag, contains the entire content of the document:
<mjml>
<mj-body>
to do..
</mj-body>
</mjml>
Copy the codeFrom here, you can first define your partition:
<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>
Copy the codeIn any part, there should be columns (even if you only need one), and columns are what makes MJML responsive.
<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>
Copy the codeAt this point we have a template for a responsive layout.
compile
mjml demo.mjml -o demo.html
Copy the code
After compiling, you can see our generated HTML. Open your browser to preview.
Send test email
The nodemailer package is used to send mail. Nodemailer website: Nodemailer
npm install nodemailer fs path
Copy the code// send.js
var nodemailer = require('nodemailer');
var fs = require('fs')
var path = require('path')
var transporter = nodemailer.createTransport({
service: 'qq'.auth: {
user: '[email protected]'.// Your account number
pass: 'xxxxxxxx' // Your QQ authorization code}});var mailOptions = {
from: '"nick" <[email protected]>'./ / your account name | your account
to: '[email protected],[email protected],'.// The receiver can send multiple messages at the same time, separated by commas
subject: 'MJML'./ / title
html: fs.createReadStream(path.resolve(__dirname,'demo.html')) // Specify the path to send the file
};
transporter.sendMail(mailOptions, function (err, info) {
if (err) {
console.log(err);
return;
}
console.log('Sent successfully');
});
Copy the codeQq authorization code access: open QQ mailbox, find the Settings, open the configuration, you can get QQ authorization code.
Run the command
node send.js
Copy the codeSo far the email has been sent to your mailbox.
Automatic compilation
The subsequent emails are written more and more, the file target is many, do not want to manually compile into HTML, so write a script to automatically compile and output HTML files.
Added The SRC directory added build.js
// build.js
const fs = require('fs')
const path = require('path');
const child_process = require('child_process');
/** * SRC file * dist file */
copyDir('./src/*'.'./dist')
// Copy files -> compile files
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){
// For 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() }); }}}// Compile the file
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{
// Get the current file name
let fileName = file.name.split('. ') [0]
// Specific directory
process.chdir(src);
// For Windows
if(process.platform === 'win32') {// Compile the MJML file
const compile = child_process.exec(`mjml ${fileName}.mjml -o ${fileName}.html`)
compile.on('close'.(code) = > {
console.log('Compiled successfully :'.`${fileName}.mjml`)
let filePath = path.join(__dirname,`${src}/${fileName}.mjml`)
child_process.exec(`del ${filePath}`)}); }else{
// Compile the MJML file
const compile = child_process.spawn(`mjml`[`${fileName}.mjml`.`-o`.`${fileName}.html`] and {cwd: path.resolve(__dirname, src)})
compile.on('close'.code= > {
// Delete the MJML file
child_process.spawn(`rm`[`${fileName}.mjml`] and {cwd: path.resolve(__dirname, src)})
console.log('Compiled successfully :'.`${fileName}.mjml`)})}// Restore the directoryprocess.chdir(startPath); }})})}Copy the codeRun the command
node build.js
Copy the codeThe HTML structure is automatically compiled to produce the same structure as the SRC directory.
conclusion
MJML has been tested with moderate style deviation in several mail vendors and is worth using. If this article is helpful to you, please help me to like the favorites, thank you.
reference
HTML Email preparation guide [Ruan Yifeng] : address
Github Demo address: Github