هذا درس مكثّف حول أساسيات سمات Discourse. الجمهور المستهدف هو كل من ليس لديه خبرة سابقة في سمات Discourse. إذا كنت قد استخدمت سمات Discourse أو مكونات السمات من قبل، فمن المرجح أن هذا الدليل ليس شيئًا تحتاج إلى قراءته.
ما هي السمات ومكونات السمات؟
السمات أو مكونات السمات هي مجموعة من الملفات المعبأة معًا، ومصممة إما لتعديل مظهر Discourse بصريًا أو لإضافة ميزات جديدة.
لنبدأ بالسمات.
السمات
بشكل عام، لا يُفترض أن تكون السمات متوافقة مع بعضها البعض لأنها تصاميم مستقلة مختلفة في جوهرها. فكّر في السمات كأنها «أغطية» أو مثل مشغلات التطبيقات على نظام Android. يمكنك تثبيت عدة مشغلات، لكنك لا يمكنك استخدام اثنين منها في نفس الوقت. تأتي تثبيتات Discourse الافتراضية مع سمتين: Foundation وHorizon.
تقدم Foundation مظهرًا نظيفًا وكلاسيكيًا لـ Discourse، بينما يوفر Horizon تصميمًا أكثر حداثة مع لوحات ألوان متعددة للاختيار من بينها (مثل Horizon، Royal، Clover، Lily، Violet، وMarigold — وكل منها يحتوي على متغيرات للوضع الفاتح والداكن).
الوضع الفاتح
والوضع الداكن
لنفترض أن ذلك لا يكفي لك وتريد المزيد. حسنًا، يمكنك تثبيت سمات إضافية بسهولة نسبية. إليك بعض أمثلة السمات المجانية المتاحة هنا على Meta.
تصميم قائمة المواضيع «الحد الأدنى» الشخصي من Sam
كما ترون، يمكن أن يبدو موقعك مختلفًا بشكل كبير بناءً على السمة التي تختارها؛ ومع ذلك، هذا ليس كل شيء. بالإضافة إلى السمات، يدعم Discourse أيضًا مكونات السمات.
مكونات السمات
نستخدم مصطلح «مكون السمة» (theme-component) لوصف الحزم التي تركز أكثر على تخصيص جانب واحد من Discourse. نظرًا لتركيزها الضيق، تكون مكونات السمات متوافقة تقريبًا دائمًا مع بعضها البعض. هذا يعني أنه يمكنك تشغيل عدة مكونات سمات في نفس الوقت تحت أي سمة. يمكنك التفكير في مكونات السمات كأنها تطبيقات على هاتفك.
كما هو الحال دائمًا، تعد الأمثلة أفضل طريقة لوصف شيء ما، لذا إليك بعض أمثلة مكونات السمات المتاحة هنا على Meta:
يأخذ هذا المكون تفاصيل فئاتك الحالية، بما في ذلك الاسم والوصف واللون، ويولد بانرًا في أعلى صفحات الفئة ذات الصلة.
يضيف هذا المكون رأسًا علويًا إضافيًا للعلامة التجارية باستخدام شعارك وروابط التنقل وأيقونات وسائل التواصل الاجتماعي لكل من عروض الهاتف المحمول وسطح المكتب. يمكن أن يكون شعار العلامة التجارية صورة أو نصًا.
كما ترون، تتمتع مكونات السمات بنطاق تركيز أضيق بكثير. وبالتالي، فهي متوافقة مع بعضها البعض في معظم الحالات. الآن لديك فكرة عامة عن ماهية سمات Discourse ومكونات السمات. دعنا نغوص في التفاصيل أكثر.
واجهة سمات Discourse
لنلقِ نظرة على واجهة السمات. انتقل إلى your.site.com/admin/customize/themes وسترى شيئًا مشابهًا لهذا:
هذه هي واجهة السمات الافتراضية في Discourse. يمكنك القيام بعدة أشياء هنا:
- تعيين السمة النشطة الافتراضية
- اختيار السمات المتاحة للمستخدمين
- إنشاء سمات ومكونات سمات جديدة
- استيراد سمات ومكونات سمات جديدة
- إضافة مكونات السمات إلى سمة
- تعديل مخططات الألوان
- تغيير إعدادات السمة
- معاينة سمة
لنستعرض هذه الخيارات واحدة تلو الأخرى.
تعيين السمة النشطة الافتراضية
يشير علامة الصح الصغيرة بجانب اسم السمة الافتراضية إلى أن هذه هي السمة النشطة في موقعك.
الآن، دعنا نغير السمة النشطة إلى الداكنة. انقر على السمة الداكنة وسترى ما يلي:
ستتم تعيين السمة النشطة في موقعك إلى الداكنة. هذا يعني أن كل من يزور موقعك سيرى ما يلي:
وسينتقل علامة الصح بعد ذلك لتظهر بجانب اسم السمة الداكنة، مما يشير إلى أنها السمة النشطة.
اختيار السمات المتاحة للمستخدمين
من الجيد أن تتمكن من تعيين سمة لموقعك، لكن هل تعلم ما هو أجمل من ذلك؟ السماح لمستخدميك باتخاذ القرار. يتيح لك Discourse عرض سمات مختلفة لمستخدميك، مما يسمح لهم بتعيين السمة وفقًا لتفضيلاتهم. يقتصر خيارهم على حسابهم الخاص ولن يؤثر على اختيار السمة النشطة الخاصة بك أو خيارات المستخدمين الآخرين.
على سبيل المثال، يمكنك تعيين السمة النشطة على السمة الافتراضية (الفاتحة) ولكن عرض السمة الداكنة كخيار. دعنا نحاول فعل ذلك الآن. في واجهة السمات.
ستظهر جميع السمات النشطة التي لديك، سواء كانت السمة الافتراضية المحددة في موقعك أو أي سمات قمت بتعيينها لتكون قابلة للاختيار من قبل المستخدمين:
ومع ذلك، سيكون فقط السمة الافتراضية هي التي تحمل علامة الصح الخضراء.
الآن، دعنا نحاول جعل السمة الحمراء قابلة للاختيار من قبل المستخدمين على سبيل المثال.
كل ما عليك فعله هو النقر عليها، ثم تحديد المربع الذي يقول «يمكن للمستخدمين اختيار السمة».
هذا كل شيء! ستلاحظ أنها تنتقل تلقائيًا من قائمة السمات غير النشطة إلى قائمة السمات النشطة.
وتمكن مستخدميك من اختيار أي سمة يفضلونها من خلال الذهاب إلى
your.site.com/my/preferences/interface
إنشاء سمات ومكونات سمات جديدة
لإنشاء سمة أو مكون سمة جديد، انقر على أحد زري «التثبيت» الاثنين.
ستظهر لك نافذة حوار. حدد خيار «إنشاء جديد» في القائمة الجانبية اليسرى. ستحتاج إلى تقديم اسم لما تريد إنشاؤه والقرار مما إذا كانت سمة أم مكون سمة.
لقد غطينا بشكل أساسي أساسيات ماهية السمات ومكونات السمات. إذا تذكرت، فإن مكون السمة يركز عادةً على تعديل منطقة واحدة من Discourse. في حين أن السمة تغطي عادةً عددًا من الجوانب. يجب أيضًا أن تلاحظ أن السمة يمكن أن تحتوي على أي عدد من مكونات السمات تحتها، بينما لا يمكن لمكون السمة ذلك. لا تقلق بشأن هذا الآن، سيتبع لاحقًا شرح أكثر تفصيلاً لهذه العلاقة.
الآن، لنفترض أنك قررت الاسم وقررت جعلها سمة. حسنًا، بمجرد أن تضغط على زر «إنشاء»، سيتم إنشاء السمة وستتمكن بعد ذلك من:
- تغيير اسم السمة / مكون السمة
- تعيين أو تغيير مخطط ألوان للسمة
- إضافة HTML / CSS / JS إلى السمة / مكون السمة
- إضافة ملفات أو تحميلات إلى السمة
- إضافة مكونات فرعية إلى سمتك
التخصيصات المحددة خارج نطاق هذا الدليل، لذا سأكتفي هنا عند هذه النقطة.
تبدو واجهة إضافة HTML / CSS / JS كما يلي (بمجرد النقر على الخيار رقم 3 أعلاه)
استيراد سمات ومكونات سمات جديدة
لدينا بالفعل دليل حول كيفية استيراد السمات، لكنني أدرج هنا كيفية القيام بذلك لأن هذا الدليل يغطي جميع الأساسيات.
لاستيراد سمة أو مكون سمة، انقر على أحد زري «التثبيت» الاثنين.
سيتيح لك قسم «الشائع» معاينة/تثبيت قائمة من أكثر سماتنا ومكوناتنا شيوعًا.
يمكنك أيضًا استيراد ملفات السمات من جهازك أو عبر رابط مستودع السمات. يتم توفير رابط المستودع لكل سمة من قبل المؤلف في موضوع السمة. بمجرد استيراد السمة، تنطبق كل الأشياء التي ناقشناها سابقًا عليها. يمكنك تعيينها كافتراضية، وجعلها قابلة للاختيار من قبل المستخدمين، وما إلى ذلك.
إذا قمت باستيراد مكون سمة، فيمكنك أيضًا إضافته إلى أي من سماتك. يتم تغطية هذا بالتفصيل في القسم التالي.
إضافة مكونات السمات إلى سمة
لنفترض أنك تحب مكون سمة بانرات فئات Discourse وتريد استخدامه. ستعمل على النحو التالي:
- استيراد السمة من المستودع كما ناقشنا أعلاه
- إضافتها كمكون سمة إلى سماتك النشطة / القابلة للاختيار من قبل المستخدمين
يمكنك فعل ذلك هكذا:
بعد استيراد المكون، انتقل إلى السمة التي تريد إضافتها إليها وابحث عن قسم «المكونات المدرجة».
ستظهر هذه القائمة جميع مكونات السمات المثبتة. من هناك يمكنك إضافة مكونات السمات إلى السمة. سيبدو إضافة مكون سمة Versatile Banner كما يلي:
توجد خيار مشابه، «تضمين المكون على هذه السمات»، من صفحة المكون الفردي. يتيح لك ذلك إضافة مكون إلى عدة سمات في وقت واحد.
هذا هو إلى حد كبير كل شيء. بانرات فئات Discourse هي الآن مكون نشط في السمة الافتراضية. إذا كنت تريد أيضًا إضافتها إلى السمة الداكنة، فستكرر عملية إضافة مكون السمة للسمة الداكنة.
إذا قمت بتعيين السمة الداكنة لتكون قابلة للاختيار من قبل المستخدمين وأضفت مكون سمة بانرات فئات Discourse إليها أيضًا، فسيحصل المستخدمون الذين يختارون السمة الداكنة كسمة نشطة لهم على مكون سمة بانرات فئات Discourse أيضًا، نظرًا لأنها «سمة فرعية» للسمة الداكنة.
يمكنك الحصول على عدد غير محدود من مكونات السمات تحت سمة، وكما ناقشنا سابقًا، فهي عادة متوافقة مع بعضها البعض. لذا يمكنك فعل شيء مثل هذا:
وستكون كل تلك المكونات نشطة في السمة الافتراضية في نفس الوقت.
تعديل مخططات الألوان
مخطط الألوان هو لوحة ألوان تختارها لتوليد ألوان العناصر في سمة. لن أدخل في تفاصيل كثيرة هنا، لكنني سأريك كيفية استخدام مخططات الألوان.
انتقل إلى your.site.com/admin/customize/colors وسترى:
من هنا يمكنك تعديل مخططات الألوان أو إنشاء مخططات جديدة. لتعديل مخطط ألوان، انقر عليه وغير الألوان حسب رغبتك.
لإنشاء مخطط ألوان جديد انقر هنا
بمجرد الانتهاء من تغيير الألوان، حان الوقت الآن لتعيين مخطط الألوان كنشط في سماتك النشطة أو القابلة للاختيار من قبل المستخدمين. للقيام بذلك، انتقل إلى صفحة السمة وابحث هنا:
إعدادات السمة
يمكن أن تحتوي سمات Discourse على إعدادات. صُممت هذه الإعدادات لتكون طريقة سهلة لك لتكوين سمة أو مكون سمة وفقًا لاحتياجاتك. على سبيل المثال، تحتوي سمة أنماط أزرار Discourse على بعض الإعدادات التي تتيح تخصيصًا سهلًا لكيفية ظهور الأزرار عن طريق تغيير بعض القيم حسب رغبتك.
ليس جميع السمات / مكونات السمات لديها إعدادات، ولكن بالنسبة لتلك التي لديها، فستظهر دائمًا هنا. ستشمل الإعدادات عادةً تعليمات يقدمها المؤلف تساعدك على تحديد التغييرات التي يجب إجراؤها.
معاينة السمة
أحيانًا تحتاج إلى رؤية مظهر السمة على موقعك قبل تطبيقها. يوفر Discourse طريقة سهلة لمعاينة السمات دون تعيينها كنشطة.
أثناء وجودك في صفحة السمة، انقر هنا
وستفتح علامة تبويب جديدة مع معاينة حية لكيفية ظهور السمة على موقعك. يمكنك التنقل إلى صفحات مختلفة ورؤية كيف يبدو كل شيء.
أفضل جزء في معاينة السمة هو أنك يمكنك اختبار التغييرات مباشرة دون التسبب في أي مشاكل على موقعك في حال حدوث أي خطأ.
معلومات إضافية
الوضع الآمن
يحتوي Discourse على طريقة مدمجة لتجاوز السمة النشطة الحالية في حال حدوث مشاكل. على سبيل المثال، قد يتسبب خطأ في كود JavaScript في مكون ما في عدم عمل موقعك بشكل صحيح. لتجاوز السمة النشطة الحالية، قم بزيارة ببساطة:
your.site.com/safe-mode
سترى حينها:
من هناك يمكنك تعطيل السمة النشطة الحالية، والتنقل إلى صفحة السمة وإصلاح المشكلة أو تعطيل السمة نهائيًا.
الحصول على سمات جديدة
أكثر طريقة مباشرة للعثور على سمات ومكونات سمات جديدة هي التحقق من فئة Customization > Theme هنا على Meta.
قراءة إضافية
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
إذا كانت لديك أي أسئلة، فلا تتردد في طرحها.