MJML построен на компонентах, используемых в виде тегов в языке разметки. Добавленный в стандартную библиотеку компонентов, каждый может создать свой собственный компонент, используя простой синтаксис MJML, чтобы упростить повторное использование фрагментов кода без необходимости вводить их снова и снова.

Давайте проведем вас через процесс создания компонента. Поскольку MJML написан на ES6, он зависит от нескольких вещей, таких как Babel. Не волнуйтесь, мы подготовили для вас шаблон, поэтому все, что вам нужно сделать, это клонировать шаблон компонента. Для этого просто откройте свой терминал (перейдите туда, где вы хотите, чтобы ваша папка была создана) и запустите git clone https://github.com/mjmlio/mjml-component-boilerplate.git && cd mjml-component-boilerplate . Затем запустите npm install, чтобы установить зависимости.

Понимание структуры

Пока вы устанавливаете зависимости, давайте рассмотрим, что находится в этой папке. Наиболее важными элементами этого шаблона являются:

  • Файл index.mjml . Здесь живет ваш MJML и где мы будем использовать настраиваемый компонент (раскомментируйте его, чтобы использовать!).
  • Папка components, в которой находятся ваши пользовательские компоненты, написанные на ES6.
  • Папка lib, в которой находятся пользовательские компоненты, скомпилированные из ES6 в ES5 с помощью babel. Не редактируйте файлы в этой папке.
  • .mjmlconfig файл, в котором вы регистрируете свои пользовательские компоненты, чтобы их мог использовать механизм MJML, который иначе их не узнал бы.

Создание вашего первого компонента

Во-первых, важно изменить путь к вашему компоненту в .mjmlconfig. Файл, вероятно, будет скрыт по умолчанию при просмотре папки. Чтобы открыть его, просто запустите open .mjmlconfig в своем терминале и замените путь на /lib/MjColumnImageText.js на свой локальный путь к этот файл. Чтобы получить локальный путь от вашего терминала, запустите pwd (echo %cd% в Windows) .

Запустите npm start, чтобы index.mjml и ваши пользовательские компоненты перекомпилировались при каждом внесении вами изменений. Если вы не хотите автоматически просматривать и перекомпилировать файлы, вы можете просто запустить npm run build, чтобы скомпилировать их вручную, когда захотите.

Теперь давайте вместе создадим компонент. Мы создадим простой компонент, который будет отображать макет в 2 столбца с изображением в левой части и текстом в правой части. Он намеренно прост, поскольку идея состоит в том, чтобы показать вам, как создать свой собственный компонент, соответствующий вашим потребностям.

Теперь мы, очевидно, хотим сделать часть содержимого этого компонента динамической, чтобы мы могли настраивать его при использовании компонента. Вот что мы сможем настроить благодаря атрибутам компонентов:

  • Направление компонента (должно ли изображение быть слева или справа) благодаря атрибуту direction
  • Стиль изображения благодаря атрибутам image-padding, image-src, image-width
  • Стиль текста благодаря атрибутам color, font-size
  • Не стесняйтесь добавлять дополнительные атрибуты в раздел, столбец, изображение или текст, следуя той же структуре (учитывая, что компоненты поддерживают атрибуты, которые вы используете)

Самое замечательное в компонентах MJML заключается в том, что вы можете создавать их, используя HTML, но также и MJML.

Покажи мне код!

Разобьем код нашего нестандартного компонента по битам. Все приведенные ниже фрагменты кода взяты из файла MjColumnImageText.js, находящегося в папке компонентов.

1. Импорт зависимостей

Во-первых, нам нужно импортировать зависимости. Это включает в себя React, но также и компоненты MJML, которые мы будем использовать повторно. Здесь мы будем использовать mjml-core, отвечающий за рендеринг MJML и компонентов section, column, image и text .

2. Настройка компонента и его атрибутов по умолчанию.

Затем мы «сконфигурируем» наш компонент, явно указав его имя, где он может быть использован, использует ли он MJML или HTML и каковы атрибуты по умолчанию.

3. Определение компонента и того, что он отображает.

Именно здесь происходит вся магия, и мы определяем, что будет отображать наш компонент (будь то MJML или HTML). Здесь мы будем использовать существующие компоненты Раздел, Столбец, Изображение, Текст, чтобы нам даже не пришлось беспокоиться об адаптивном HTML. Поскольку мы создаем компонент, состоящий из изображения и текста, мы решили создать 3 метода рендеринга:

  • Метод визуализации для столбца изображения (renderImage ())
  • Метод визуализации для текстового столбца (renderContent ())
  • Метод рендеринга для рендеринга изображения + текстовые столбцы (render ())

4. Делаем наш компонент доступным

Наконец, мы просто привязываем конфигурацию, которую мы сделали на шаге 2, к только что созданному компоненту и экспортируем наш компонент, чтобы мы могли его повторно использовать.

Использование вашего компонента

Откройте index.mjml и раскомментируйте пользовательский компонент (строки с 15 по 17).

Если вы использовали npm start во время внесения изменений, ваши файлы обновлены. Все, что вам нужно сделать, чтобы увидеть волшебство, - это открыть index.html.

Если вы не использовали npm start, запустите npm run build для компиляции компонентов и index.mjml Затем вы можете открыть index.html, чтобы посмотреть, как выглядит ваш компонент.

Публикация вашего компонента

Теперь, когда у вас есть блестящий новый компонент, вы можете открыть его исходный код, чтобы сообщество могло извлечь из него пользу. Один из способов сделать это - опубликовать код вашего компонента в репозитории на Github, чтобы люди могли его клонировать и npm install, как вы это делали в этом руководстве. Еще лучше, вы можете опубликовать его в NPM, чтобы люди могли установить его напрямую!

Нужна помощь?

Если вам нужно вдохновение, вы можете найти список компонентов MJML здесь.

Если у вас возникнут проблемы, пожалуйста, откройте проблему на Github, чтобы мы могли вам помочь.

Надеемся, вам понравился этот урок. Не стесняйтесь делиться отзывами в комментариях, в Twitter и непосредственно в Slack! Хотите первым узнавать о новых возможностях MJML? Подпишитесь на рассылку новостей с сайта.