هل توجد "خريطة" للتصميم؟ (طريقة سهلة للعثور على منافذ الإضافات وما إلى ذلك)

لقد اطّلعت على أدلة المكونات الرائعة للإضافات والقوالب، ومع ذلك لا يزال الأمر محيرًا بعض الشيء بالنسبة لي حول كيفية العثور بسرعة على القوالب/المكونات/مخارج الإضافات التي أحتاجها.

فكرت في البدء بثلاث تعديلات بسيطة — وإذا أمكن لأي شخص أن يوجهني في الاتجاه الصحيح، فسيكون ذلك مساعدًا عظيمًا :blush:

أي قالب أو مكون أو مخرج إضافي أحتاج لتعديله لتحقيق التغييرات التالية؟

  1. وسوم <title> في <head> من HTML لصفحة عرض الموضوع (عند عرض موضوع). أحتاج إلى أن يظهر التغيير للروبوتات والبشر على حد سواء.
  2. ترميز صناديق التصنيفات أينما ظهرت. (هذه: لوحة التحكم > الإعدادات > نمط التصنيفات.)
  3. صفحة «عن» (أين يمكن تغيير المحتوى في كتل المشرفين والمشرفين العامين).

عند تصميم القوالب في برمجيات المنتديات الأخرى، عادةً ما يكون لديك قالب رئيسي يحتوي على مراجع لكل ما يُشكّل تلك الصفحة، مما يسهّل العثور بسرعة على القوالب التي تحتاج لتعديلها. على سبيل المثال، قد يكون هناك ملف/قالب forumdisplay (عرض التصنيف في ديسكورد) يحتوي على HTML الرئيسي ثم يستدعي جميع القوالب الأخرى. وآخر لصفحة showthread (أي صفحة عرض/مشاهدة الموضوع في ديسكورد)، وآخر لصفحة ملف العضو، وهكذا. تعمل هذه القوالب كقائمة أو خريطة توضح أين تجد ما تحتاجه. لذا، إذا أردت تعديل ترميز المنشورات الأساسي مثلًا، فستذهب إلى ملف/قالب showthread (أي عرض الموضوع) ثم تبحث خلاله وستلاحظ أنك تحتاج لتعديل أو البحث في قالب postbit.

هل لدينا شيء مشابه لذلك؟ وإذا لم يكن كذلك، هل يمكن للفريق النظر في إضافة شيء مماثل؟ سيكون ذلك مساعدًا هائلًا :slight_smile:

لقد رأيت ذلك (آسف، كان يجب أن أذكره!) وهو مفيد جدًا لمآخذ الإضافات الظاهرة، لكن ماذا عن القوالب/المكونات/الأدوات الصغيرة وما إلى ذلك؟ كيف تجدها بسرعة وسهولة يا روبرت؟ هل لديك أي فكرة عن مكان تلك المذكورة في المنشور الأول؟

نصيحتي دائمًا هي البدء ببساطة. ابدأ بمتطلب بسيط أولًا وابدأ في معرفة كيفية تنفيذه، ثم انتقل إلى التالي.

أما فيما يتعلق بالمواضيع (Themes)، فأود القول إن معظمها سيتضمن تعديلات على ملفات CSS. استخدم المصادر المعتادة. وفي الحالات التي لا تكفي فيها، ستحتاج إلى النظر في تعديل القوالب باستخدام jQuery، أو في حال الضرورة القصوى تجاوز القوالب. قم بإنشاء مكونات أو أدوات (widgets) خاصة بك لحالات الاستخدام غير التقليدية وقم بإرفاقها.

مصدر الكود هو دائمًا صديقك؛ تصفّح هيكل المجلدات في مستودع discourse/discourse على GitHub وستجد أجزاء التطبيق المختلفة مُرتّبة بوضوح. أعتقد أن القوالب هي الجانب الأسهل للفهم. وإذا لم تكن على دراية بهيكل مجلدات Ember، فقد حان الوقت لتتعرف عليه.

نعم، بالتأكيد. لقد كنت أقوم ببناء القوالب تقريبًا منذ وجود Discourse، وأنا أراجع كود المصدر باستمرار في نافذة منفصلة.

