EDM響應式郵件框架：MJML

阿新 • • 發佈：2020-08-16

概述

新課題研究：響應式郵件框架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>