概述

新课题研究：响应式邮件框架MJML（MJML官网：https://mjml.io/）
姐妹篇： EDM响应式邮件框架：Formerly Ink

介绍

MJML是一种标记语言，设计用于轻松实现一个响应式邮件。它的语义语法使得它容易和简单，而其丰富的标准组件库可以减少你开发时间，并减轻您的邮件代码库。MJML是一个开源的引擎能够将MJML转换成响应式布局的HTML.

安装

毕竟是js编写，需要node环境（4.2以上版本）

方法一 npm

npm install -g mjml

方法二点击下载[https://github.com/mjmlio/mjml/releases]

代码部分

命令行操作

编译文件

$> mjml -r input.mjml

编译文件并输出到output.html

$> mjml -r input.mjml -o output.html

编译文件并实时更新至output.html

$> mjml -w input.mjml -o output.html

自定义组件

$> mjml --init-component <name of your component>

# 组件不包含任何文本

# If your component cannot contain anything else than text:

$> mjml --init-component <name of you component> -e

# 没有东西 将被mjml引擎解析

# It means nothing inside it will be parsed by the mjml engine.

It will create a basic component template in a .js file. Follow the instructions provided in the file and read more about custom components in the documentation

在线编辑

[https://mjml.io/try-it-live]

标准组件

mj-body

<mj-body>

  <!-- You email goes here -->

</mj-body>

mj-section

<mj-body>

  <mj-section full-width="full-width" background-color="red">

    <!-- Your columns go here -->

  </mj-section>

</mj-body>

mj-column

<mj-section>

  <mj-column>

    <!-- You content -->

  </mj-column>

  <mj-column>

    <!-- Your content -->

  </mj-column>

</mj-section>

mj-text

<mj-section>

  <mj-column>

    <mj-text>

      <h1>Hey Title!</h1>

    </mj-text>

  </mj-column>

</mj-section>

<mj-section>

  <mj-column>

    <mj-text>

      Hey There!

    </mj-text>

  </mj-column>

</mj-section>

mj-image

<mj-body>

<mj-section>

  <mj-column>

    <mj-image width="300" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></mj-image>

  </mj-column>

</mj-section>

</mj-body>

mj-list

<mj-section>

  <mj-column>

    <mj-text>What can I do today?</mj-text>

    <mj-list>

      <li>Go to the store</li>

      <li>sleep</li>

      <li>eat</li>

      <li>sleep again</li>

    </mj-list>

  </mj-column>

</mj-section>

mj-button

mj-section

 <mj-column>

    <mj-button font-family="Helvetica" background-color="#F45E43" color="white">

      Don't click me!

    </mj-button>

  </mj-column>

mj-social

  <mj-column>

    <mj-social

      mode="vertical"

      display="google facebook"

      google-icon-color="#424242"

      facebook-icon-color="#424242"

      facebook-href="my facebook page"

      google-href="my google+ page"/>

  </mj-column>

mj-table

<mj-body>

  <mj-section>

    <mj-column width="100%">

      <mj-table>

        <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">

          <th style="padding: 0 15px 0 0;">Year</th>

          <th style="padding: 0 15px;">Language</th>

          <th style="padding: 0 0 0 15px;">Inspired from</th>

        </tr>

        <tr>

          <td style="padding: 0 15px 0 0;">1995</td>

          <td style="padding: 0 15px;">PHP</td>

          <td style="padding: 0 0 0 15px;">C, Shell Unix</td>

        </tr>

        <tr>

          <td style="padding: 0 15px 0 0;">1995</td>

          <td style="padding: 0 15px;">JavaScript</td>

          <td style="padding: 0 0 0 15px;">Scheme, Self</td>

        </tr>

      </mj-table>

    </mj-column>

  </mj-section>

</mj-body>

mj-invoice

<mj-body>

  <mj-section>

    <mj-column width="100%">

      <mj-invoice format="0,00.00€" intl="name:Product Name">

        <mj-invoice-item name="TV" price="549€" quantity="1" />

        <mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />

      </mj-invoice>

    </mj-column>

  </mj-section>

</mj-body>

MJ-INVOICE-ITEM

Display a row in an mj-invoice component

mj-location

<mj-body>

  <mj-section>

    <mj-column width="50%">

      <mj-location address="37 bis, rue du Sentier – 75002 Paris" />

    </mj-column>

  </mj-section>

</mj-body>

实例

<mj-body>

    <mj-section background-color="#ff5a5f" padding="0">

        <mj-column>

            <mj-image src="logo.png" alt="logo" align="left" border="none" width="160" height="46" vertical-align="middle" background-color="#ffffff" padding-left="40" padding-right="0" padding-bottom="20" padding-top="20"></mj-image>

        </mj-column>

    </mj-section>

    <mj-section padding="0">

        <mj-column>

            <mj-text padding-top="20" padding-bottom="0">Hi,<strong>某某某</strong> 您好!</mj-text>

            <mj-text padding-top="10" padding-bottom="0">这是给您发送的出票成功的通知邮件。</mj-text>

            <mj-text padding-top="0" padding-bottom="0">恭喜您预定的<strong>某某某</strong>到<strong>某某某</strong>，<strong>某某某</strong>出发的单程航班已成功出票。</mj-text>

            <mj-text padding-top="10" padding-bottom="0">电子行程单将稍后发送，届时可凭借打印下来的电子行程单、有效证件在机场值机柜台直接换去登机牌，之后通过安检，顺利登机。异乡好居温馨提示您，国际机票至少提前3小时前往机场办理登机手续。</mj-text>

        </mj-column>

    </mj-section>

    <mj-section padding="0">

        <mj-column>

            <mj-text color="#000" padding-top="15" padding-bottom="0">航班详情</mj-text>

        </mj-column>

    </mj-section>

    <mj-section padding="0">

        <mj-column>

            <mj-table>

                <tbody>

                    <tr style="border:1px solid #79cdce;padding:15px 0;background:#f3fcfa;">

                        <th style="color:#79cdce;text-align:center;">日期</th>

                        <th style="color:#79cdce;text-align:center;">航线</th>

                        <th style="color:#79cdce;text-align:center;">航班号</th>

                        <th style="color:#79cdce;text-align:center;">订单号</th>

                    </tr>

                    <tr>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;"  rowspan="2">1995</td>

                        <tr>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                    </tr>

                    </tr>

                    <tr>

                        <td style="padding: 0 0 0 100px;border:1px solid #79cdce;position:relative;" colspan="4">

                        <strong style="position:absolute;top:0px;left:20px;padding-top:15px;color:#79cdce;">

                        <span style="display:block;font-size:20px;line-height:1;padding:4px 0px;width:30px;margin:0 auto 10px;font-style:normal;background:#79cdce;color:#fff;text-align:center;border-radius:50%;">!</span>

                        中转提示

                        </strong>

                        <p style="margin-top: 10px;">1.中转停留时间过长，请合理安排行程。</p>

                        <p style="margin-top: -12px;">2.需在中转城市换机场转机，请合理安排您的时间和行程。</p>

                        <p style="margin-top: -12px;">3.此行程需要韩国过境签证，您可向当地使馆提前确认签证信息后再购票。</p>

                        </td>

                    </tr>

                </tbody>

            </mj-table>

        </mj-column>

    </mj-section>

    <mj-section padding="0">

        <mj-column>

            <mj-column  padding="0">

                <mj-text color="#000" padding-top="0" padding-bottom="0">乘客信息</mj-text>

            </mj-column>

        </mj-column>

    </mj-section>

    <mj-section  padding="0">

        <mj-column>

            <mj-table>

                <tbody>

                    <tr style="border:1px solid #79cdce;padding:15px 0;background:#f3fcfa;">

                        <th style="color:#79cdce;text-align:center;">姓名</th>

                        <th style="color:#79cdce;text-align:center;">生日</th>

                        <th style="color:#79cdce;text-align:center;">国籍</th>

                        <th style="color:#79cdce;text-align:center;">证件号</th>

                        <th style="color:#79cdce;text-align:center;">证件有效期</th>

                        <th style="color:#79cdce;text-align:center;">证件签发地</th>

                        <th style="color:#79cdce;text-align:center;">票号</th>

                    </tr>

                    <tr>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                    </tr>

                </tbody>

            </mj-table>

        </mj-column>

    </mj-section>

    <mj-section  padding="0">

        <mj-column>

            <mj-text color="#000" padding-top="0" padding-bottom="0">联系人信息</mj-text>

        </mj-column>

    </mj-section>

    <mj-section  padding="0">

        <mj-column>

            <mj-table>

                <tbody>

                    <tr style="border:1px solid #79cdce;padding:15px 0;background:#f3fcfa;">

                        <th style="color:#79cdce;text-align:center;">姓名</th>

                        <th style="color:#79cdce;text-align:center;">生日</th>

                        <th style="color:#79cdce;text-align:center;">国籍</th>

                    </tr>

                    <tr>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                        <td style="border:1px solid #79cdce;text-align:center;">1995</td>

                    </tr>

                </tbody>

            </mj-table>

        </mj-column>

    </mj-section>

    <mj-section  padding="0">

        <mj-column>

            <mj-text padding-top="10" padding-bottom="0"><span style="display:inline-block;font-size:10px;line-height:1;padding:4px 0px;width:20px;margin:0 auto 10px;font-style:normal;background:#79cdce;color:#fff;text-align:center;border-radius:50%;">!</span>

                退改签规则及乘机提示</mj-text>

            <mj-text padding-top="0" padding-bottom="0">1.退票规则以航空公司规定为标准，如需退改请拨打电话400-991-5791。</mj-text>

            <mj-text padding-top="0" padding-bottom="0">2.改签规则以航空公司规定为标准，如需退改请拨打电话400-991-5791。</mj-text>

            <mj-text padding-top="0" padding-bottom="0">3.航司行李限制： </mj-text>

          <mj-text padding-top="0" padding-bottom="0" padding-left="50">美国航空： </mj-text>

            <mj-text padding-top="0" padding-bottom="0" padding-left="50">1件x长宽高三边和115cm（20寸以内登机箱），7kg左右，</mj-text>

            <mj-text padding-top="0" padding-bottom="0" padding-left="50">2件x长宽高三边和158cm（28寸以内登机箱），23kg左右。</mj-text>

          <mj-text padding-top="0" padding-bottom="0" padding-left="50">加拿大航空： </mj-text>

          <mj-text padding-top="0" padding-bottom="0" padding-left="50">1件x长宽高三边和115cm（20寸以内登机箱），7kg左右，</mj-text>

            <mj-text padding-top="0" padding-bottom="0" padding-left="50">2件x长宽高三边和158cm（28寸以内登机箱），23kg左右。</mj-text>

            <mj-text padding-top="0" padding-bottom="20">4.支付成功后24小时内出票，仅提供电子行程单。</mj-text>

        </mj-column>

    </mj-section>

    <mj-section  padding="0">

        <mj-column>

            <mj-text padding-top="0" padding-bottom="0">Thanks,</mj-text>

            <mj-text padding-top="0" padding-bottom="10">The Team</mj-text>

        </mj-column>

        <mj-column>

            <mj-text padding-top="0" padding-bottom="0">我是系统自动发送的邮件,</mj-text>

            <mj-text padding-top="0" padding-bottom="10">请不要直接回复哦</mj-text>

        </mj-column>

    </mj-section>

    <mj-section background-color="#f7f7f7" padding="0">

        <mj-column>

            <mj-text padding-top="15" padding-bottom="0">邮件显示有问题? <a href="" style="color: #ff5a5f;">查看网页版</a>或把添加到联系人</mj-text>

            <mj-text padding-top="0" padding-bottom="0">2016  All rights reserved  </mj-text>

            <mj-text padding-top="0" padding-bottom="0">天津市</mj-text>

        </mj-column>

    </mj-section>

</mj-body>

EDM响应式邮件框架：MJML的更多相关文章

Ink – 帮助你快速创建响应式邮件（Email）的框架
Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端.这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件.曾经需要你兼顾各种邮件客户端的日子一去不复返了,I ...
SpaceBase – 基于 Sass 的响应式 CSS 框架
SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...
一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新！
相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...
16个最佳响应式HTML5框架分享
HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...
响应式布局框架 Pure-CSS 5.0 示例中文版-上
0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN ...
kube框架结构-一个小型响应式CSS框架
当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是你最好的选择.一个独立的CSS文件,帮助你更简单的创建响应式的的布局设计. Kube Framework包括网格.按钮. ...
elf，基于flexbox的响应式CSS框架
官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍取名为"精灵"的elf,是一个 ...
IOS响应式编程框架ReactiveCocoa(RAC)使用示例
ReactiveCocoa是响应式编程(FRP)在iOS中的一个实现框架,它的开源地址为:https://github.com/ReactiveCocoa/ReactiveCocoa# :在网上看了几 ...
2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com
近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

随机推荐

kibana实现条件查询和修改
GET jyb_report_index_preprod/_search { "query": { "match": { "report_id&quo ...
哈工大计算机网络实验三 IPv4 分组收发实验&IPv4 分组转发实验
计算机网络实验代码与文件可见github:计算机网络实验整理实验名称 IPv4 分组收发实验&IPv4 分组转发实验实验目的: (注:实验报告模板中的各项内容仅供参考,可依照实际实验情况进 ...
Qt：QTextStream
0.说明 QTextStream提供了读写文本文件的接口. QTextStream可以操作QIODevice, QByteArray 和 QString,调用QTextStream的流操作可以方便的 ...
python post请求中Content-Typ为application/x-www-form-urlencoded; charset=UTF-8 解决方案
# -*- coding: utf-8 -*- import requests import json from urllib import parse import quotes def GtgLo ...
想了解MQ，读这篇就够了
一.简介 MQ全称为Message Queue-消息队列,是一种应用程序对应用程序的消息通信,一端只管往队列不断发布信息,另一端只管往队列中读取消息,发布者不需要关心读取消息的谁,读取消息者不需要关心 ...
pthon语法
1.条件语句 #找到a.b.c中最大的数,其中and是逻辑运算符"且"的意思 if a>b and a>c: print(a) elif b>a and b> ...
ArcMap操作随记（5）
1.[栅格转面]等工具的使用若栅格数据为浮点型,需使用[转为整型]工具,将栅格转为整型,再进行操作. 2.人口密度分布趋势图使用[核密度分析]工具,也可尝试插值 3.点要素做面 [点集转线][要素 ...
json知识点总结(二)--JSONObject详解
JSONObject只是一种数据结构,可以理解为JSON格式的数据结构(key-value 结构),可以使用put方法给json对象添加元素.JSONObject可以很方便的转换成字符串,也可以很方便 ...
小白都能看懂的 Spring 源码揭秘之Spring MVC
目录前言 Spring MVC 请求流程 Spring MVC 两大阶段初始化 HttpServletBean#init() FrameworkServlet#initServletBean Fr ...
为什么枚举单例在 Java 中更好?
枚举单例是使用一个实例在 Java 中实现单例模式的新方法.虽然Java中的单例模式存在很长时间,但枚举单例是相对较新的概念,在引入Enum作为关键字和功能之后,从Java5开始在实践中.本文与之前关 ...

EDM响应式邮件框架：MJML

概述

介绍

安装

代码部分

命令行操作

自定义组件

It will create a basic component template in a .js file. Follow the instructions provided in the file and read more about custom components in the documentation

在线编辑

标准组件

mj-body

mj-section

mj-column

mj-text

mj-image

mj-list

mj-button

mj-section

mj-social

mj-table

mj-invoice

MJ-INVOICE-ITEM

mj-location

实例

EDM响应式邮件框架：MJML的更多相关文章

随机推荐

热门专题