Перейти к содержанию

MJML

Описание

MJML (Mailjet Markup Language) — это фреймворк, специально разработанный для адаптивной вёрстки электронных писем.

Он скрывает сложности кросс-почтовой и просто почтовой верстки и позволяет писать читаемый код, который затем транслируется в полноценный HTML, совместимый с большинством почтовых клиентов.

Использование

Разметка

Для начала нам нужно сверстать письмо при помощи MJML. Верстка выглядит как обычная HTML-разметка, про теги можно узнать здесь.

Основная таблица часто-используемых тегов выглядит так:

Компонент Назначение
<mj-body> Тело письма
<mj-section> Блок/секция (по сути, как <table> row)
<mj-column> Колонка внутри секции
<mj-text> Текст
<mj-image> Изображение
<mj-button> Кнопка
<mj-divider> Горизонтальная линия
<mj-navbar> Навигационное меню

Применяя эту информацию, сверстаем простое письмо:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">
          Hello from notes.kiriha.ru!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Теперь нужно транслировать этот код в HTML, который корректно будет отображаться даже в старых версиях Outlook.

Компиляция

Так как я пишу на Python, можно использовать библиотеку и утилиту mjml для компиляции писем:

pip install mjml
mjml test.mjml

После чего мы получим готовое HTML-письмо для использования.

Список реализаций транслятора можно посмотреть здесь.

Ссылки