Это руководство объясняет, как настроить и стилизовать внешний HTML-шаблон для всех писем, отправляемых с вашего сайта Discourse.
Требуемый уровень пользователя: Администратор
Все письма, отправляемые с вашего сайта, оборачиваются в HTML-шаблон, который можно настроить.
Это руководство охватывает:
- Доступ к разделу настройки стиля писем
- Изменение HTML-шаблона
- Добавление пользовательских CSS-стилей
- Тестирование шаблонов писем
- Откат изменений
- Пример пользовательского шаблона
- Взаимодействие с дайджест-письмами
- Изменение шрифтов в письмах
Доступ к настройке стиля писем
- Перейдите на страницу Внешний вид в разделе Письма в боковом меню администратора или перейдите напрямую по адресу
/admin/customize/email_style. - Вы увидите редактор с двумя вкладками — HTML и CSS — где вы можете изменять шаблон и стили для ваших писем.
Изменение HTML-шаблона
Стандартная разметка во вкладке HTML содержит несколько плейсхолдеров:
%{email_content}— Обязательно. Именно здесь будет вставляться содержимое каждого письма. Удалять этот плейсхолдер нельзя.%{email_preview}— Вставляет скрытый текст предпросмотра для почтовых клиентов, отображающих фрагмент письма.%{html_lang}— Вставляет код языка сайта в тег<html>.%{dark_mode_meta_tags}— Вставляет мета-теги для поддержки темного режима.%{dark_mode_styles}— Вставляет CSS-стили для рендеринга в темном режиме.
При создании пользовательского шаблона вы должны включить все эти плейсхолдеры для обеспечения полной совместимости. В качестве отправной точки вы можете обратиться к стандартному шаблону (виден при первом открытии редактора).
Информацию о настройке содержимого, которое заменяет плейсхолдер %{email_content}, см. в разделе как настроить конкретные шаблоны писем.
Добавление пользовательских CSS-стилей
Вы можете использовать вкладку CSS редактора стиля писем для внедрения встроенных стилей в ваш шаблон. Вот пример:
-
Добавьте CSS-класс к HTML-элементу в шаблоне:
<td class="my-outer-td"> </td> -
Создайте правило для этого класса во вкладке CSS:
.my-outer-td { padding: 30px 0 30px 0; }
Discourse заменит CSS-класс на фактическое CSS-правило перед отправкой письма. Здесь вы можете добавлять любые CSS-правила по своему усмотрению.
Тестирование шаблонов писем
Крайне важно протестировать изменения вашего шаблона письма в различных почтовых клиентах, так как они могут по-разному интерпретировать HTML. Используйте сервисы тестирования писем, чтобы предпросмотреть, как ваши письма будут отображаться в разных клиентах, особенно при внесении существенных изменений.
Откат изменений
Чтобы отменить настройку шаблона:
- Выберите вкладку, которую нужно сбросить (HTML или CSS).
- Нажмите кнопку «Сбросить по умолчанию» под редактором.
Это сбросит соответствующий раздел (HTML или CSS) к стандартному шаблону писем Discourse. Каждая вкладка сбрасывается независимо.
Пример пользовательского шаблона
Вот базовый шаблон письма, который ограничивает ширину писем максимум 600 пикселями и добавляет логотип в верхнюю часть:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 { font-family: Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url" alt="Название вашего сайта" width="150" height="40" style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;">
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Не забудьте заменить атрибуты изображения src, alt и href на специфичную для вашего сайта информацию.
Вот как это выглядит на экранах разных размеров
iPad Pro (10.5 дюймов) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Взаимодействие с дайджест-письмами
Если ваш пользовательский шаблон добавляет логотип во все письма, у вас есть два варианта для дайджест-писем:
-
Использовать стандартное оформление дайджест-писем:
- Отключите настройку сайта
apply custom styles to digest.
- Отключите настройку сайта
-
Обеспечить единообразие оформления во всех уведомительных письмах:
- Удалите любые изображения, установленные как настройка сайта
digest logo. - Добавьте
<span></span>в текстовую настройку по адресу.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- Удалите любые изображения, установленные как настройка сайта
Изменение шрифтов в письмах
Чтобы изменить шрифты в ваших письмах:
-
Используйте веб-безопасные шрифты для максимальной совместимости. Список доступных шрифтов для Windows и Mac см. на CSS Font Stack.
-
Добавьте CSS-правила для этих шрифтов в ваш шаблон писем Discourse.
-
Вы можете задать шрифты непосредственно в HTML-элементах, например:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Обратите внимание, что многие почтовые клиенты не поддерживают веб-шрифты из внешних сервисов.
Дополнительные ресурсы
Для получения дополнительной информации о создании HTML-писем вы можете обратиться к этому подробному руководству по созданию HTML-шаблона письма с нуля.