بشكل عام، بالنسبة للقوالب، تريد البحث هنا: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

وبالنسبة للودجات (widgets) هنا: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

أحيانًا لا يكون من الواضح على الفور مكان القالب، لأنه ربما يكون مكونًا مُضمّنًا داخل قالب آخر… إذا لم أستطع التذكّر، فإن ما سأنتهي بفعله هو البحث في الكود المصدر عن جزء محدد من الترميز…

على سبيل المثال، إذا كنت أبحث عن إضافة شيء ما إلى صفحة «عن الموقع»… يمكنني أن أرى أن جسم صفحة «عن الموقع» يحتوي على فئة فريدة هي about-page، لذا سأبدأ بالبحث عن about و body-page (وهي فئة أخرى في الصفحة).

للإجابة على بعض أسئلتك:

أعتقد أن هذا يتطلب إضافة (plugin)، وهو ما يقع خارج نطاق خبرتي… ربما يتمكن شخص آخر من المساعدة أكثر.

هناك قوالب مختلفة لترتيبات الصفحات المختلفة، ولكن بافتراض أنك تتحدث عن أحد تخطيطات “الصناديق مع…”

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

شكرًا لكما على الردود :slight_smile:

هذا ما كنت أظن أنني أفعله (أعتقد أنه لا يمكن أن يكون الأمر أبسط من تعديل وسوم العناوين). في برمجيات المنتديات الأخرى، كنت سأفتح ببساطة ملفًا أو قالبًا لصفحة ‘showthread’ وأعدّله، وهو ما كان سيستغرق أقل من دقيقة. وكنت لأحب أن يكون تخصيص تصميم Discourse بهذه السهولة (ومع ذلك، قد يكون عدم إلمامي حاليًا بتخصيص تصميم Discourse هو السبب في شعوري بالضياع).

هذا ما أعتقد أنني أحتاجه لجميع العناصر المذكورة في المنشور الأول، لأنها تتطلب تعديل محتوى موجود (بدلًا من الإضافة في نهاية أو بداية مكان محدد، وهو ما تبدو أن منافذ الإضافات plugin-outlets موجهة إليه).

أعتقد أن هذا قد يكون المشكلة هنا. أنا لا أعرف Ember، وربما يكون هذا هو ما يجعل الأمر يبدو غريبًا بعض الشيء. كنت لأحب أن يكون هناك شيء مثل (deprecated) Plugin outlet locations theme component لكن للقوالب وكل ما يمكن تخصيصه؛ سيكون ذلك عونًا كبيرًا.

لكن كيف تجد ما تحتاجه يا Kris؟

آه، شكرًا لك! هذه نصيحة ممتازة حقًا!

هل أنت متأكد يا Kris؟ كنت أظن أن الإضافات (أو منافذ الإضافات plugin-outlets) تسمح لك فقط بإضافة شيء ما في مكان ذلك المنفذ المحدد. أما لتغيير تنسيق وسوم العناوين، فقد أحتاج على الأرجح إلى فتح القالب الحالي (أو المكون أو الأداة) ونسخه/تعديله. على الأقل هذا ما فهمته بعد قراءتي للدليلين حول الإضافات وتخصيص التصاميم.

شكرًا لك! يبدو هذا هو القالب الذي أحتاجه :smiley:

شكرًا مجددًا، ههه! كلاهما يبدو الآن سهلًا نسبيًا في العثور عليه نظرًا لتسميتهما ولأنك أشرت إليهما. أعتقد أن تعثري في تغيير وسوم العناوين ربما كان عاملًا مؤثرًا :relaxed:

في الوقت الحالي، أشعر أنني أفتقد شيئًا ما، وكما أشار @merefield، قد يكون ذلك بسبب عدم إلمامي بـ Ember. هل يعرف أحد مقاطع فيديو على YouTube تشرح ذلك بسرعة؟ ربما يمكنك أنت أو @merefield صنع واحد؟ :blush:

إن Ember يستحق التعلم حقًا. إنه قوي جدًا، وقابل للتوسع، وسريع.

