mjml教程详解

2021-03-05 13:18:03

参考地址 mjml - 如何快速编写响应式电子邮件?

一、背景#


以前做项目碰到发邮件的需求,邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的,但是确是 HTML 子集程度的支持,所以存在必须通过 <table> 排版的恶心之处,还有很多兼容性的坑。本质上是各家邮件商的标准有差异吧。

具体可参考阮一峰的这篇:http://www.ruanyifeng.com/blog/2013/06/html_email.html

于是我在网上 google 了下,发现了 mjml 这个最 hot 的 响应式电子邮件框架

二、特点#


1、那 mjml 就是一个类似 bootstrap 在 HTML + CSS 的地位,他们都提供了一些更高级的语法(标签)【叫MJML】,磨平了各家客户端在解析和指定标准上的差异。

2、mjml 的新语法学起来也很快,不多,好理解,易上手,然后基于组件化,能很快的搭出来你想要的 Email 内容。

3、mjml更支持响应式布局,且是移动端优先

三、使用#


1、安装#

其实有 npm 包,我懒得安装,遂用的在线编辑器

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

支持在线自动保存,很好用。

2、DEMO#

(1) 地址#

https://mjml.io/try-it-live/ry_x-1IZH

(2) 代码#
Copy<mjml>
  <mj-head>
    <mj-title>Hello Register</mj-title>
    <mj-attributes>
      <!-- 1、定义 global 样式 -->
      <!-- 针对某个元素 -->
      <mj-text line-height="150%" />
      <!-- 针对所有元素 -->
      <mj-all font-family="Arial" />
      <!-- 2、定义 class 样式 -->
      <mj-class name="title" font-size="35px" align="center" />
    </mj-attributes>
    <!-- 3、定义 css 样式 -->
    <mj-style inline="inline">
      .sign div { padding-left : 5px !important; color:#8C8C8C !important; }    </mj-style>
  </mj-head>
  <mj-body>
    <mj-wrapper background-url="https://i.loli.net/2019/07/14/5d2b00fad302f18835.png" background-repeat="no-repeat" background-size="100% 100%" padding="30px">
      <mj-section>
        <mj-column>
          <!-- 4、定义 inline 样式 -->
          <mj-image width="100px" src="https://mjml.io/documentation/images/logo.png"></mj-image>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-text mj-class="title">Register Success!</mj-text>
          <mj-spacer height="10px" />
          <mj-text>Dear [username],</mj-text>
          <mj-text>Thank you for the registration, you are welcomed to be our first tier users. Please click the link to activate your account:</mj-text>
          <mj-button href="http://www.google.com"> Activate </mj-button>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column width="70%">
          <mj-social>
            <mj-social-element name="facebook" href="https://mjml.io/">
              Facebook            </mj-social-element>
            <mj-social-element name="google" href="https://mjml.io/">
              Google            </mj-social-element>
            <mj-social-element name="twitter" href="https://mjml.io/">
              Twitter            </mj-social-element>
          </mj-social>
        </mj-column>
        <mj-column width="30%">
          <mj-text css-class="sign">
            COPYRIGHT<br/> @2019          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body></mjml>
(3) 预览效果#

3、注意知识点#

(1) 一个最简的框架#
Copy<mjml>
  <mj-body>
  
    <mj-section>
      <mj-column>
        <!-- First column content -->
      </mj-column>
      <mj-column>
        <!-- Second column content -->
      </mj-column>
    </mj-section>
    
    <mj-section>  
     <mj-column> 
     		<!-- 即使只有一个 <mj-column>,也得在<mj-section>下 --> 
     </mj-column> 
    </mj-section>
    
  </mj-body></mjml>

包含关系:mjml > mj-body > mj-section > mj-column

mj-section 不能嵌套到 mj-section 中, mj-column 也不能嵌套到 mj-column 中。

(2) mj-group#

因为 mjml 是移动端优先,那么mj-group 允许您阻止 mj-column 在移动设备上堆叠。

(3) mj-spacer#

建议用 mj-spacer 代替 br 去换行

(4) mj-text#

原生的 html,例如 <b>qwe</b> 、<a href="#">click</a> ,建议放在 mj-text 里 ,否则不显示也不生效。

(5) mj-hero 和 mj-warpper 的区别#

mj-hero 只针对 mj-section下

而 mj-warpper 可以把多个 mj-section 包装在一起。实现跨 mj-section 共享边框或背景图像

坑:background-color 只能加到 mj-warpper 、mj-hero、 mj-section 等上面。

4、高级功能#

(1)除了有社区组件的提供,自己也可以创建组件

(2)支持 JSON 语法构建 Email。

(3)有丰富的插件系统,支持 VS、Atom、Sublime。


参考文献

官方文档:https://mjml.io/documentation/#sections


  • 2018-12-02 10:54:14

    HTTP长连接、短连接究竟是什么?

    HTTP的长连接和短连接本质上是TCP长连接和短连接。HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议。 IP协议主要解决网络路由和寻址问题,TCP协议主要解决如何在IP层之上可靠地传递数据包,使得网络上接收端收到发送端所发出的所有包,并且顺序与发送顺序一致。TCP协议是可靠的、面向连接的。

  • 2018-12-04 15:30:01

    如何在Mac OS X上安装 Ruby运行环境

    ​ 对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境。 此安装方法同样适用于产品环境!

  • 2018-12-04 15:31:15

    iOS--Pod install && Pod update

    许多人在最初接触CocoaPods时认为pod install只是在第一次为项目设置CocoaPods时使用,之后都应该使用pod update.看起来是这样,但也不是(But that's not the case at all.)。 这篇文章的目的就是教你啥时候用pod install,啥时候用pod update

  • 2018-12-04 15:33:19

    CocoaPods安装和使用教程

    当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等。可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他类库又用到其他类库,“子子孙孙无穷尽也”,这也许是比较特殊的情况。总之小编的意思就是,手动一个个去下载所需类库十分麻烦。另外一种常见情况是,你项目中用到的类库有更新,你必须得重新下载新版本,重新加入到项目中,十分麻烦。如果能有什么工具能解决这些恼人的问题,那将“善莫大焉”。所以,你需要 CocoaPods。

  • 2018-12-04 23:37:37

    pod install 和 pod update

    当我们新建一个Podfile文件运行后,会自动生成一个Podfile.lock文件,Podfile.lock文件里存储着我们已经安装的依赖库(pods)的版本。 当我们第一次运行Podfile时,如果对依赖库不指定版本的话,cocoapods会安装最新的版本,同时将pods的版本记录在Podfile.lock文件中。这个文件会保持对每个pod已安装版本的跟踪,并且锁定这些版本。

  • 2018-12-04 23:40:26

    pod删除已导入的第三方库和移除项目中的cocoapods

    CocoaPods是一个负责管理iOS项目中第三方开源库的工具。CocoaPods的项目源码在Github上管理。在我们有了CocoaPods这个工具之后,只需要将用到的第三方开源库放到一个名为Podfile的文件中,然后在命令行执行$ pod install命令。CocoaPods就会自动将这些第三方开源库的源码下载下来,并且为我的工程设置好相应的系统依赖和编译参数. 但是如果我们导入的某个第三方不适用,或者我们又不想使用该第三方,那我们又该如何将这些相关的东西从我们的项目中清理出去呢?

  • 2018-12-04 23:41:47

    制作自己的Pod库(公有/私有)

    目的:1.管理自己常用的类;2.组件化开发步骤:1.想一个比较酷的名字,在桌面简历文件夹。2.打开terminal,cd到这个文件夹下面,执行pod lib create  xxx(这里我们以JJCategoryKit为例子,下同)命令,如下图。这个过程会问几个问题,根据实际情况输入回答即可。这里我们选择添加demo,结束的时候会自动Lanuch这个app. 作者:深水日月 链接:https://www.jianshu.com/p/ece0b5721461 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。