إضافة ميزات شهيرة إلى Discourse: بحث في الرأس، لافتة الترحيب، وأيقونات التصنيفات / الرموز التعبيرية

[lindsey (Lindsey Fogle)]

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

البحث في الرأس

تنقل ميزة البحث في الرأس البحث من أيقونة العدسة المكبرة في الزاوية العلوية اليمنى إلى حقل إدخال أكثر بروزًا في رأس الموقع.

عند الحاجة إلى مساحة رأس أكبر (مثل عند التمرير في موضوع)، سيعود البحث إلى أيقونة العدسة المكبرة لتوفير المساحة.

لتشغيل البحث في الرأس…

1. في منطقة المسؤول، انتقل إلى Themes & components.
2. انقر فوق الزر Edit للسمة النشطة لديك.
3. ابحث عن الإعداد Search experience.
4. قم بتحديث هذا الإعداد إلى “Search field in site header”.
5. انقر فوق علامة الصح الخضراء للحفظ.

ميزة البحث في الرأس مقابل مكون البحث المتقدم في الرأس

تم استلهام البحث في الرأس من مكون البحث في الرأس، والذي أعدنا تسميته إلى Advanced Header Search للتمييز بينه وبين الميزة الأساسية.

يجب عليك استخدام مكون البحث المتقدم في الرأس عندما تحتاج إلى دعم عمليات البحث الخارجية (أي عمليات البحث خارج مجتمع Discourse الخاص بك). بخلاف ذلك، يمكنك استخدام ميزة البحث في الرأس التي أصبحت الآن جزءًا من Discourse الأساسي.

لافتة الترحيب

ترحب لافتة الترحيب بالأعضاء والزوار وتضيف شريط بحث بارزًا إلى قوائم الموضوعات الخاصة بك.

تتوافق لافتة الترحيب وميزات البحث في الرأس مع بعضها البعض بحيث يتم إخفاء البحث في الرأس أثناء ظهور لافتة الترحيب.

لتشغيل لافتة الترحيب…

1. في منطقة المسؤول، انتقل إلى Themes & components.
2. انقر فوق الزر Edit للسمة النشطة لديك.
3. ابحث عن الإعداد Enable welcome banner.
4. قم بتمكين هذا الإعداد.
5. انقر فوق علامة الصح الخضراء للحفظ.

لتخصيص الرسالة المعروضة على اللافتة، انتقل إلى منطقة Site Texts، وابحث عن “welcome_banner”. يمكنك تعديل سلاسل النصوص لتحية الأعضاء المسجلين، وتحية المستخدمين المجهولين، وحقل البحث.

لافتة الترحيب مقابل مكون لافتة البحث المتقدم

تم استلهام لافتة الترحيب من مكون لافتة البحث، والذي أعدنا تسميته إلى Advanced Search Banner للتمييز بينه وبين الميزة الأساسية.

يجب عليك استخدام مكون لافتة البحث المتقدم عندما تريد استخدام صور خلفية مخصصة للافتة، أو إدخال أسطر متعددة من النص في اللافتة، أو تغيير من يمكنه رؤية اللافتة (أي الأعضاء المسجلين، أو المستخدمين غير المسجلين، أو كليهما). بخلاف ذلك، يمكنك استخدام ميزة لافتة الترحيب التي أصبحت الآن جزءًا من Discourse الأساسي.

أيقونات وفئات الرموز التعبيرية

يمكنك الآن استخدام الأيقونات والرموز التعبيرية لتمييز الفئات، بدلاً من المربع الملون.

لاستخدام أيقونات / رموز تعبيرية للفئات…

1. عند إنشاء فئة أو تحريرها، قم بتغيير الإعداد Style إلى Icon أو Emoji.
2. اختر الأيقونة أو الرمز التعبيري الذي تريد استخدامه. سيحدد اللون لون الأيقونة (إذا تم استخدامه) ويؤثر على المناطق الأخرى التي يرتبط فيها اللون بالفئة، مثل صفحة /categories.
3. انقر فوق Save Category.

أيقونات وفئات الرموز التعبيرية مقابل مكون أيقونات الفئات

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

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

[AquaL1te]

أردت الانتقال إلى طريقة أيقونات الفئات الأصلية. لكنني لاحظت أن مكون السمة يحتوي على أيقونات أكثر بكثير. من بين جميع الأيقونات التي استخدمتها، تعمل الآن مجموعة فرعية صغيرة فقط مع أيقونات الفئات الأصلية. أفترض أن الفرق هو أن أحدهما يستخدم FontAwesome والآخر يستخدم الرموز التعبيرية؟ أنا أستخدم خيار “الأيقونات” بالفعل، ولكن عندما أبحث عنها، لا تظهر (بعد تعطيل مكون السمة لأيقونات الفئات).

مثال لما أستخدمه الآن:

[Arkshine]

يمكنك إضافة الأيقونات المفقودة إلى إعداد الموقع SVG icon subset.

[krystal (Krystal S)]

@lindsey

