يشرح هذا الدليل كيفية تخصيص وتنسيق قالب HTML الخارجي لجميع رسائل البريد الإلكتروني المرسلة من موقع Discourse الخاص بك.
مستوى المستخدم المطلوب: مسؤول (Administrator)
يتم تغليف جميع رسائل البريد الإلكتروني المرسلة من موقعك في قالب HTML يمكن تخصيصه.
يغطي هذا الدليل:
- الوصول إلى قسم تخصيص نمط البريد الإلكتروني
- تعديل قالب HTML
- إضافة CSS مخصص
- اختبار قوالب البريد الإلكتروني
- التراجع عن التغييرات
- مثال على قالب مخصص
- التفاعل مع رسائل البريد الإلكتروني المجمعة (digest emails)
- تغيير خطوط البريد الإلكتروني
الوصول إلى تخصيص نمط البريد الإلكتروني
- انتقل إلى المسؤول (Admin) / البريد الإلكتروني (Email) / المظهر (Appearance) في موقع Discourse الخاص بك.
- سترى محررًا حيث يمكنك تعديل HTML و CSS لقالب البريد الإلكتروني الخاص بك.
تعديل قالب HTML
يحتوي الترميز الافتراضي في المحرر على عنصر نائب %{email_content} في قسم body. سيتم إدراج محتوى كل بريد إلكتروني في هذا العنصر النائب. يمكنك إجراء أي تغييرات على القالب طالما أنك لا تزيل هذا العنصر النائب.
للحصول على معلومات حول تخصيص المحتوى الذي يحل محل العنصر النائب %{email_content}، راجع كيفية تخصيص قوالب بريد إلكتروني محددة.
إضافة CSS مخصص
يمكنك استخدام قسم CSS في محرر نمط البريد الإلكتروني (Email Style editor) لحقن الأنماط المضمنة (inline styles) في القالب الخاص بك. إليك مثال:
-
أضف فئة CSS إلى عنصر HTML في القالب:
<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 inch) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
التفاعل مع رسائل البريد الإلكتروني المجمعة (digest emails)
إذا أضاف قالبك المخصص شعارًا إلى جميع رسائل البريد الإلكتروني، فلديك خياران لرسائل البريد الإلكتروني المجمعة:
-
لاستخدام نمط البريد الإلكتروني المجمع الافتراضي:
- قم بتعطيل إعداد الموقع
apply custom styles to digest.
- قم بتعطيل إعداد الموقع
-
للحفاظ على نمط متسق عبر جميع رسائل الإشعارات:
- قم بإزالة أي صور تم تعيينها كإعداد موقع
digest logo. - أضف
<span></span>إلى تخصيص النص في.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- قم بإزالة أي صور تم تعيينها كإعداد موقع
تغيير خطوط البريد الإلكتروني
لتغيير الخطوط في رسائل البريد الإلكتروني الخاصة بك:
-
استخدم خطوط الويب الآمنة (web-safe fonts) لتحقيق أقصى قدر من التوافق. راجع مكدس خطوط CSS (CSS Font Stack) للحصول على قائمة بالخطوط المتاحة على نظامي التشغيل Windows و Mac.
-
أضف قواعد CSS للخطوط إلى قالب البريد الإلكتروني لـ Discourse الخاص بك.
-
يمكنك تعيين الخطوط مباشرة في عناصر HTML، على سبيل المثال:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
لاحظ أن العديد من عملاء البريد الإلكتروني لا يدعمون خطوط الويب من الخدمات الخارجية.
موارد إضافية
لمزيد من المعلومات حول إنشاء بريد إلكتروني بتنسيق HTML، يمكنك الرجوع إلى هذا الدليل الشامل حول بناء قالب بريد إلكتروني بتنسيق HTML من الصفر.
