mjml - 如何快速編寫響應式電子郵件？

時間 2019-12-05

標籤 mjml 如何快速編寫響應電子郵件简体版

原文原文鏈接

1、背景

之前作項目碰到發郵件的需求，郵件模板的編輯就是一件頭疼的事。由於雖然說郵件是支持 html 的，可是確是極度不完善的支持，好比必須經過 <table> 排版，有些功能不支持，還有各類坑。本質上是各家郵件商的標準有差別。css

具體可參考阮一峯的這篇：http://www.ruanyifeng.com/blog/2013/06/html_email.htmlhtml

因而我在網上 google 了下，發現了 mjml 這個最 hot 的 響應式電子郵件框架。npm

2、特色

一、那 mjml 就是一個相似 bootstrap 在 HTML + CSS 的地位，他們都提供了一些更高級的語法(標籤)【叫MJML】，磨平了各家客戶端在解析和指定標準上的差別。bootstrap

二、mjml 的新語法學起來也很快，很少，好理解，易上手，而後基於組件化，能很快的搭出來你想要的 Email 內容。app

三、mjml更支持響應式佈局，且是移動端優先。框架

3、使用

一、安裝

其實有 npm 包，我懶得安裝，遂用的在線編輯器：編輯器

https://mjml.io/try-it-live組件化

支持在線自動保存，很好用。佈局

二、DEMO

(1) 地址

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

(2) 代碼

<mjml>
  <mj-head>
    <mj-title>Hello Register</mj-title>
    <mj-attributes>
      <!-- 一、定義 global 樣式 -->
      <!-- 針對某個元素 -->
      <mj-text line-height="150%" />
      <!-- 針對全部元素 -->
      <mj-all font-family="Arial" />
      <!-- 二、定義 class 樣式 -->
      <mj-class name="title" font-size="35px" align="center" />
    </mj-attributes>
    <!-- 三、定義 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>
          <!-- 四、定義 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) 預覽效果

三、注意知識點

(1) 一個最簡的框架

<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 中。