本指南说明了如何自定义和设置 Discourse 站点发送的所有电子邮件的外部 HTML 模板的样式。
所需用户级别：管理员
您站点发送的所有电子邮件都封装在一个可以自定义的 HTML 模板中。
本指南涵盖：
- 访问电子邮件样式自定义部分
- 修改 HTML 模板
- 添加自定义 CSS
- 测试电子邮件模板
- 恢复更改
- 自定义模板示例
- 与摘要电子邮件的交互
- 更改电子邮件字体
访问电子邮件样式自定义
- 在您的 Discourse 站点中，导航到 Admin / Email / Appearance（管理 / 电子邮件 / 外观）。
- 您将看到一个编辑器，您可以在其中修改电子邮件模板的 HTML 和 CSS。
修改 HTML 模板
编辑器中的默认标记在 body 部分包含一个 %{email_content} 占位符。此占位符是每封电子邮件内容将被插入的位置。只要不删除此占位符，您可以对模板进行任何更改。
有关自定义替换 %{email_content} 占位符的内容的信息，请参阅如何自定义特定电子邮件模板。
添加自定义 CSS
您可以使用“Email Style”编辑器中的 CSS 部分将内联样式注入到您的模板中。这是一个示例：
-
向模板中的 HTML 元素添加一个 CSS 类：
<td> class="my-outer-td"> </td> -
在 CSS 编辑器中为该类创建一条规则：
.my-outer-td { padding: 30px 0 30px 0; }
在发送电子邮件之前，Discourse 会用实际的 CSS 规则替换 CSS 类。您可以在此处添加任何您喜欢的 CSS 规则。
测试电子邮件模板
在各种电子邮件客户端中测试您的电子邮件模板更改至关重要，因为它们可能以不同的方式解释 HTML。使用电子邮件测试服务来预览您的电子邮件在不同客户端上的显示效果，尤其是在进行重大更改时。
恢复更改
要恢复您的模板自定义：
- 滚动到模板编辑器的底部。
- 点击“Reset to default”（重置为默认值）按钮。
此操作将用默认的 Discourse 电子邮件模板替换您的更改。
自定义模板示例
这是一个基本的电子邮件模板，将电子邮件的宽度限制为最大 600 像素，并在顶部添加一个徽标：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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>
请记住将 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>。
- 移除设置为
更改电子邮件字体
要更改电子邮件中的字体：
-
使用网络安全字体以获得最大的兼容性。有关 Windows 和 Mac 上可用字体的列表，请参阅CSS 字体堆栈。
-
将字体规则添加到您的 Discourse 电子邮件模板中。
-
您可以直接在 HTML 元素中设置字体，例如：
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
请注意，许多电子邮件客户端不支持来自外部服务的网络字体。
附加资源
有关创建 HTML 电子邮件的更多信息，您可以参阅这篇关于从头开始构建 HTML 电子邮件模板的综合指南。
