كان عليّ إعادة بنائه كمكون CSS خالص حيث لم أتمكن من جعل إصدار JavaScript مستقرًا. الهدف هو مساعدتك في تسليط الضوء على مسار تريد من المستخدمين اتخاذه تحديدًا.
الرابط: https://github.com/focallocal/nav-buttons-highlighter
إليك كيفية تثبيته وتسليط الضوء على مكون Kanban الذي لن يعرف معظم المستخدمين على منصتي مكان العثور عليه بعد أن يكونوا أعضاء لشهور، خاصة أولئك الذين يستخدمون الهاتف المحمول في الغالب.
سطح المكتب:
الجوال:
Nav Buttons Highlighter
مكون سمة Discourse يسلط الضوء على أزرار التنقل لتوجيه المستخدمين نحو مسارات أو وظائف محددة تريدهم اتباعها، ويجعل قائمة التنقل المنسدلة للجوال أكثر وضوحًا ورؤية.
الغرض
يساعدك هذا المكون على:
- توجيه المستخدمين عن طريق تسليط الضوء على روابط التنقل المهمة (مثل لوحة المهام الخاصة بك، أو المستندات، أو الفئات الرئيسية).
- تحسين تجربة المستخدم على الجوال عن طريق جعل زر التنقل المنسدل يبرز.
- إنشاء تسلسل هرمي مرئي في شريط التنقل الخاص بك.
الميزات
- تصميم زر ثلاثي الأبعاد مع تدرجات وظلال وتأثيرات تحويم.
- متجاوب مع الجوال - يسلط الضوء على زر تبديل القائمة المنسدلة “الأحدث” على الجوال حتى يكون المستخدمون أكثر وضوحًا بشأن إمكانية/ضرورة النقر عليه.
- مهيأ مسبقًا لمكون Kanban الخاص بـ Discourse افتراضيًا.
- تنفيذ CSS فقط - موثوق وخفيف الوزن.
- سهل التخصيص.
التكوين الافتراضي
افتراضيًا، تم إعداد هذا المكون لتسليط الضوء على مكون Discourse Kanban [رابط](https://meta.discourse.org/t/kanban-board/) باللون الأزرق. ومع ذلك، يمكن تغييره بسهولة لتسليط الضوء على أي رابط تنقل تختاره بأي لون.
التثبيت
-
في لوحة تحكم مسؤول Discourse، انتقل إلى Customize Themes Components وانقر على Install.
-
انسخ من رابط مستودع Git والصق:
https://github.com/focallocal/nav-buttons-highlighter -
بمجرد التثبيت، أضف المكون إلى السمة النشطة الخاصة بك.
كيفية التخصيص
العثور على ملف CSS
لا توجد لوحة إعدادات للمسؤول لهذا المكون - يتم إجراء جميع التخصيصات عن طريق تحرير ملف CSS مباشرة في المستودع الخاص بك.
ملف CSS موجود في:
common/common.scss
كيفية تحريره:
الخيار 1: التحرير في GitHub (الأسهل)
- قم بعمل نسخة متفرعة (fork) من هذا المستودع وقم بتثبيتها.
- انتقل إلى
common/common.scss. - انقر على أيقونة القلم للتحرير.
- قم بإجراء تغييراتك وقم بتأكيدها (commit).
- في Discourse Admin → Customize → Components، انقر على “Check for Updates” لمكون Nav Buttons Highlighter.
الخيار 2: التحرير محليًا
- قم بنسخ المستودع إلى جهاز الكمبيوتر الخاص بك.
- قم بتحرير
common/common.scssفي أي محرر نصوص. - قم بتأكيد (commit) ودفع (push) تغييراتك.
- في Discourse Admin → Customize → Components، انقر على “Check for Updates”.
ملاحظات:
- يعمل هذا المكون على جميع السمات التي تم تمكينه فيها (غير مرتبط بسمة معينة).
- يحتوي ملف CSS على تعليقات مضمنة مفصلة تشرح بالضبط ما يجب تغييره.
- تتطلب التغييرات تحديث المكون في مسؤول Discourse بعد التحرير.
تعليقات ملف CSS تشرح:
- المحدد الذي يجب تغييره (مثل
a.kanban-nav) لتسليط الضوء على روابط مختلفة. - قيم الألوان التي يجب تحديثها للألوان المختلفة.
- كيفية إضافة/إزالة تسليط الضوء على القائمة المنسدلة للجوال.
أمثلة
تغيير اللون من الأزرق إلى الأخضر
يستخدم الزر ثلاثة ظلال من اللون الأزرق لإنشاء تأثير تدرج:
- أزرق فاتح:
#5ca3ff(أعلى التدرج) - أزرق متوسط:
#4285F4(وسط التدرج) - أزرق داكن:
#3a75e4(أسفل/ظل)
لتغييره إلى اللون الأخضر، ابحث عن هذه القيم واستبدلها في common/common.scss:
| الأزرق الحالي | استبدال بالأخضر |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
تسليط الضوء على رابط تنقل مختلف
استبدل المحدد a.kanban-nav بالرابط المستهدف الخاص بك:
أمثلة:
a[href=“/c/category-name”]- تسليط الضوء على فئة معينة.a[href=“/tags/tag-name”]- تسليط الضوء على علامة معينة.a[href=“/my-custom-page”]- تسليط الضوء على أي رابط مخصص.#navigation-bar > li:nth-child(2) > a- تسليط الضوء على زر التنقل الثاني.
كيفية العثور على المحدد:
- افتح المنتدى الخاص بك في متصفح.
- انقر بزر الماوس الأيمن على الرابط الذي تريد تسليط الضوء عليه.
- اختر “Inspect Element”.
- ابحث عن أسماء الفئات (مثل
class=“kanban-nav”) أو قيم href في HTML.
تعطيل تسليط الضوء على القائمة المنسدلة للجوال
ابحث عن القسم المسمى /* Latest dropdown button on mobile */ وقم بأحد الإجراءين التاليين:
- احذف القسم بأكمله، أو
- قم بالتعليق عليه عن طريق وضعه بين
/* … */.
تسليط الضوء على الروابط داخل القائمة المنسدلة للجوال
أضف كتلة CSS هذه بعد الأنماط الموجودة:
.fk-d-menu-modal a.kanban-nav {
background: linear-gradient(135deg, #5ca3ff 0%, #4285F4 50%, #3a75e4 100%) !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
}
استبدل a.kanban-nav بالمحدد المطلوب.
التطوير
يحتوي هذا المستودع على:
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