مكون Nav Button Highlighter - يعمل الآن

مكون السمة
1

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

الهدف من المكون هو مساعدتك في تمييز المسار الذي تريد أن يسلكه المستخدمون تحديدًا.

الرابط: https://github.com/focallocal/nav-buttons-highlighter

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

سطح المكتب:

image
image1471×247 31.4 KB

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

image
image763×261 25.8 KB

image
image760×546 27.2 KB

مُبرِز أزرار التنقل (Nav Buttons Highlighter)

مكون سمة (Theme Component) لمنصة ديسكورس (Discourse) يقوم بتمييز أزرار التنقل لتوجيه المستخدمين نحو مسارات أو وظائف محددة تريدهم أن يتبعوها، ويجعل زر القائمة المنسدلة للهاتف المحمول أكثر وضوحًا وظهورًا.

الغرض

يساعدك هذا المكون على:

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

الميزات

  • تصميم أنيق للأزرار بألوان صلبة وتأثيرات تمرير (hover effects)
  • قابل للتكوين من قبل المسؤول - لا حاجة لتعديل CSS
  • دعم لما يصل إلى 3 أزرار تنقل مخصصة
  • متجاوب مع الهاتف المحمول - يتضمن تمييز زر القائمة المنسدلة للهاتف المحمول
  • مُعد مسبقًا للمكون الإضافي للوحة كانبان (Discourse Kanban plugin) افتراضيًا
  • دعم محدد الألوان لتخصيص سهل

التكوين الافتراضي