يجب عليك استخدام مكون البحث المتقدم في الرأس (Advanced Header Search) عندما تحتاج إلى دعم عمليات البحث الخارجية (أي عمليات البحث خارج مجتمع Discourse الخاص بك).

كيف يعمل هذا؟ هل هذا يعني أنه يمكنك البحث في مصادر خارجية أثناء تواجدك في Discourse؟ أم أن هذا يعني فقط البحث في Discourse من مصدر خارجي؟

[Heliosurge (Dan DeMontmorency)]

@lindsey

أيقونات الفئات والرموز التعبيرية

يمكنك الآن استخدام الأيقونات والرموز التعبيرية لتمييز الفئات، بدلاً من المربع الملون.

هذه إضافة رائعة جدًا! شكرًا لك! بالاقتران مع الرموز التعبيرية المخصصة، فإنها تضيف إمكانيات تخصيص رائعة!

[AquaL1te]

@lindsey

أيقونات الفئات والرموز التعبيرية

لا يزال هناك فرق، مع مكون السمة تحصل الفئات الفرعية على هذه اللمسة الجميلة:

هذا غير مرئي مع خيار أيقونة الفئة الأصلي. تختفي الأيقونة العلوية بعد ذلك.

[tomtjes (Thomas Reintjes)]

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

[Arkshine]

@AquaL1te

هذا غير مرئي مع خيار أيقونة الفئة الأصلية. تختفي الأيقونة العلوية بعد ذلك.

أعتقد أن هذا سيتم دعمه بمجرد دمج هذا الطلب:

FIX: add category badge style to category list

@tomtjes

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

يجب أن يكون ذلك ممكنًا باستخدام CSS.
يمكنك تعيين اللون الافتراضي لجميع الأيقونات، ثم، بناءً على فئة .anon (للمستخدمين غير المسجلين) واسم مجموعة المستخدم (انظر CSS Classes for Current User's Groups)، يمكنك إما إخفاء الأيقونة أو تغييرها إلى اللون الرمادي.

إذا كنت تستخدم الأيقونات فقط وتحتاج إلى خيار تسجيل الدخول، فلا بأس من الاستمرار في استخدام TC أيضًا.

[mcwumbly (Dave McClure)]

@tomtjes

أستخدم أيقونات الفئات للإشارة إلى ما إذا كانت الفئة عامة، أو مرئية للأعضاء المسجلين، أو مقتصرة على مجموعات معينة.

أعجبني هذا. أتساءل عما إذا كان ينبغي علينا اعتبار هذا مؤشرًا على شيء مفقود بشكل أساسي، بدلاً من تحميل هذا العبء على المسؤولين لحله باستخدام التخصيصات.

ذات صلة أيضًا: Allow users with access to a restricted category to see who else has access

[gooseegg]

مرحباً يا رفاق،

لقد قمنا مؤخرًا بترقية منتدى Discourse الخاص بنا (tw.forumosa.com)، ومع آخر تحديث، تمت إضافة رأس “مرحبًا بعودتك” الجديد وشريط البحث المتكامل إلى الصفحة الرئيسية. بينما يبدو الأمر جيدًا من حيث المفهوم، فقد لاحظنا بعض مشكلات قابلية الاستخدام - خاصة على الأجهزة المحمولة:

1. قد تكون قائمة البحث المنسدلة غير قابلة للقراءة بسبب الشفافية

عند النقر على أيقونة البحث في شريط التنقل العلوي (على نظام Android، على سبيل المثال)، تظهر القائمة المنسدلة ولكن لها خلفية شفافة، مما يجعل من المستحيل تقريبًا قراءة نتائج البحث فوق المحتوى الموجود خلفها. يجب أن يؤدي وجود خلفية صلبة إلى حل هذه المشكلة. لقد نشرت لقطات شاشة لما أعنيه أدناه.

2. الرأس طويل - كيف يمكننا ضبط التباعد الرأسي؟

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

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

هل واجه أي شخص هذا ووجد طريقة نظيفة لتجاوزها عبر CSS أو مكونات السمات؟

تحياتي!

[Arkshine]

تجدر الإشارة إلى أن لافتة التحديث تتكدس أعلاه أيضًا:

يبدو أن z-index على .welcome-banner (حالياً 1) يجب أن يكون على الأقل >= 3. (الرابط الرئيسي والبيانات الوصفية تستخدم z-index: 2)

[davidkingham]

@Arkshine

أعتقد أن هذا سيتم دعمه بمجرد دمج هذا الطلب:

أخشى أن الأمر لا يزال معطلاً

[David_Ghost]

تحتاج إلى إضافة الأيقونات في SVG icon subset، إذا لم يتم ذلك بالفعل

[davidkingham]

شكرًا لك، لكنني أفعل:

[lindsey (Lindsey Fogle)]

أي صفحة هذه؟

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

[maiki]

لقد حظيت بتجربة رائعة للتو: لقد تحولت إلى سمة Horizon لموقعي الشخصي، وقمت بتعيين أيقونات لفئاتي… من جهازي المحمول!

هذا أمر مذهل، وأنا أقدر الجهود المبذولة لجعل تجربة المسؤول سلسة للغاية.