本指南说明如何自定义和样式化您 Discourse 站点发送的所有邮件的外部 HTML 模板。
所需用户级别：管理员
您站点发送的所有邮件都被包装在一个可以自定义的 HTML 模板中。
本指南涵盖：
- 访问邮件样式自定义部分
- 修改 HTML 模板
- 添加自定义 CSS
- 测试邮件模板
- 恢复更改
- 自定义模板示例
- 与摘要邮件的交互
- 更改邮件字体
访问邮件样式自定义
- 在管理侧边栏的 Email（邮件）部分下导航到 Appearance（外观）页面，或者直接访问
/admin/customize/email_style。 - 您会看到一个带有 HTML 和 CSS 两个标签的编辑器，您可以在其中修改邮件的模板和样式。
修改 HTML 模板
HTML 标签中的默认标记包含几个占位符：
%{email_content}— 必需。这是插入每封邮件内容的位置。您不得删除此占位符。%{email_preview}— 插入隐藏的预览文本，供显示摘要的邮件客户端使用。%{html_lang}— 将站点的语言代码插入<html>标签中。%{dark_mode_meta_tags}— 插入用于暗模式支持的 meta 标签。%{dark_mode_styles}— 插入用于暗模式渲染的 CSS 样式。
创建自定义模板时，应包含所有这些占位符以确保完全兼容。您可以参考默认模板（在首次打开编辑器时可见）作为起点。
有关自定义替换 %{email_content} 占位符的内容的信息，请参阅如何自定义特定邮件模板。
添加自定义 CSS
您可以使用邮件样式编辑器中的 CSS 标签将内联样式注入到模板中。示例如下：
-
向模板中的 HTML 元素添加一个 CSS 类：
<td> class="my-outer-td"> </td> -
在 CSS 标签中为该类创建一条规则：
.my-outer-td { padding: 30px 0 30px 0; }
Discourse 在发送邮件前会将 CSS 类替换为实际的 CSS 规则。您可以在此处添加任何您喜欢的 CSS 规则。
测试邮件模板
务必在各种邮件客户端中测试您的邮件模板更改，因为它们可能对 HTML 的解释不同。使用邮件测试服务来预览您的邮件在不同客户端上的显示效果，尤其是在进行重大更改时。
恢复更改
要恢复您的模板自定义：
- 选择要重置的标签（HTML 或 CSS）。
- 点击编辑器下方的“Reset to default”（重置为默认值）按钮。
这将把该特定部分（HTML 或 CSS）重置为默认的 Discourse 邮件模板。每个标签独立重置。
自定义模板示例
这是一个基本的邮件模板，将邮件宽度限制在最大 600px，并在顶部添加一个徽标：
<!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="Your site name" 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>
请记住将 <img> 的 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（摘要徽标）站点设置中设置的任何图像。 - 在文本自定义
.../admin/customize/site_texts/user_notifications.digest.custom.html.header中添加<span></span>。
- 移除在
更改邮件字体
要更改邮件中的字体：
-
对最大兼容性使用 Web 安全字体。有关 Windows 和 Mac 上可用字体的列表，请参阅CSS 字体栈。
-
将字体相关的 CSS 规则添加到您的 Discourse 邮件模板中。
-
您可以直接在 HTML 元素中设置字体，例如：
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
请注意，许多邮件客户端不支持来自外部服务的网络字体。
附加资源
有关创建 HTML 邮件的更多信息，您可以参考这篇关于从头开始构建 HTML 邮件模板的综合指南。
