輕鬆製作 RWD 信件：簡介 MJML 郵件設計語言框架

MJML 郵件設計語言框架

本文來源：MJML Documents
（我動手翻譯了語法部分，請參考這篇，結果差不多等於把文件全部翻完了XD）

MJML是一種用來編寫響應式電子郵件程式碼的標記語言(markup language)，由開源的轉譯引擎來把撰寫好的程式碼轉為高品質的HTML，因而能相容各種郵件開啟環境。MJML是知名郵件業者Mailjet多年經驗打造並且持續更新，確保無論郵件閱讀軟體一再改版，也能隨之更新相容。目前版本為MJML v4。

免安裝線上編輯器

嵌套（Netsing）層級結構

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Column content -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

內容本體（Body）

所有內容必須位於一個mj-body標籤內。

區段（Section）

整封信從上到下，分為若干個mj-section水平區段。

分欄（Column）

每個區段中都必須有分欄（至少一個），用mj-column標籤表示。響應式排列在此層級實現。

分欄的尺寸

自動定義尺寸

• 任一區段中的每個分欄，將均分該區段的總寬度（例如若有二個分欄就各佔50%，三個就各33%，四個就各25%）。
• 區段的寬度預設值為600px。
• 所有區段的寬度可由mj-body標籤的width屬性來更改。
• 任何分欄內的mj-元素，其寬度將等於該分欄的100%寬度。

手動定義尺寸

• 也可自行在mj-column標籤的width屬性設定該分欄的寬度。
• 分欄的寬度可用畫素或百分比為單位（例如width="150px"或者width="25%"）。

小訣竅

原始碼（Raw）

• 包夾在<mj-raw>標籤內的HTML程式碼，不會被MJML引擎進行轉譯處理。
• 上述程式碼必須是HTML原始碼且為響應式。
• 若位於<jm-head>內部，則轉譯後會放到區塊的最後面。

安裝使用網路字型

在<mj-head>內的<mj-raw>內放入網路字型路徑，然後使用font-family屬性來指定字型。例如在<mj-head>內放入：

<mj-raw>
    <link href='https://fonts.googleapis.com/earlyaccess/notosanstc.css' rel='stylesheet' type='text/css'>
</mj-raw>

即可以此方式使用：

<mj-text font-family="Noto Sans TC">這些字會顯示為思源黑體</mj-text>

。