概述

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

介绍

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

安装

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

  • 方法一 npm

  1. npm install -g mjml

代码部分

命令行操作

  • 编译文件

  1. $> mjml -r input.mjml

  • 编译文件并输出到output.html

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

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

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

自定义组件

  1. $> mjml --init-component <name of your component>
  2. # 组件不包含任何文本
  3. # If your component cannot contain anything else than text:
  4. $> mjml --init-component <name of you component> -e
  5. # 没有东西 将被mjml引擎解析
  6. # 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

  1. <mj-body>
  2.   <!-- You email goes here -->
  3. </mj-body>

mj-section

  1. <mj-body>
  2.   <mj-section full-width="full-width" background-color="red">
  4.     <!-- Your columns go here -->
  6.   </mj-section>
  7. </mj-body>

mj-column

  1. <mj-section>
  3.   <mj-column>
  4.     <!-- You content -->
  5.   </mj-column>
  7.   <mj-column>
  8.     <!-- Your content -->
  9.   </mj-column>
  11. </mj-section>

mj-text

  1. <mj-section>
  2.   <mj-column>
  4.     <mj-text>
  5.       <h1>Hey Title!</h1>
  6.     </mj-text>
  8.   </mj-column>
  9. </mj-section>
  11. <mj-section>
  12.   <mj-column>
  14.     <mj-text>
  15.       Hey There!
  16.     </mj-text>
  18.   </mj-column>
  19. </mj-section>

mj-image

  1. <mj-body>
  2. <mj-section>
  3.   <mj-column>
  5.     <mj-image width="300" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></mj-image>
  7.   </mj-column>
  8. </mj-section>
  9. </mj-body>

mj-list

  1. <mj-section>
  2.   <mj-column>
  4.     <mj-text>What can I do today?</mj-text>
  6.     <mj-list>
  7.       <li>Go to the store</li>
  8.       <li>sleep</li>
  9.       <li>eat</li>
  10.       <li>sleep again</li>
  11.     </mj-list>
  13.   </mj-column>
  14. </mj-section>

mj-button

mj-section

  1.  <mj-column>
  2.     <mj-button font-family="Helvetica" background-color="#F45E43" color="white">
  3.       Don't click me!
  4.     </mj-button>
  5.   </mj-column>

mj-social

  1.   <mj-column>
  2.     <mj-social
  3.       mode="vertical"
  4.       display="google facebook"
  5.       google-icon-color="#424242"
  6.       facebook-icon-color="#424242"
  7.       facebook-href="my facebook page"
  8.       google-href="my google+ page"/>
  9.   </mj-column>

mj-table

  1. <mj-body>
  2.   <mj-section>
  3.     <mj-column width="100%">
  5.       <mj-table>
  6.         <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
  7.           <th style="padding: 0 15px 0 0;">Year</th>
  8.           <th style="padding: 0 15px;">Language</th>
  9.           <th style="padding: 0 0 0 15px;">Inspired from</th>
  10.         </tr>
  11.         <tr>
  12.           <td style="padding: 0 15px 0 0;">1995</td>
  13.           <td style="padding: 0 15px;">PHP</td>
  14.           <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
  15.         </tr>
  16.         <tr>
  17.           <td style="padding: 0 15px 0 0;">1995</td>
  18.           <td style="padding: 0 15px;">JavaScript</td>
  19.           <td style="padding: 0 0 0 15px;">Scheme, Self</td>
  20.         </tr>
  21.       </mj-table>
  23.     </mj-column>
  24.   </mj-section>
  25. </mj-body>

mj-invoice

  1. <mj-body>
  2.   <mj-section>
  3.     <mj-column width="100%">
  5.       <mj-invoice format="0,00.00€" intl="name:Product Name">
  6.         <mj-invoice-item name="TV" price="549€" quantity="1" />
  7.         <mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />
  8.       </mj-invoice>
  10.     </mj-column>
  11.   </mj-section>
  12. </mj-body>