افتراضيًا، تم إعداد هذا المكون لتمييز المكون الإضافي للوحة كانبان (Discourse Kanban) (الرابط) باللون الأزرق (#4285F4).

التثبيت

  1. في وحدة تحكم مسؤول ديسكورس (Discourse Admin console)، انتقل إلى تخصيص ← سمات ← مكونات (Customize → Themes → Components) وانقر على تثبيت (Install)
  2. انسخ من رابط مستودع Git والصق:
    https://github.com/focallocal/nav-buttons-highlighter
  3. بمجرد التثبيت، أضف المكون إلى السمة النشطة لديك.

كيفية التخصيص

لوحة إعدادات المسؤول

يتم إجراء جميع التكوينات من خلال إعدادات المسؤول البسيطة - لا حاجة لتعديل CSS!

للتكوين:

  1. انتقل إلى مسؤول ← تخصيص ← سمات (Admin → Customize → Themes)
  2. انقر على السمة النشطة لديك
  3. ابحث عن مُبرِز أزرار التنقل (Nav Buttons Highlighter) في قسم المكونات المضمنة (Included Components)
  4. انقر على الإعدادات (Settings)

الإعدادات المتاحة:

الزر 1 - كانبان (افتراضي):

  • تمييز كانبان (Highlight Kanban): تبديل التشغيل/الإيقاف (الافتراضي: تشغيل)
  • لون كانبان (Kanban Color): محدد الألوان (الافتراضي: أزرق #4285F4)
  • محدد كانبان (Kanban Selector): محدد CSS (الافتراضي: a.kanban-nav)

الزر 2 - مخصص:

  • تمييز الزر 2 (Highlight Button 2): تمكين الزر الثاني (الافتراضي: إيقاف)
  • لون الزر 2 (Button 2 Color): محدد الألوان (الافتراضي: أخضر #4CAF50)
  • محدد الزر 2 (Button 2 Selector): أدخل محدد CSS الخاص بك (على سبيل المثال، a[href='/page'])

الزر 3 - مخصص:

  • تمييز الزر 3 (Highlight Button 3): تمكين الزر الثالث (الافتراضي: إيقاف)
  • لون الزر 3 (Button 3 Color): محدد الألوان (الافتراضي: برتقالي #FF5722)
  • محدد الزر 3 (Button 3 Selector): أدخل محدد CSS الخاص بك

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

  • تمييز القائمة المنسدلة للهاتف المحمول (Highlight Mobile Dropdown): تبديل القائمة المنسدلة “الأحدث” للهاتف المحمول (الافتراضي: تشغيل)
  • لون القائمة المنسدلة للهاتف المحمول (Mobile Dropdown Color): محدد الألوان (الافتراضي: أزرق #4285F4)

العثور على محددات CSS:

لتسليط الضوء على روابط التنقل المختلفة، تحتاج إلى محدد CSS الخاص بها:

  1. افتح المنتدى الخاص بك في متصفح
  2. انقر بزر الماوس الأيمن على الرابط الذي تريد تمييزه
  3. اختر “فحص العنصر” (Inspect Element)
  4. ابحث عن وسم <a> وقم بتدوين:
    • أسماء الفئات: class="kanban-nav" ← استخدم: a.kanban-nav
    • قيمة Href: href="/c/support" ← استخدم: a[href="/c/support"]

أمثلة شائعة:

  • مكون كانبان: a.kanban-nav
  • فئة الدعم: a[href="/c/support"]
  • وسم الوثائق: a[href="/tags/documentation"]
  • صفحة مخصصة: a[href="/my-page"]
  • زر التنقل الثاني: #navigation-bar > li:nth-child(2) > a

اختيار اللون:

استخدم رموز ألوان السداسي العشري (Hex color codes) (على سبيل المثال، #4285F4 للأزرق). يقوم المكون تلقائيًا بإنشاء:

  • درجة أفتح للتدرج اللوني العلوي (top of gradient)
  • درجة أغمق للأسفل/الظل (bottom/shadow)
  • ألوان حالة التمرير والتفعيل (hover and active state colors)

الألوان الشائعة:

  • أزرق: #4285F4 (افتراضي)
  • أخضر: #4CAF50
  • أحمر: #F44336
  • برتقالي: #FF9800
  • بنفسجي: #9C27B0

إصدار CSS فقط المستقر

إذا كنت تفضل التعديل المباشر لـ CSS، فإن الإصدار السابق (2.0.1) متاح:

تثبيت إصدار CSS فقط:

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

راجع ملف README في ذلك الفرع للحصول على إرشادات تعديل CSS.

التطوير

يحتوي هذا المستودع على:

  • common/common.scss — جميع أنماط الأزرار ودليل التخصيص المفصل
  • assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — مُهيئ الحد الأدنى (مطلوب لـ Discourse)
  • about.json — بيانات وصف المكون

استكشاف الأخطاء وإصلاحها

س: التغييرات لا تظهر
ج: بعد التعديل، انقر على “حفظ” (Save) وقم بتحديث صفحة المنتدى بشكل صارم (Ctrl+F5 أو Cmd+Shift+R).

س: أريد تمييز عدة أزرار
ج: انسخ كتلة CSS الزر بأكملها والصقها أسفل قاعدة CSS الحالية، ثم قم بتغيير المحدد واختياريًا الألوان.

الترخيص

MIT — حركة السعادة العامة (Public Happiness Movement)

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

ما كل علامات Markdown الغريبة هذه؟

هل تم وضع علامة للانتقال إلى #theme-component؟

3

شكرا. لقد قمت بالنسخ واللصق مباشرة من ملف README الخاص بـ Github. لقد كنت أقوم بتحديثه منذ النقر على نشر.

هل قمت بوضع علامة لنقله إلى مكون سمة؟

لا، أردت الحصول على ملاحظات والتحقق من أن كل شيء على ما يرام أولاً.

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

لقد واجهت مشكلة غريبة حيث قام Discourse بتخزين ملف مؤقتًا، أعتقد أنه كان ملف about.json، وكل تعديل قمت به عليه فشل في التحديث أو إعادة التثبيت. استغرق الأمر وقتًا طويلاً لمعرفة سبب عدم تمكني من بناء أي تغيير على الإطلاق.

هل هناك طريقة أفضل لاختبار مكون بدلاً من الموقع المباشر؟

5

@Drew-ART هل اطلعت على https://meta.discourse.org/t/objects-type-for-theme-setting/305009؟ ربما يمكن استخدامه بعد ذلك لإضافة العديد من قواعد CSS، ربما باستخدام التداخل لإضافة أشياء مثل لون الخلفية والحشو لكل قاعدة. يحتوي SCSS على حلقة each قد تتمكن من استخدامها.

ربما يساعد هذا؟

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

شكرًا لـ @NateDhaliwal. كان هذا هو نهجي الأصلي ولكني واجهت خطأ 500 المذكور أعلاه ولم أستطع تجاوزه لفترة طويلة، لذلك عدت إلى نهج CSS فقط.

قد أعود إلى تلك المحاولة المهجورة وأرى ما إذا كانت ستُحمّل الآن بعد أن أعتقد أنني أصبحت أفهم خطأ 500. سأجرب ذلك.

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

لا، لا يمكنني تشغيل ذلك على الإطلاق.

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

9

حسنًا، لقد جعلت قسم المسؤول يعمل باستخدام إعدادات النص/المنطقي البسيطة.

وجدت صعوبة في جعل نوع الكائنات يعمل مع تحليل SCSS، وأي شخص يمكنه شرح سبب عدم عمل الفرع أعلاه، ولكن يمكن لأي شخص يريد استخدامه الآن تخصيص إعداداته في قسم مسؤول المكون الآن.

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

حسنًا، أعتقد أنني وجدت مشكلة SCSS.

وجدت هذه في مكون الدوامة (carousel component) الخاص بـ @NateDhaliwal:
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

الإعدادات (settings.yml):

pagination_button_color:
  type: string
  default: ""

لأي شخص آخر يواجه صعوبة:

  • حقن خصائص CSS المخصصة باستخدام صيغة #{$var}
  • ثم استخدم متغيرات CSS هذه في مكان آخر ليتمكن Swiper library من قراءتها

هذا يعمل لأن:

  1. يمكن استيفاء متغيرات الإعدادات باستخدام #{}
  2. تقبل خصائص CSS المخصصة قيمًا نصية
  3. التصميم الفعلي يستخدم متغيرات CSS، وليس دوال SCSS

سأقوم بتحديث هذا المكون الإضافي (plugin) بالإصدار الأحدث قريبًا.

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