إن قراءة هذا ستساعدك على فهم كود المصدر بشكل أفضل:

اقرأ عن القوالب (Templates)، والخصائص المحسوبة (Computed Properties)، والموجه (Router)، والمكونات (Components).

إن Discourse لا يشبه تمامًا تطبيق Ember عادي، لكن الأدلة تساعد في أي حال.

نصيحة كبرى أخرى: حدد إضافة موجودة (جيدة) تحقق شيئًا مشابهًا لما تريد تحقيقه. انظر إلى الكود ونهجها.

شكرًا لك يا روبرت! إنه يقول إن إصدار الأدلة قديم - هل يستخدم Discourse هذا الإصدار أم يجب أن أقرأ أحدث إصدار، أدلة 3.15؟

اقرأ الإصدار 3.10 حاليًا. فهو الإصدار الذي يستخدمه Discourse حاليًا. إذا فتحت وحدة تحكم JavaScript، فستتمكن من رؤية إصداري Ember و jQuery اللذين يعمل بهما المثيل.

كما يرجى الانتباه إلى أن هناك أنماطًا مختلفة من تزيين الأكواد. لذا قد تختلف العناصر الموجودة في كود المصدر أحيانًا بشكل طفيف.

للأسف، هذا ليس هو المطلوب :–(

كما جربت هذه القوالب:

لقد أنشأت مكونًا للثيم وأضفت ما يلي إليه:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

لكن تغيير data-template-name مع كل هذه الأسماء لم يُحدث أي تأثير. (عندما قمت بتغييره إلى components/topic-list عمل بشكل صحيح.)

هل لديك أي أفكار حول مكان وجود هذا القالب؟

هذا ما أريد تعديله (عندما يتم عرض تنسيق box، من لوحة التحكم > الإعدادات > نمط التصنيف):

أي مساعدة ستكون موضع تقدير كبير.

إذن يبدو أن هذا غير ممكن مع مكونات السمة (theme components) حيث لا يبدو أن هناك أي قوالب/مكونات لهذا الغرض :sob:

يبدو أن وحدة Ruby هذه تقوم بحقن أنماط مضمنة: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

هل كان من المفترض أن تكون هذه إجراءً مؤقتًا؟ إذا لم يكن الأمر كذلك، هل تعتقد أنه سيكون من الممكن السماح لنا بتحديد أنماط مخصصة من فضلك @sam؟

يمكن ربطها بخيار none الحالي، حيث يمكننا أن يكون لدينا حقلان في لوحة إعدادات المسؤول يمكننا من خلالها لصق أنماطنا لكل منهما (إذا لم يتم لصق أي أنماط، فسيعمل تمامًا كما يعمل خيار none حاليًا):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

و

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="فئة حصرية للأعضاء بمستوى ثقة 3 وما فوق."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

من هذا المقطع:

سنحتاج فقط إلى الوصول إلى متغيرات لون الخلفية ولون النص من صفحة تعديل الفئة المعتادة.

أو هل هناك أي طريقة أخرى يمكننا من خلالها تعديل هذا يا سام؟ أريد فقط إزالة لون الخلفية ومنحها حدودًا بنفس لون النص (كما هو محدد في صفحة تعديل الفئة المعتادة).

أي مساعدة ستكون موضع تقدير كبير.

تعديل: يبدو أنها ليست ملف Ruby في الواقع (لقد قمت بتعديله في تثبيت التطوير الخاص بي لكن لم يتغير شيء).. مزيد من البحث ويبدو أنها هذه: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub هل هناك أي طريقة لإنشاء إضافة لتعديلها؟

ربما توجد طرق متعددة للقيام بذلك.

جرّب ما يلي:

  • تجاوز القالب الذي يستدعي ذلك المساعد
  • استبدله بمساعد خاص بك

القالب المعني: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

تجاوز القالب في هذا المستوى المنخفض من التسلسل الهرمي يحمل مخاطر نسبية منخفضة.

قد تكون طريقة أخرى هي استخدام jQuery داخل تجاوز لمكوّن topic-list-item لإجراء التعديلات التي تحتاجها.