MJ-INVOICE-ITEM

Display a row in an mj-invoice component

mj-location

  1. <mj-body>
  2.   <mj-section>
  3.     <mj-column width="50%">
  5.       <mj-location address="37 bis, rue du Sentier – 75002 Paris" />
  7.     </mj-column>
  8.   </mj-section>
  9. </mj-body>

实例

  1. <mj-body>
  2.     <mj-section background-color="#ff5a5f" padding="0">
  3.         <mj-column>
  4.             <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>
  5.         </mj-column>
  6.     </mj-section>
  7.     <mj-section padding="0">
  8.         <mj-column>
  9.             <mj-text padding-top="20" padding-bottom="0">Hi,<strong>某某某</strong> 您好!</mj-text>
  10.             <mj-text padding-top="10" padding-bottom="0">这是给您发送的出票成功的通知邮件。</mj-text>
  11.             <mj-text padding-top="0" padding-bottom="0">恭喜您预定的<strong>某某某</strong>到<strong>某某某</strong>，<strong>某某某</strong>出发的单程航班已成功出票。</mj-text>
  12.             <mj-text padding-top="10" padding-bottom="0">电子行程单将稍后发送，届时可凭借打印下来的电子行程单、有效证件在机场值机柜台直接换去登机牌，之后通过安检，顺利登机。异乡好居温馨提示您，国际机票至少提前3小时前往机场办理登机手续。</mj-text>
  13.         </mj-column>
  14.     </mj-section>
  15.     <mj-section padding="0">
  16.         <mj-column>
  17.             <mj-text color="#000" padding-top="15" padding-bottom="0">航班详情</mj-text>
  18.         </mj-column>
  19.     </mj-section>
  20.     <mj-section padding="0">
  21.         <mj-column>
  22.             <mj-table>
  23.                 <tbody>
  24.                     <tr style="border:1px solid #79cdce;padding:15px 0;background:#f3fcfa;">
  25.                         <th style="color:#79cdce;text-align:center;">日期</th>
  26.                         <th style="color:#79cdce;text-align:center;">航线</th>
  27.                         <th style="color:#79cdce;text-align:center;">航班号</th>
  28.                         <th style="color:#79cdce;text-align:center;">订单号</th>
  29.                     </tr>
  30.                     <tr>
  31.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  32.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  33.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  34.                         <td style="border:1px solid #79cdce;text-align:center;"  rowspan="2">1995</td>
  35.                         <tr>
  36.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  37.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  38.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  39.                     </tr>
  40.                     </tr>
  41.                     <tr>
  42.                         <td style="padding: 0 0 0 100px;border:1px solid #79cdce;position:relative;" colspan="4">
  43.                         <strong style="position:absolute;top:0px;left:20px;padding-top:15px;color:#79cdce;">
  44.                         <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>
  45.                         中转提示
  46.                         </strong>
  47.                         <p style="margin-top: 10px;">1.中转停留时间过长，请合理安排行程。</p>
  48.                         <p style="margin-top: -12px;">2.需在中转城市换机场转机，请合理安排您的时间和行程。</p>
  49.                         <p style="margin-top: -12px;">3.此行程需要韩国过境签证，您可向当地使馆提前确认签证信息后再购票。</p>
  50.                         </td>
  51.                     </tr>
  52.                 </tbody>
  53.             </mj-table>
  54.         </mj-column>
  55.     </mj-section>
  56.     <mj-section padding="0">
  57.         <mj-column>
  58.             <mj-column  padding="0">
  59.                 <mj-text color="#000" padding-top="0" padding-bottom="0">乘客信息</mj-text>
  60.             </mj-column>
  61.         </mj-column>
  62.     </mj-section>
  63.     <mj-section  padding="0">
  64.         <mj-column>
  65.             <mj-table>
  66.                 <tbody>
  67.                     <tr style="border:1px solid #79cdce;padding:15px 0;background:#f3fcfa;">
  68.                         <th style="color:#79cdce;text-align:center;">姓名</th>
  69.                         <th style="color:#79cdce;text-align:center;">生日</th>
  70.                         <th style="color:#79cdce;text-align:center;">国籍</th>
  71.                         <th style="color:#79cdce;text-align:center;">证件号</th>
  72.                         <th style="color:#79cdce;text-align:center;">证件有效期</th>
  73.                         <th style="color:#79cdce;text-align:center;">证件签发地</th>
  74.                         <th style="color:#79cdce;text-align:center;">票号</th>
  75.                     </tr>
  76.                     <tr>
  77.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  78.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  79.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  80.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  81.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  82.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  83.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  84.                     </tr>
  85.                 </tbody>
  86.             </mj-table>
  87.         </mj-column>
  88.     </mj-section>
  89.     <mj-section  padding="0">
  90.         <mj-column>
  91.             <mj-text color="#000" padding-top="0" padding-bottom="0">联系人信息</mj-text>
  92.         </mj-column>
  93.     </mj-section>
  94.     <mj-section  padding="0">
  95.         <mj-column>
  96.             <mj-table>
  97.                 <tbody>
  98.                     <tr style="border:1px solid #79cdce;padding:15px 0;background:#f3fcfa;">
  99.                         <th style="color:#79cdce;text-align:center;">姓名</th>
  100.                         <th style="color:#79cdce;text-align:center;">生日</th>
  101.                         <th style="color:#79cdce;text-align:center;">国籍</th>
  102.                     </tr>
  103.                     <tr>
  104.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  105.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  106.                         <td style="border:1px solid #79cdce;text-align:center;">1995</td>
  107.                     </tr>
  108.                 </tbody>
  109.             </mj-table>
  110.         </mj-column>
  111.     </mj-section>
  112.     <mj-section  padding="0">
  113.         <mj-column>
  114.             <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>
  115.                 退改签规则及乘机提示</mj-text>
  116.             <mj-text padding-top="0" padding-bottom="0">1.退票规则以航空公司规定为标准，如需退改请拨打电话400-991-5791。</mj-text>
  117.             <mj-text padding-top="0" padding-bottom="0">2.改签规则以航空公司规定为标准，如需退改请拨打电话400-991-5791。</mj-text>
  118.             <mj-text padding-top="0" padding-bottom="0">3.航司行李限制： </mj-text>
  119.           <mj-text padding-top="0" padding-bottom="0" padding-left="50">美国航空： </mj-text>
  120.             <mj-text padding-top="0" padding-bottom="0" padding-left="50">1件x长宽高三边和115cm（20寸以内登机箱），7kg左右，</mj-text>
  121.             <mj-text padding-top="0" padding-bottom="0" padding-left="50">2件x长宽高三边和158cm（28寸以内登机箱），23kg左右。</mj-text>
  122.           <mj-text padding-top="0" padding-bottom="0" padding-left="50">加拿大航空： </mj-text>
  123.           <mj-text padding-top="0" padding-bottom="0" padding-left="50">1件x长宽高三边和115cm（20寸以内登机箱），7kg左右，</mj-text>
  124.             <mj-text padding-top="0" padding-bottom="0" padding-left="50">2件x长宽高三边和158cm（28寸以内登机箱），23kg左右。</mj-text>
  125.             <mj-text padding-top="0" padding-bottom="20">4.支付成功后24小时内出票，仅提供电子行程单。</mj-text>
  126.         </mj-column>
  127.     </mj-section>
  128.     <mj-section  padding="0">
  129.         <mj-column>
  130.             <mj-text padding-top="0" padding-bottom="0">Thanks,</mj-text>
  131.             <mj-text padding-top="0" padding-bottom="10">The Team</mj-text>
  132.         </mj-column>
  133.         <mj-column>
  134.             <mj-text padding-top="0" padding-bottom="0">我是系统自动发送的邮件,</mj-text>
  135.             <mj-text padding-top="0" padding-bottom="10">请不要直接回复哦</mj-text>
  136.         </mj-column>
  137.     </mj-section>
  138.     <mj-section background-color="#f7f7f7" padding="0">
  139.         <mj-column>
  140.             <mj-text padding-top="15" padding-bottom="0">邮件显示有问题? <a href="" style="color: #ff5a5f;">查看网页版</a>或把添加到联系人</mj-text>
  141.             <mj-text padding-top="0" padding-bottom="0">2016  All rights reserved  </mj-text>
  142.             <mj-text padding-top="0" padding-bottom="0">天津市</mj-text>
  143.         </mj-column>
  144.     </mj-section>
  145. </mj-body>

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

  1. Ink – 帮助你快速创建响应式邮件（Email）的框架

    Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端.这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件.曾经需要你兼顾各种邮件客户端的日子一去不复返了,I ...

  2. SpaceBase – 基于 Sass 的响应式 CSS 框架

    SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...

  3. 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新！

    相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...

  4. 16个最佳响应式HTML5框架分享

    HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...

  5. 响应式布局框架 Pure-CSS 5.0 示例中文版-上

    0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN ...

  6. kube框架结构-一个小型响应式CSS框架

    当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是你最好的选择.一个独立的CSS文件,帮助你更简单的创建响应式的的布局设计. Kube Framework包括网格.按钮. ...

  7. elf，基于flexbox的响应式CSS框架

    官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍 取名为"精灵"的elf,是一个 ...

  8. IOS响应式编程框架ReactiveCocoa(RAC)使用示例

    ReactiveCocoa是响应式编程(FRP)在iOS中的一个实现框架,它的开源地址为:https://github.com/ReactiveCocoa/ReactiveCocoa# :在网上看了几 ...

  9. 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

    近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

