EDM响应式邮件框架：MJML

概述

新课题研究：响应式邮件框架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 
# 组件不包含任何文本
# If your component cannot contain anything else than text:
$> mjml --init-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-section

mj-column

mj-text

  

    
      
Hey Title!
    

  



  

    
      Hey There!
    

  

mj-image

mj-list

  

    What can I do today?

    
      
Go to the store
      
sleep
      
eat
      
sleep again
    

  

mj-button

mj-section

 
    
      Don't click me!
    
  

mj-social

mj-table

  
    

      
        
          Year
          Language
          Inspired from
        
        
          1995
          PHP
          C, Shell Unix
        
        
          1995
          JavaScript
          Scheme, Self
        
      

    
  

mj-invoice

MJ-INVOICE-ITEM

Display a row in an mj-invoice component

mj-location

实例

    
        
            
        
    
    
        
            Hi,某某某 您好!
            这是给您发送的出票成功的通知邮件。
            恭喜您预定的某某某到某某某，某某某出发的单程航班已成功出票。
            电子行程单将稍后发送，届时可凭借打印下来的电子行程单、有效证件在机场值机柜台直接换去登机牌，之后通过安检，顺利登机。异乡好居温馨提示您，国际机票至少提前3小时前往机场办理登机手续。
        
    
    
        
            航班详情
        
    
    
        
            
                
                    
                        日期
                        航线
                        航班号
                        订单号
                    
                    
                        1995
                        1995
                        1995
                        1995
                        
                        1995
                        1995
                        1995
                    
                    
                    
                        
                        
                        !
                        中转提示
                        
                        
1.中转停留时间过长，请合理安排行程。
                        
2.需在中转城市换机场转机，请合理安排您的时间和行程。
                        
3.此行程需要韩国过境签证，您可向当地使馆提前确认签证信息后再购票。
                        
                    
                
            
        
    
    
        
            
                乘客信息
            
        
    
    
        
            
                
                    
                        姓名
                        生日
                        国籍
                        证件号
                        证件有效期
                        证件签发地
                        票号
                    
                    
                        1995
                        1995
                        1995
                        1995
                        1995
                        1995
                        1995
                    
                
            
        
    
    
        
            联系人信息
        
    
    
        
            
                
                    
                        姓名
                        生日
                        国籍
                    
                    
                        1995
                        1995
                        1995
                    
                
            
        
    
    
        
            !
                退改签规则及乘机提示
            1.退票规则以航空公司规定为标准，如需退改请拨打电话400-991-5791。
            2.改签规则以航空公司规定为标准，如需退改请拨打电话400-991-5791。
            3.航司行李限制： 
          美国航空： 
            1件x长宽高三边和115cm（20寸以内登机箱），7kg左右，
            2件x长宽高三边和158cm（28寸以内登机箱），23kg左右。
          加拿大航空： 
          1件x长宽高三边和115cm（20寸以内登机箱），7kg左右，
            2件x长宽高三边和158cm（28寸以内登机箱），23kg左右。
            4.支付成功后24小时内出票，仅提供电子行程单。
        
    
    
        
            Thanks,
            The Team
        
        
            我是系统自动发送的邮件,
            请不要直接回复哦
        
    
    
        
            邮件显示有问题? 查看网页版或把添加到联系人
            ©2016  All rights reserved  
            天津市