Dieser Leitfaden erklärt, wie Sie die äußere HTML-Vorlage für alle von Ihrer Discourse-Website gesendeten E-Mails anpassen und gestalten.
Erforderliche Benutzerebene: Administrator
Alle von Ihrer Website gesendeten E-Mails werden in eine anpassbare HTML-Vorlage eingeschlossen.
Dieser Leitfaden behandelt:
- Zugriff auf den Bereich zur Anpassung des E-Mail-Stils
- Modifizieren der HTML-Vorlage
- Hinzufügen von benutzerdefiniertem CSS
- Testen von E-Mail-Vorlagen
- Rückgängigmachen von Änderungen
- Ein Beispiel für eine benutzerdefinierte Vorlage
- Interaktion mit Digest-E-Mails
- Ändern von E-Mail-Schriftarten
Zugriff auf die Anpassung des E-Mail-Stils
- Navigieren Sie im Admin-Sidebar unter E-Mail zur Seite Erscheinungsbild oder gehen Sie direkt zu
/admin/customize/email_style. - Sie sehen einen Editor mit zwei Registerkarten – HTML und CSS – in dem Sie die Vorlage und die Stile für Ihre E-Mails ändern können.
Modifizieren der HTML-Vorlage
Der Standard-Markup in der HTML-Registerkarte enthält mehrere Platzhalter:
%{email_content}— Erforderlich. Hier wird der Inhalt jeder E-Mail eingefügt. Sie dürfen diesen Platzhalter nicht entfernen.%{email_preview}— Fügt einen versteckten Vorschautext für E-Mail-Clients ein, die einen Ausschnitt anzeigen.%{html_lang}— Fügt den Sprachcode der Website in das<html>-Tag ein.%{dark_mode_meta_tags}— Fügt Meta-Tags zur Unterstützung des Dunkelmodus ein.%{dark_mode_styles}— Fügt CSS-Stile für das Rendering im Dunkelmodus ein.
Wenn Sie eine benutzerdefinierte Vorlage erstellen, sollten Sie alle diese Platzhalter einschließen, um volle Kompatibilität zu gewährleisten. Als Ausgangspunkt können Sie die Standardvorlage (beim ersten Öffnen des Editors sichtbar) verwenden.
Informationen zum Anpassen des Inhalts, der den Platzhalter %{email_content} ersetzt, finden Sie unter Anpassen spezifischer E-Mail-Vorlagen.
Hinzufügen von benutzerdefiniertem CSS
Sie können die Registerkarte CSS des E-Mail-Stil-Editors verwenden, um Inline-Stile in Ihre Vorlage einzufügen. Hier ist ein Beispiel:
-
Fügen Sie einem HTML-Element in der Vorlage eine CSS-Klasse hinzu:
<td> class="my-outer-td"> </td> -
Erstellen Sie eine Regel für die Klasse in der CSS-Registerkarte:
.my-outer-td { padding: 30px 0 30px 0; }
Discourse ersetzt die CSS-Klasse vor dem Senden der E-Mail durch die tatsächliche CSS-Regel. Sie können hier beliebige CSS-Regeln hinzufügen.
Testen von E-Mail-Vorlagen
Es ist wichtig, Ihre Änderungen an der E-Mail-Vorlage in verschiedenen E-Mail-Clients zu testen, da diese HTML unterschiedlich interpretieren können. Verwenden Sie einen E-Mail-Testdienst, um eine Vorschau anzuzeigen, wie Ihre E-Mails in verschiedenen Clients aussehen werden, insbesondere bei größeren Änderungen.
Rückgängigmachen von Änderungen
Um Ihre Vorlagenanpassung rückgängig zu machen:
- Wählen Sie die Registerkarte aus, die Sie zurücksetzen möchten (HTML oder CSS).
- Klicken Sie unter dem Editor auf die Schaltfläche „Auf Standard zurücksetzen“.
Dadurch wird dieser spezifische Abschnitt (HTML oder CSS) auf die Standard-Discourse-E-Mail-Vorlage zurückgesetzt. Jede Registerkarte wird unabhängig zurückgesetzt.
Beispiel für eine benutzerdefinierte Vorlage
Hier ist eine einfache E-Mail-Vorlage, die die Breite von E-Mails auf maximal 600 Pixel begrenzt und oben ein Logo hinzufügt:
<!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>
Denken Sie daran, die Attribute src, alt und href des Bildes durch die spezifischen Informationen Ihrer Website zu ersetzen.
So sieht es auf verschiedenen Bildschirmgrößen aus
iPad Pro (10.5 Zoll) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Interaktion mit Digest-E-Mails
Wenn Ihre benutzerdefinierte Vorlage allen E-Mails ein Logo hinzufügt, haben Sie zwei Optionen für Digest-E-Mails:
-
Um das Standard-Styling von Digest-E-Mails zu verwenden:
- Deaktivieren Sie die Website-Einstellung
apply custom styles to digest(Benutzerdefinierte Stile auf Digest anwenden).
- Deaktivieren Sie die Website-Einstellung
-
Um ein konsistentes Styling für alle Benachrichtigungs-E-Mails beizubehalten:
- Entfernen Sie alle Bilder, die als Website-Einstellung
digest logo(Digest-Logo) festgelegt sind. - Fügen Sie
<span></span>zur Textanpassung unter.../admin/customize/site_texts/user_notifications.digest.custom.html.headerhinzu.
- Entfernen Sie alle Bilder, die als Website-Einstellung
Ändern von E-Mail-Schriftarten
Um Schriftarten in Ihren E-Mails zu ändern:
-
Verwenden Sie websichere Schriftarten für maximale Kompatibilität. Eine Liste der auf Windows und Mac verfügbaren Schriftarten finden Sie unter CSS Font Stack.
-
Fügen Sie CSS-Regeln für die Schriftarten zu Ihrer Discourse-E-Mail-Vorlage hinzu.
-
Sie können Schriftarten direkt in HTML-Elementen festlegen, zum Beispiel:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Beachten Sie, dass Webfonts von externen Diensten von vielen E-Mail-Clients nicht unterstützt werden.
Zusätzliche Ressourcen
Weitere Informationen zum Erstellen von HTML-E-Mails finden Sie in diesem umfassenden Leitfaden zum Erstellen einer HTML-E-Mail-Vorlage von Grund auf neu.
