فئات رأس الصفحة شريط التنقل

|||
|-|-|-|
| :discourse2: | ملخص | Header Categories Navbar هو مكون بسيط يضيف قائمة بروابط الفئات الرئيسية إلى رأس الموقع، مع تفعيل التمرير الأفقي إذا لزم الأمر. |
| :eyeglasses:|معاينة| معاينة على Theme Creator |
| : hammer_and_wrench:|المستودع| https://github.com/discourse/discourse-categories-navbar |
| : question:|دليل التثبيت|كيفية تثبيت سمة أو مكون سمة|
| : open_book:|جديد في سمات Discourse؟| دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

الميزات

يضيف مكون السمة هذا قائمة بروابط الفئات الرئيسية إلى رأس الموقع:

الإعدادات

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

:discourse2: مستضاف من قبلنا؟ مكونات السمة متاحة للاستخدام على خططنا القياسية، والأعمال، والمؤسسات.

20 إعجابًا

هذا رائع حقًا - أحببته يا كريس! سيتحد مع sidebar بشكل جميل، مما يسمح بوضع القطط الأساسية في الأعلى واختيار شخصي قصير في الشريط.

لقد لاحظت مشكلتين صغيرتين في تجربة المستخدم يمكن أن تحدثا فرقًا كبيرًا إذا تم معالجتهما:

تجربة المستخدم: تمييز اختيار الفئة

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

ومع ذلك، لا يستمر هذا إذا تم الدخول إلى موضوع أو فئة فرعية.

سيكون من الرائع لو استمر في كلتا الحالتين.

تجربة المستخدم: التمرير / تجاوز المحتوى على الهاتف المحمول

هناك تلاشي لطيف / سهم دقيق مرئي عندما يكون هناك تجاوز للمحتوى في الفئات على سطح المكتب.

من المرجح أن يحدث تجاوز المحتوى على الهاتف المحمول، ولكن على جهازي (Chrome / Android) هذه الإشارات الدقيقة غير موجودة - وليس من الواضح أن التمرير ممكن.

قد يساعد أيضًا في جعل شريط الفئات أطول قليلاً على الهاتف المحمول لتسهيل التمرير.

6 إعجابات

هناك مشكلتان أخريان في تجربة المستخدم تنطبقان بشكل أساسي على الهاتف المحمول:

تضارب مسار التنقل للموضوع على الهاتف المحمول

في طرق عرض المواضيع على الهاتف المحمول، يتضارب التنقل في مسار التنقل مع شريط التنقل للفئات:

الفئة المميزة ليست في العرض

أيضًا، لا يتم تمرير الفئة المحددة تلقائيًا - هذا يعني أنها ليست واضحة إلا إذا قام المستخدم بالتمرير في شريط التنقل. هذا أمر حيوي حقًا.

سطح المكتب فقط؟

أتساءل عما إذا لم يكن جاهزًا للهاتف المحمول بعد، وسيكون من المفيد جدًا وجود إعداد لتطبيقه على سطح المكتب فقط (على الأقل في الوقت الحالي).

4 إعجابات

شكرا على الملاحظات السريعة! لقد قمت بدمج بعض التحديثات التي يجب أن تعالج هذه الأمور.

3 إعجابات

رائع - يسعدني جدًا تقديم ملاحظات عندما يتم الاستماع إليها! لاحظت أنكم اضطررتم إلى إجراء العديد من الإضافات عليها.

سأعتبر ذلك بمثابة هدية عيد ميلاد صغيرة لطيفة لبعضنا البعض.

لقد أصلحت هذا عندما تم الدخول إلى فئة فرعية - رائع!

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

أيضًا، عندما أدخل صفحة أخرى (مثل /admin)، تظل الفئة محددة. سيكون من الأفضل عدم تحديد أي فئة في هذه الحالة.

أرى التلاشي على الهاتف المحمول الآن، ولكن ليس سهمًا / شيفرون. إذا أمكن، سيكون هذا مفيدًا للغاية لأن التلاشي دقيق للغاية:

سطح المكتب: image

الهاتف المحمول: image

الطلب #1 - تجربة المستخدم

إخفاء شريط التنقل عند التمرير في موضوع. كل شيء يصبح مزدحمًا بعض الشيء!
image

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

الطلب #2 - ميزة

هل يمكنك من فضلك إضافة فئة CSS لكل شريط تنقل حتى يسهل إخفاء بعضها إذا لزم الأمر؟

