يشرح هذا الدليل كيفية تخصيص وتنسيق قالب HTML الخارجي لجميع رسائل البريد الإلكتروني المرسلة من موقع Discourse الخاص بك.
مستوى المستخدم المطلوب: مسؤول (Administrator)
يتم تغليف جميع رسائل البريد الإلكتروني المرسلة من موقعك في قالب HTML يمكن تخصيصه.
يغطي هذا الدليل:
- الوصول إلى قسم تخصيص أنماط البريد الإلكتروني
- تعديل قالب HTML
- إضافة CSS مخصص
- اختبار قوالب البريد الإلكتروني
- التراجع عن التغييرات
- مثال على قالب مخصص
- التفاعل مع رسائل البريد الإلكتروني التجميعية (digest emails)
- تغيير خطوط البريد الإلكتروني
الوصول إلى تخصيص أنماط البريد الإلكتروني
- انتقل إلى صفحة المظهر (Appearance) ضمن قسم البريد الإلكتروني (Email) في الشريط الجانبي للمسؤول، أو انتقل مباشرة إلى
/admin/customize/email_style. - سترى محررًا به علامتا تبويب — HTML و CSS — حيث يمكنك تعديل القالب والأنماط لرسائل البريد الإلكتروني الخاصة بك.
تعديل قالب HTML
يحتوي الترميز الافتراضي في علامة تبويب HTML على العديد من العناصر النائبة (placeholders):
%{email_content}— مطلوب. هذا هو المكان الذي سيتم فيه إدراج محتوى كل بريد إلكتروني. يجب ألا تزيل هذا العنصر النائب.%{email_preview}— يُدرج نص معاينة مخفي لعملاء البريد الإلكتروني الذين يعرضون مقتطفًا.%{html_lang}— يُدرج رمز لغة الموقع في وسم<html>.%{dark_mode_meta_tags}— يُدرج وسوم meta لدعم الوضع الداكن.%{dark_mode_styles}— يُدرج أنماط CSS لتقديم الوضع الداكن.
عند إنشاء قالب مخصص، يجب عليك تضمين جميع هذه العناصر النائبة لضمان التوافق الكامل. يمكنك الرجوع إلى القالب الافتراضي (المرئي عند فتح المحرر لأول مرة) كنقطة بداية.
للحصول على معلومات حول تخصيص المحتوى الذي يحل محل العنصر النائب %{email_content}، راجع كيفية تخصيص قوالب بريد إلكتروني محددة.
إضافة CSS مخصص
يمكنك استخدام علامة تبويب CSS في محرر نمط البريد الإلكتروني (Email Style) لحقن الأنماط المضمنة (inline styles) في القالب الخاص بك. إليك مثال:
-
أضف فئة CSS إلى عنصر HTML في القالب:
<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 الافتراضي. يتم إعادة تعيين كل علامة تبويب بشكل مستقل.
مثال على قالب مخصص
إليك قالب بريد إلكتروني أساسي يحدد عرض رسائل البريد الإلكتروني بحد أقصى 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="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 من الصفر.