随机推荐

  1. 用RecyclerView实现根据位置不同显示不同界面

    在原来的基础上将LinearAdapter.java进行修改: 1 public class LinearAdapter extends RecyclerView.Adapter<Recycle ...

  2. SQL：查询时给表起别名

    Q 有两个表student.score,查询前一个表的id.name列,后一个表的total列,查询结果通过两个表的id连接起来 要求 使用别名st和sc替换表名进行查询 A SELECT st.id ...

  3. JZ-042-和为 S 的两个数字

    和为 S 的两个数字 题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 返回值描述: 对应每个测试案例,输出两 ...

  4. java中的异常(Exception)

    基本概念 将程序执行中发生的不正常的情况称为"异常".开发中的语法错误和逻辑错误不是异常 执行过程中的异常事件可分为两大类 错误(Error):Java虚拟机无法解决的严重问题.例 ...

  5. 微信小程序简易富文本

  6. 从零开始，开发一个 Web Office 套件（9）：拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  7. LGP3126题解

    这道题还有点意思. 路径要求是一个回文串,回文串立马枚举中点.中点只可能在对角线上. 枚举对角线上的一个点,然后两边的路径必须完全相同. 既然路径上的字符必须完全相同,那么每个前缀也必须完全相同. 考 ...

  8. Spring IOC---Bug处理

    1. org.junit.platform.commons.JUnitException: TestEngine with ID 'junit jupiter' failed to discover ...

  9. SQL注入之PHP+Mysql

    PHP+Mysql(GET方法+数值型+有错误回显)的注入方法 目标系统:PHP+MYSQL(GET方法+数值型+有错误信息) 环境说明: 后台地址:http://ip/cms/admin/login ...

  10. WebGL 的 Hello World

    本文整理自 div 侠于 凹凸 2022 年技术分享,简单介绍了 WebGL 画一个基础图形的流程,希望你了解之后,在使用 3d 渲染库的时候可以少点迷糊. 四种常用的页面绘图工具 关于h5页面的图形 ...