هذه دورة مكثفة في أساسيات سمات Discourse. الجمهور المستهدف هو كل من ليس على دراية بسمات Discourse. إذا كنت قد استخدمت بالفعل سمة Discourse / مكونات السمة، فمن المرجح أن هذا الدليل ليس شيئًا تحتاج إلى قراءته.
ما هي السمات ومكونات السمة؟
السمة أو مكون السمة هو مجموعة من الملفات المعبأة معًا مصممة إما لتعديل Discourse بصريًا أو لإضافة ميزات جديدة.
لنبدأ بالسمات.
السمات
بشكل عام، لا ينبغي أن تكون السمات متوافقة مع بعضها البعض لأنها في جوهرها تصاميم مستقلة مختلفة. فكر في السمات مثل الجلود، أو مثل برامج الإقلاع في Android. يمكنك تثبيت عدة برامج إقلاع، لكنك لا تستطيع استخدام اثنين منها في نفس الوقت. تأتي التثبيت الافتراضي لـ Discourse مع سمتين: Foundation و Horizon.
توفر Foundation مظهر Discourse الكلاسيكي والنظيف، بينما تقدم Horizon تصميمًا أكثر حداثة مع عدة لوحات ألوان للاختيار من بينها (مثل Horizon، Royal، Clover، Lily، Violet، و Marigold — كل منها بنسخة فاتحة وداكنة).
Foundation
و Horizon
لنفترض أن هذا لا يكفي لك وتريد المزيد. حسنًا، يمكنك تثبيت سمات إضافية بسهولة نسبيًا. إليك بعض الأمثلة على السمات المجانية المتاحة هنا على Meta.
تصميم قائمة المواضيع “البسيط” الشخصي لـ Sam
كما ترى، يمكن أن يبدو موقعك مختلفًا بشكل كبير اعتمادًا على السمة التي تختارها؛ ومع ذلك، هذا ليس نهاية القصة. بالإضافة إلى السمات، يدعم Discourse أيضًا مكونات السمة.
مكونات السمة
نستخدم عبارة مكون السمة لوصف الحزم التي تركز أكثر على تخصيص جانب واحد من Discourse. بسبب تركيزها الضيق، تكون مكونات السمة متوافقة مع بعضها البعض في الغالب. هذا يعني أنه يمكنك تشغيل عدة مكونات سمة في نفس الوقت تحت أي سمة. يمكنك التفكير في مكونات السمة مثل التطبيقات على هاتفك.
كما هو الحال دائمًا، الأمثلة هي أفضل طريقة لوصف شيء ما، لذا إليك بعض الأمثلة على مكونات السمة المتاحة هنا على Meta
يأخذ هذا المكون تفاصيل الفئة الحالية الخاصة بك، بما في ذلك الاسم والوصف واللون، وينشئ لافتة في أعلى صفحات الفئة ذات الصلة.
يضيف هذا المكون رأسًا علويًا إضافيًا للعلامة التجارية مع شعارك وروابط التنقل وأيقونات التواصل الاجتماعي لكل من العرض على الهاتف المحمول وسطح المكتب. يمكن أن يكون شعار العلامة التجارية صورة أو نصًا.
كما ترى، فإن مكونات السمة لها تركيز أضيق بكثير. وبالتالي، فهي متوافقة مع بعضها البعض في معظم الحالات. الآن لديك فكرة عامة عما هي سمات Discourse ومكونات السمة. دعنا نتعمق قليلاً.
واجهة سمة Discourse
لننظر إلى واجهة السمات. انتقل إلى your.site.com/admin/customize/themes وستشاهد شيئًا مثل هذا:
هذه هي واجهة السمة الافتراضية في Discourse. يمكنك القيام بعدة أشياء هنا:
- تعيين السمة الافتراضية النشطة
- اختيار السمات التي تريد جعلها متاحة لمستخدميك
- إنشاء سمات ومكونات سمة جديدة
- استيراد سمات ومكونات سمة جديدة
- إضافة مكونات سمة إلى سمة
- تعديل لوحات الألوان
- تغيير إعدادات السمة
- معاينة سمة
لنمر عبر هذه النقاط واحدة تلو الأخرى.
تعيين السمة الافتراضية النشطة
يمكنك رؤية شارة تشير إلى أن السمة مضبوطة كافتراضية:
الآن دعنا نغير السمة النشطة إلى Horizon. يمكنك القيام بذلك من زر القائمة … أو بالنقر على اسم السمة واختيار مربع الاختيار في صفحة الإعدادات:
سيتم تعيين السمة النشطة على موقعك إلى Horizon. هذا يعني أن كل من يزور موقعك سيرى هذا:
اختيار السمات التي تريد جعلها متاحة لمستخدميك
من الجميل أن تكون قادرًا على تعيين سمة لموقعك، لكنك تعرف ما هو أجمل؟ السماح لمستخدميك بالاختيار. يسمح لك Discourse بتقديم سمات مختلفة لمستخدميك للسماح لهم بتعيين السمة وفقًا لتفضيلاتهم. خيارهم يقتصر على حسابهم الخاص ولن يؤثر على اختيارك للسمة النشطة أو اختيارات المستخدمين الآخرين.
على سبيل المثال، يمكنك تعيين السمة النشطة إلى السمة الافتراضية (Horizon) ولكن تقديم سمة Foundation كخيار. دعنا نحاول القيام بذلك الآن في واجهة السمة.
كل ما عليك فعله هو النقر على زر القائمة …، ثم اختيار “السماح للمستخدمين بالاختيار”
هذا كل شيء! ستحصل الآن على شارة “قابلة للاختيار من قبل المستخدم”
وسيتمكن مستخدموك من اختيار أي سمة يفضلونها عن طريق الانتقال إلى
your.site.com/my/preferences/interface
إنشاء سمات ومكونات سمة جديدة
لإنشاء سمة أو مكون سمة جديد، انقر على زر “التثبيت”
ستظهر لك نافذة حوار. اختر خيار “إنشاء جديد” في القائمة. ستحتاج إلى تقديم اسم لما تريد إنشاؤه والقرار ما إذا كان سمة أو مكون سمة.
لقد غطينا نوعًا ما أساسيات ما هي السمات ومكونات السمة. إذا كنت تتذكر، فإن مكون السمة يركز عادةً على تعديل منطقة واحدة من Discourse. في حين أن السمة تغطي عادةً عددًا من الأشياء. يجب أن تلاحظ أيضًا أن السمة يمكن أن تحتوي على أي عدد من مكونات السمة تحتها، بينما لا يمكن لمكون السمة ذلك. لا تقلق بشأن هذا الآن، ستأتي شرحًا أكثر تفصيلاً لهذه العلاقة لاحقًا.
الآن، لنفترض أنك قررت الاسم وقررت جعله سمة. حسنًا، بمجرد الضغط على زر “إنشاء”، سيتم إنشاء السمة وستتمكن بعد ذلك من
- تغيير اسم السمة / مكون السمة
- تعيين أو تغيير لوحة ألوان للسمة
- إضافة مكونات فرعية إلى سمتك
- إضافة html / css / js إلى السمة / مكون السمة
- إضافة ملفات أو رفعات إلى السمة
التخصيصات المحددة خارج نطاق هذا الدليل، لذلك سأقف هنا عند هذه النقطة.
تبدو واجهة إضافة html / css / js هكذا (بمجرد النقر على #4 أعلاه)
استيراد سمات ومكونات سمة جديدة
لدينا بالفعل دليل حول كيفية استيراد السمات، لكنني أدرج كيفية القيام بذلك هنا لأن هذا الدليل من المفترض أن يغطي جميع الأساسيات.
لاستيراد سمة أو مكون سمة، انقر على زر “التثبيت”
سيتيح لك قسم “الشائع” معاينة/تثبيت من قائمة أكثر سماتنا ومكوناتنا شعبية.
يمكنك أيضًا استيراد ملفات السمة من جهازك أو عبر رابط مستودع السمة. يوفر المؤلف رابط المستودع لكل سمة في موضوع السمة. بمجرد استيراد سمة، ستطبق عليها كل الأشياء التي ناقشناها سابقًا. يمكنك تعيينها كافتراضية، وجعلها قابلة للاختيار من قبل المستخدم، وما إلى ذلك.
إذا قمت باستيراد مكون سمة، يمكنك أيضًا إضافته إلى أي من سماتك. يتم تغطية ذلك بالتفصيل في القسم التالي
إضافة مكونات سمة إلى سمة
لنفترض أنك تحب مكون لافتات الفئات في Discourse وتريد استخدامه. ستقوم بذلك على النحو التالي
- استيراد السمة من المستودع كما ناقشنا أعلاه
- إضافته كمكون سمة إلى سماتك النشطة / القابلة للاختيار من قبل المستخدم
يمكنك القيام بذلك على النحو التالي:
بعد استيراد المكون، انتقل إلى السمة التي تريد إضافته إليها وابحث عن قسم “المكونات المضمنة”
ستعرض هذه القائمة جميع مكونات السمة المثبتة. من هناك يمكنك إضافة مكونات سمة إلى السمة. سيبدو إضافة مكون Homepage Feature هكذا
توجد خيار مشابه، “تضمين المكون على هذه السمات”، من صفحة المكون الفردي. هذا يسمح لك بإضافة مكون إلى عدة سمات في وقت واحد
هذا هو كل شيء تقريبًا. أصبح Homepage Feature الآن مكونًا نشطًا للسمة الافتراضية. إذا كنت تريد أيضًا إضافته إلى سمة أخرى، فستكرر عملية إضافة مكون السمة.
إذا قمت بتعيين سمة Foundation لتكون قابلة للاختيار من قبل المستخدم وأضفت مكون سمة Homepage Feature إليها أيضًا، فسيحصل المستخدمون الذين يختارون سمة Foundation كسمة نشطة لديهم على مكون سمة Homepage Feature أيضًا لأنه “سمة فرعية” لسمة Foundation.
يمكنك أن يكون لديك عدد غير محدود من مكونات السمة تحت سمة، وكما ناقشنا سابقًا، فهي عادةً متوافقة مع بعضها البعض. لذا يمكنك القيام بشيء مثل هذا:
وسيكون جميع تلك المكونات نشطة على السمة في نفس الوقت.
تعديل لوحات الألوان
لوحة الألوان هي مجموعة من الألوان التي تختارها لتوليد لون العناصر في سمة. لن أدخل في الكثير من التفاصيل هنا ولكن سأريك كيفية استخدام لوحات الألوان.
انتقل إلى your.site.com/admin/config/colors وستشاهد
من هنا يمكنك تعديل لوحات الألوان أو إنشاء جديدة. لتعديل لوحة ألوان، انقر عليها وقم بتغيير الألوان حسب رغبتك
لإنشاء لوحة ألوان جديدة انقر هنا
بمجرد الانتهاء من تغيير الألوان، حان الوقت الآن لتعيين لوحة الألوان كنافطة في إما سمتك النشطة أو القابلة للاختيار من قبل المستخدم. للقيام بذلك، انتقل إلى صفحة السمة وابحث هنا
إعدادات السمة
n
يمكن أن تحتوي سمات Discourse على إعدادات. تم تصميم هذه الإعدادات لتكون طريقة سهلة لك لتكوين سمة أو مكون سمة وفقًا لاحتياجاتك. على سبيل المثال، يحتوي مكون سمة Homepage Feature على بعض الإعدادات للسماح بالتحكم في المواضيع المميزة:
لا تحتوي جميع السمات / مكونات السمة على إعدادات، ولكن بالنسبة لتلك التي تحتوي، ستظهر دائمًا هنا. ستشمل الإعدادات عادةً تعليمات يقدمها المؤلف تساعدك في تحديد التغييرات التي يجب إجراؤها.
معاينة سمة
أحيانًا تحتاج إلى رؤية كيف تبدو سمة على موقعك قبل تطبيقها. يقدم Discourse طريقة سهلة لمعاينة السمات دون تعيينها كنافطة.
أثناء وجودك في صفحة سمة، انقر هنا
وسيفتح لسان جديد مع معاينة حية لكيفية ظهور السمة على موقعك. يمكنك التنقل إلى صفحات مختلفة ورؤية كيف يبدو كل شيء. أفضل جزء في معاينة سمة هو أنه يمكنك اختبار التغييرات مباشرة دون التسبب في أي مشاكل على موقعك في حال حدوث أي خطأ.
معلومات إضافية
الوضع الآمن
يحتوي Discourse على طريقة مدمجة لتجاوز السمة النشطة الحالية في حال حدوث خطأ. على سبيل المثال، قد يسبب خطأ JavaScript في كود المكون عدم عمل موقعك بشكل صحيح. لتجاوز السمة النشطة الحالية، قم بزيارة ببساطة
your.site.com/safe-mode
ستشاهد بعد ذلك
من هناك يمكنك تعطيل السمة النشطة الحالية، والتنقل إلى صفحة السمة وإما إصلاح المشكلة أو تعطيل السمة بشكل دائم.
الحصول على سمات جديدة
أبسط طريقة للعثور على سمات ومكونات سمة جديدة هي التحقق من فئة Customization > Theme و Customization > Theme component هنا على 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!
إذا كان لديك أي أسئلة، لا تتردد في السؤال.