يمكن استخدام سمات Discourse (Discourse Themes) ومكونات السمات (Theme Components) لتخصيص مظهر وشعور ووظائف الواجهة الأمامية لـ Discourse. يهدف هذا القسم من أدلة المطورين إلى توفير جميع المواد المرجعية التي تحتاجها لتطوير سمات بسيطة لموقع واحد، وصولاً إلى مكونات السمات المعقدة مفتوحة المصدر.
يهدف هذا التمهيد إلى توفير خريطة لجميع الأدوات وواجهات برمجة التطبيقات (APIs) لتطوير السمات. إذا كنت تفضل برنامجًا تعليميًا خطوة بخطوة لتطوير السمات، انتقل مباشرة إلى:
السمات مقابل مكونات السمات
يمكن استخدام سمات Discourse لتخصيص تجربة المستخدم في الواجهة الأمامية باستخدام CSS و JavaScript. يمتلك كل سمة مستودع Git خاص بها، ويمكن لمديري المجتمع بشكل عام تثبيتها وإدارتها عبر لوحة تحكم مسؤول Discourse، حتى على منصات الاستضافة المشتركة.
مكونات السمات هي سمات مخصصة للاستخدام جنبًا إلى جنب مع مكونات السمات الأخرى، كجزء من سمة شاملة. من منظور التطوير، تعد مكونات السمات والسمات متطابقة تقريبًا. في هذه الأدلة، تُستخدم عبارة “السمة” و “مكون السمة” بالتبادل.
المتطلبات الأساسية
أولاً، تأكد من فهمك كيفية استخدام السمات ومكونات السمات الحالية في Discourse. يعد استخدام السمات الجاهزة أسرع وأسلم طريقة لتخصيص مجتمعك. إذا كنت بحاجة إلى المزيد، فقد حان الوقت للنظر في كتابة السمة الخاصة بك.
كجزء من بنية Discourse الشاملة، يتم بناء سمات Discourse باستخدام تقنيات HTML و CSS و JavaScript القياسية، وتستفيد من مفاهيم Ember لواجهات المستخدم الأكثر تقدمًا. تفترض هذه الأدلة المرجعية فهمًا أساسيًا لهذه التقنيات، وتربط بمراجع خارجية حيثما أمكن.
Discourse هو مشروع سريع التطور، وعلى هذا النحو، ستحتاج أي سمة مخصصة إلى صيانة بمرور الوقت. تأكد من مراعاة ذلك كجزء من عمليات التخطيط والتطوير الخاصة بك.
تبدو المستندات قديمة بعض الشيء في هذا الجزء.. (أيضًا api.modifyClass يشتكي من فقدان pluginId). كيف يمكنني تشغيل نص برمجي عند تحميل about-page؟ هذا لا يبدو أنه يعمل (لا توجد أخطاء على الرغم من ذلك). كانت لدي نتائج مختلطة مع بعض المكونات الأخرى. شكرًا.
<script type="text/discourse-plugin" version="0.11.1">
api.modifyClass("component:about-page", {
pluginId: 'discourse-about-theme',
didInsertElement() {
this._super(...arguments);
console.log("Welcome to the about page!");
}
});
</script>
مرحباً about-page أصبح الآن بصيغة .gjs مما يعني أيضاً أنه لم يعد قابلاً للتعديل بهذه الطريقة. إذا كنت ترغب في إجراء تغييرات، يجب عليك استخدام أحد الموصلات المتاحة في تلك الصفحة.
هل هذا الدليل دقيق بعد الآن؟ قرأت الدليل بأكمله لمحاولة إنشاء مكون سمة، ثم نظرت إلى مكونات السمات النموذجية ولم يستخدم أي منها التعليمات التي يفترض بها أن تستخدمها. على سبيل المثال، بالنظر إلى مكون سمة discourse-brand-header، يبدو أنه تمت إعادة هيكلته من استخدام أشياء مثل api.createwidget في header.html إلى استخدام رمز مختلف تمامًا مع initializers و Components وما إلى ذلك. رمز معقد للغاية. يتحدث الدليل عن استخدام واجهة برمجة تطبيقات API مع الأدوات (widgets)، ولكن هذا ليس ما تستخدمه أي من المكونات على الإطلاق. هل هناك دليل محدث أو شيء لاستخدامه بدلاً من ذلك؟
تعديل: يُفترض أن واجهة برمجة تطبيقات الأدوات (widgets API) ستختفي، ولكن هل هناك أي أدلة حول ما يجب استخدامه بدلاً من ذلك؟ يبدو أن الدليل بأكمله هنا يعتمد على رمز تم إيقافه؟
نعم، يبدو أن SCSS ذو صلة، ولكن بخلاف ذلك، يبدو أن جميع مكونات السمات النموذجية تستخدم المكونات وتمت إعادة هيكلتها إلى قاعدة تعليمات برمجية مختلفة تمامًا عما يتم تدريسه هنا. لقد مررت بجميع المكونات التي يربطون بها في قسم واجهة برمجة تطبيقات المكونات الإضافية، وتمت إعادة هيكلة كل منها بطريقة مختلفة تمامًا عما يتم تدريسه هنا في الدليل. لم تعد الأدوات تستخدم على الإطلاق. إنها كلها مكونات. هل يوجد دليل حول كيفية استخدام المكونات الجديدة بشكل صحيح حقًا مع اختفاء الأدوات؟
إذًا، صادفت هذا المنشور على سبيل المثال، للتو: Upcoming Header Changes - Preparing Themes and Plugins - فهل أعادوا هيكلة كل شيء من عناصر واجهة المستخدم القديمة إلى مكونات Glimmer؟ ولكن، هذا الدليل كله عناصر واجهة مستخدم قديمة. ما هي مكونات Glimmer بالضبط وهل هناك أي أدلة؟ أشعر أنني محظوظ لأنني اكتشفت هذا مبكرًا، قبل أن أبدأ في التطوير باستخدام عناصر واجهة المستخدم القديمة. ربما تضيف ملاحظة في هذا الدليل بأن عناصر واجهة المستخدم قديمة ولا ينبغي استخدامها بعد الآن؟
حسنًا، أرى أن Glimmer هي مكونات Ember جديدة. لكنني ألقيت نظرة على كود Discourse TOC ويا إلهي… ما كان يتكون سابقًا من 10 أسطر من التعليمات البرمجية أصبح الآن يتكون من مئات الأسطر عبر العديد من الملفات بفئات معقدة ومزخرفات وما إلى ذلك. أتوقع أن Ember مرت بلحظة React وقررت أن تجعل الأمور معقدة حقًا مرة أخرى. يبدو أن مكونات السمات لم تعد سهلة الآن، مع واجهة برمجة تطبيقات بسيطة للأدوات المصغرة، بل تتطلب ترميزًا مكثفًا…
@ddsgad نعم أنت على حق، معظم هذا الدليل قديم جدًا. لقد كنت أعمل على تحسينات عامة للوثائق مؤخرًا، وآمل أن يتم تحديث هذا الدليل/استبداله في الأسابيع القليلة القادمة.
كما ذكرت، يمكن أن تكون الأمثلة الواقعية مثل DiscoTOC مرجعًا جيدًا. وهنا بعض الأدلة المحددة الأكثر حداثة:
شكراً على تلك الروابط. مفيدة جداً. حالياً، نقوم بشكل أساسي بتخصيص الأشياء في موضوع نقاش (المنشور الأول) لإنشاء بعض التصاميم الأفضل، لذلك تمكنا من فعل كل شيء تقريباً باستخدام جافاسكريبت العادية (querySelectorAll وما إلى ذلك) و SCSS، لذلك أعتقد أننا سنلتزم بذلك في الوقت الحالي.
تم الآن استبدال البرنامج التعليمي الطويل والقديم في المنشور الأصلي بمعلومات تمهيدية/إرشادية عامة أكثر، بما في ذلك رابط إلى برنامج تعليمي جديد من 7 خطوات يتبع أنماط تطوير سمات أكثر حداثة.