أسأل لأن لديّ فئتين (خاصتين) رئيسيتين وهما فقط رئيسيتان لتمكين الفئات الفرعية، وهما تزدحمان التنقل العام بطريقة غير مرغوب فيها.

لقد أخفيت هذه الآن باستخدام رابط href الخاص بها، ولكن هذا بالطبع محفوف بالمخاطر!

الطلب #3 - تجربة المستخدم

خيار لفرز فئات الشريط الجانبي أبجديًا.

بينما أقوم بتطبيق هذا، قمت بإزالة الفئات الرئيسية من قائمة فئات الشريط الجانبي الافتراضية. هذا يعني أن المستخدمين لدي لديهم الآن مجرد قائمة من 1-5 فئات فرعية ذات صلة بهم.

ومع ذلك، فهي مشوشة قليلاً وفي غير ترتيب منطقي لأن الترتيب في / Categories للفئات الفرعية لا يبدو منطقيًا حقًا. سيكون من المفيد جدًا أن تكون هذه الفئات الفرعية أبجدية للمساعدة في ذلك!!

4 إعجابات

الألوان ليست دقيقة عند الاختيار

  • لوحات الألوان الافتراضية الفاتحة والداكنة

أفكار؟

3 إعجابات

شكرا للإبلاغ! هذا يجب أن يصلحه:

إعجابَين (2)

يعمل بشكل مثالي. شكرًا!

إعجابَين (2)

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

تمكين هذا المكون يشوه عرض المحتوى.
إليك فيديو:


للكشف عن خطأ، تحتاج إلى النقر على أي مشاركة من صفحة أحدث المشاركات /latest، ستفتح المشاركة في الوضع القياسي، ثم تحتاج إلى العودة إلى صفحة أحدث المشاركات.

إعجاب واحد (1)

@Aizada_M - لا يمكنني تكرار هذا. هل يحدث هذا لك عند المعاينة من المكون؟

إعجابَين (2)

تحياتي! آسف على الرد الطويل :raised_hands:
لم أستخدم المعاينة، لقد اختبرتها مع تمكين المكون.

إعجاب واحد (1)

يعمل هذا بنسبة 100% من الوقت عند النقر على اسم الفئة تحت عنوان الموضوع.

إعجاب واحد (1)

لقد لاحظت أن النص في شريط التنقل للفئات الرئيسية قد تغير فجأة إلى font-up-1 (بينما أعتقد أنه كان font-down-1 من قبل). هذا مزعج وغير سار للغاية، لأنه هو نفسه مثل جميع أقراص التنقل الأخرى.

لقد تجاوزت ذلك باستخدام CSS التالي، وهو أكثر إرضاءً بكثير:

// fixes text size of header navbar
.custom-categories-navbar .nav-pills > li > a {
    font-size: var(--font-0);
}

أفضل font-0 في الواقع لأنه مختلف بما فيه الكفاية وأسهل قليلاً في الاستخدام.

إعجاب واحد (1)

لم يتغير الـ CSS الأساسي، والمكون لا يحدد حجم الخط. :thinking:
ربما كان لديك CSS مخصص من قبل؟

إعجابَين (2)

تم تقسيم 4 مشاركات إلى موضوع جديد: Broken mobile styling of Header Categories Navbar

أحببت هذا الـ TC، شكرًا لك! سيكون من الرائع تخصيص العناصر التي تظهر وتلك التي لا تظهر!

3 إعجابات

أحببته ولكن يبدو أن مكون السمة معطل في أحدث إصدار من discourse

تحرير: إنه يعمل بشكل جيد، ولكن كان يجب تعطيل أيقونات “الدردشة” و “تبديل الوضع الداكن/الفاتح” في الرأس

إعجابَين (2)

يعمل معي مع تفعيل الدردشة :slight_smile:

3 إعجابات

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

.d-header #site-logo {
max-height: 30px;
}

إعجابَين (2)

مرحباً، لقد رأيت للتو خطأً، يمكنك تكراره على النحو التالي. على الهاتف المحمول:

1- انقر على إحدى الفئات في الرأس
2 - انقر على إحدى المشاركات في الفئة وقم بالتمرير إلى النهاية
3 - انقر على نفس الفئة في الرأس

سيختفي رأس الفئة بأكمله. لقد جربته للتو على منتدى الخاص بي وعلى العرض التوضيحي

تحرير:
الأمر نفسه ينطبق إذا ذهبت إلى فئة وقمت بتحديث (f5) الصفحة. ستختفي جميع الفئات.

تحرير:
هل هناك أي حل لذلك؟ شكرًا

4 إعجابات