لافتات الفئة

[Discourse]

	ملخص	يستخدم Category Banners تفاصيل التصنيفات الموجودة لإنشاء لافتات لصفحات التصنيفات الخاصة بك (بالنسبة للوسوم، راجع Discourse Tag Banners).
	معاينة	معاينة في منشئ مواضيع Discourse
	رابط المستودع	https://github.com/discourse/discourse-category-banners
	جديد في مواضيع Discourse؟	دليل المبتدئين لاستخدام مواضيع Discourse

تثبيت مكون هذا المظهر

بما أن هذا مكون مظهر رسمي (official) تُعتنى به فريق Discourse، فيمكن تقديم طلبات للدعم (Support)، وإبلاغ عن الأخطاء (bug)، وتحسينات تجربة المستخدم (ux)، وميزات جديدة (#feature) في الفئات المقابلة هنا على Meta، مع وسمها بوسم مكون المظهر المناسب. انقر على أحد الروابط أدناه لبدء واحد منها.

 الدعم  خطأ  تجربة المستخدم  ميزة

الميزات

يستخدم Category Banners تفاصيل التصنيفات الموجودة لإنشاء لافتات لصفحات التصنيفات الخاصة بك. يستخدم اسم التصنيف ووصفه ولونه لتوليد لافتة في أعلى صفحات التصنيف ذات الصلة (بالنسبة للوسوم، راجع Discourse Tag Banners).

يُعرّف وصف التصنيف بواسطة الفقرة الأولى في موضوع “تعريف التصنيف لـ…” الخاص بكل تصنيف. تُحدَّد ألوان خلفية/نص اللافتة من خلال إعدادات شارة التصنيف الخاصة بك.

بشكل افتراضي، سيظهر هذا على سطح المكتب والجوال عبر جميع صفحات التصنيفات والتصنيفات الفرعية، لكنه لن يظهر إذا لم تكن قد منحت تصنيفك وصفًا.

الإعدادات

يأتي هذا المكون مع خيارات لتجاوز الافتراضيات:

الاسم	الوصف
show description	إظهار الوصف من منشئ “حول هذا التصنيف”
show mobile	إظهار اللافتات على الجوال
show subcategory	إظهار اللافتات للتصنيفات الفرعية
hide if no description	إخفاء اللافتات إذا لم يتم تعيين وصف التصنيف
show category logo	إظهار شعار التصنيف
align text	محاذاة النص
exceptions	لن تظهر اللافتة لهذه أسماء التصنيفات
categories	التصنيفات التي سيظهر لها لافتة
plugin outlet	يغير موضع اللافتة على الصفحة
show category icon	إظهار أيقونة التصنيف أو الرموز التعبيرية من إعدادات التصنيف *
override category icon color	عند استخدام أيقونات التصنيف، فإن تمكين هذا سيجعل الأيقونة تطابق لون نص اللافتة

• ملاحظة: يشير هذا الإعداد الآن إلى أيقونة التصنيف أو الرموز التعبيرية المحددة في إعدادات التصنيف، وليس مكون مظهر أيقونات التصنيفات (الذي تم إهماله لصالح الميزة الأساسية).

ملاحظات التخصيص

إذا كنت ترغب في تخصيص هذه اللافتات باستخدام بعض CSS إضافي، يمكنك استهداف رؤوس تصنيفات محددة باستخدام هذا الهيكل (مثال: example-category هو اسم تصنيفك):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

يضيف هذا المكون أيضًا الفئة category-header إلى وسم الجسم كهدف CSS إضافي.

مُستضاف لدينا؟ مكونات المظاهر متاحة للاستخدام في خططنا القياسية، والتجارية، والمؤسسية.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

مرحبًا، وشكرًا لك على هذا المكون الخاص بالقالب!

لقد جربت للتو تثبيته، متبعًا هذا الدليل التعليمي (نفذت نفس الخطوات بالضبط) لتجربة مكون أشرطة التصنيف، لكن لا يحدث شيء. لا يظهر أي شريط في أي من التصنيفات. هل هناك أي شيء قد يكون قمت به يمنع عمله؟ التفسير الوحيد الذي أراه هو أن تحذير “bootstrap” يعيق عمله؟

[simon]

@Vanecx

لا توجد لافتة في أي من الفئات. هل هناك أي شيء قمت به قد يمنع عملها؟

بشكل افتراضي، لا يعرض مكون المظهر لافتات الفئات إذا لم قمت بتعيين وصف للفئة. يمكن تغيير ذلك عن طريق إلغاء تحديد مربع الاختيار “إخفاء اللافتات إذا لم يتم تعيين وصف للفئة”.

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

[Vanecx]

شكرًا لك على إجابتي. لقد قمت بالتحقق وأؤكد أن كل فئة في المنتدى تحتوي على وصف. خيار “إخفاء اللافتات…” غير محدد الآن للتأكد من ذلك، لكن لا يوجد أي تغيير.

كما ترون في الصور، يبدو كل شيء طبيعيًا في الإعدادات:

لا أعرف ما إذا كان لهذا أي علاقة بالمشكلة، لكنني أبلغك فقط بأنه تثبيت لـ Discourse على مثيل Yunohost.

[downey (Michael Downey)]

هل يوجد شخص غيري يعتقد أنه سيكون من الجيد تمكين نفس التنسيق في صفحات قائمة المجموعات (مثل /g/foo) أيضًا؟ للأسف، لا يتطابق التنسيق (CSS) تمامًا، وأظن أن الأمر سيتطلب معالجة إضافية للأزرار المختلفة على الجانب الأيمن من اسم المجموعة، أي: طلب رسالة حذف

قد يساهم ذلك بشكل كبير في تحقيق مظهر متناسق، ويجعل المجموعات تبدو وكأنها “مواطن من الدرجة الأولى” ضمن واجهة المستخدم. (رأيي الشخصي)

[jord8on (Jordan)]

أنا أحب هذه لافتات التصنيفات! شكرًا لك على إنشاء هذا المكون للقالب!

أود حقًا أن تظهر هذه اللافتة في الصفحة الرئيسية الرئيسية لمنتدياتنا حيث تعرض:

• مناقشات “الأحدث” أو
• مناقشات “الأعلى” أو
• “التصنيفات” أو
• “المتابعة” (إذا كنت تستخدم إضافة المتابعة )

هل توجد طريقة سهلة (نسبيًا) لإظهار لافتة عندما يختار المستخدم أيًا من هذه الخيارات، وفقًا لما تم اختياره؟

[Rhidian (Rhidian Bramley)]

@awesomerobot ، آمل أن تكون على ما يرام معي في مشاركة هذا هنا…

لقد قمت بإنشاء نسخة مشتقة من موضوع discourse-category-banners يُدعى

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

يمكنك معاينته هنا

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

يقوم تقريبًا بنفس الشيء ولكن مع بعض التعديلات:

• يُعرض صندوق شريط التصنيف مدمجًا فوق العنوان الرئيسي بدلاً من عرضه بعرض كامل في الأعلى. وهذا يسمح بعرض موضوع شريط في الأعلى، على سبيل المثال discourse-versatile-banner.

• يُعرض صندوق شريط التصنيف بنفس أسلوب صناديق التصنيفات الفرعية الأصلية في discourse، وهي مكون أساسي في discourse. تُعد هذه الصناديق خيار عرض في إعدادات التصنيف في discourse إظهار قائمة التصنيفات الفرعية فوق المواضيع في هذا التصنيف. يعرض هذا الخيار اسم التصنيف الفرعي ووصفه كصف أو صندوق فوق قائمة المواضيع، باستخدام لون خلفية التصنيف كحد أيسر.

• إذا كان التصنيف تصنيفًا فرعيًا، فسيتم عرض اسم التصنيف كخريطة تنقل على النحو التالي - اسم التصنيف الأب: اسم التصنيف الفرعي

لقطة شاشة توضيحية لصندوق شريط الموضوع للتصنيف، فوق صناديق التصنيفات الفرعية الأصلية.

لقطة شاشة للتصنيف الفرعي، تُظهر مرجع الخريطة التنقلية للتصنيف الأب.

هذه هي محاولتي الأولى في تعديل موضوع. آمل أن يكون هذا مفيدًا؟

تحديث

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

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

الاستثناءات: إذا لم ترغب في أن يكون للفئة لافتة، أضف اسمها هنا

هذا لا يعمل لدينا. جربت كلاً من رابط الفئة ومعرف الفئة، لكن اللافتة لا تزال ثابتة هناك. هل يعمل هذا لدى أي شخص آخر؟

[awesomerobot (Kris)]

لقد جربته للتو وهو يعمل لدي، حيث يبحث عن اسم الفئة حساس لحالة الأحرف name. عند التفكير في الأمر، لم يكن هذا أفضل طريقة لتنفيذه… ربما يمكنني تحسين ذلك.

[nathank (Nathan Kershaw)]

آه - هذا النوع مناسب لي! وقد ذكرت بالفعل ‘الاسم’ في الدليل أعلاه - لم أقرأ ذلك فحسب.

الاسم ليس بديهيًا جدًا لأننا لا نستخدمه حقًا لأي شيء آخر. لكنه يُعرض بكثرة. مجرد جعله أكثر وضوحًا في الإعدادات سيكون جيدًا على ما أعتقد.

[AntiMetaman]

بدلاً من إضافة استثناءات تحدد الفئات التي لن تعرض لافتة مُحمَّلة معينة، ألا يمكننا ببساطة تحديد الفئة التي يجب أن تعرض كل لافتة؟

[awesomerobot (Kris)]

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

إذا كنت ترغب في تطبيق لافتة لعدد قليل من الفئات، فقد تكون هناك خيار أفضل لمكون التصميم مصمم ليكون أقل عمومية وتغطية شاملة، مثل Versatile Banner أو تخصيص أحد الخيارات الموجودة في https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

سيكون رائعًا لو أمكن رفع صورة لاستبدال النص.

[oca]

شكرًا لك على هذا المكوّن المفيد جدًا!

هل من الممكن إضافة ميزة صغيرة؟

• أضف فئة restricted إلى عنصر <span.discourse-category-banners> أو <div.category-title-header> عندما لا تكون الفئة عامة، تمامًا كما هو الحال مع شارة الفئة.

سيكون ذلك مفيدًا لتعديل الشريط باستخدام CSS إضافي لإظهار للمستخدم أن هذه الفئة خاصة.

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

لا أعرف حقًا كيفية تقديم طلبات السحب (PRs) بعد، لكن سأستخدم هذا كسبب جيد لتعلم ذلك إذا كنت مستعدًا لتعديلاتي.

[Drew-ART (Drew)]

هل يمكن جعل هذا يعمل على صفحات الوسوم؟ لقد وجدت إضافة لافتات الوسوم، لكنها لا تتيح إضافة نصوص أو روابط إليها.