EDM相应式邮件框架:MJML

概述

新课题研讨:相应式邮件框架MJML(MJML官网:https://mjml.io/
姐妹篇: EDM相应式邮件框架:Formerly Ink

引见

MJML是一种标记言语,设想用于轻松完成一个相应式邮件。它的语义语法使得它轻易和简朴,而其雄厚的规范组件库可以削减你开辟时候,并减轻您的邮件代码库。MJML是一个开源的引擎可以将MJML转换成相应式规划的HTML.

装置

毕竟是js编写,须要node环境(4.2以上版本)

  • 要领一 npm

npm install -g mjml

代码部份

命令行操纵

  • 编译文件

$> 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

《EDM相应式邮件框架:MJML》

<mj-body>
  <!-- You email goes here -->
</mj-body>

mj-section

《EDM相应式邮件框架:MJML》

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

    <!-- Your columns go here -->

  </mj-section>
</mj-body>

mj-column

《EDM相应式邮件框架:MJML》

<mj-section>

  <mj-column>
    <!-- You content -->
  </mj-column>

  <mj-column>
    <!-- Your content -->
  </mj-column>

</mj-section>

mj-text

《EDM相应式邮件框架:MJML》

<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

《EDM相应式邮件框架:MJML》

<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

《EDM相应式邮件框架:MJML》

<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

《EDM相应式邮件框架:MJML》

mj-section

 <mj-column>
    <mj-button font-family="Helvetica" background-color="#F45E43" color="white">
      Don't click me!
    </mj-button>
  </mj-column>

mj-social

《EDM相应式邮件框架:MJML》

  <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

《EDM相应式邮件框架:MJML》

<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

《EDM相应式邮件框架:MJML》

<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

《EDM相应式邮件框架:MJML》

mj-location

《EDM相应式邮件框架:MJML》

<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>
    原文作者:幸运儿
    原文地址: https://segmentfault.com/a/1190000004709924
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