روابط التنقل العلوية المخصصة

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

لقد قمت بإعادة هيكلة المكون قليلاً هنا:

لذلك كل ما سيحتاجه هو تحديث.

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

ستحصل عناصر التنقل المضافة بواسطة هذا المكون الآن على فئة nav-item_custom_item-name، حيث يكون item-name هو اسم العرض لعنصر التنقل (يتم استبدال المسافات بشرطات). لذلك يمكن استهداف عنصر تنقل باسم “إشاراتي المرجعية” باستخدام CSS على هذا النحو:

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue;
   }
}

تحتوي العناصر الافتراضية على اسم فئة مثل nav-item_name، لذلك إذا كنت ترغب في إخفاء رابط الفئات الافتراضي، يمكنك القيام بذلك:

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

يجب أن يحصل هذا الآن على الفئة النشطة.

3 إعجابات

مرحباً،

التحديث الأخير يغير نص عرض رابط التنقل إلى أحرف صغيرة ويضيف شرطات إضافية.

لدينا ما يلي في حقل رابط التنقل:

⮉ Home;show all categories;/forums

يظهر رابط التنقل على النحو التالي:
image

في السابق كان يظهر على النحو التالي: ⮉ Home

يبدو أن هذا السطر هو السبب:

إعجابَين (2)

شكراً لذكرك ذلك، لقد أجريت للتو تحديثًا طفيفًا يصلح هذا!

3 إعجابات

نظرًا لأننا في منطقة أقصى الأحلام هنا - شكرًا جزيلاً لك على هذه الإصلاحات @awesomerobot! - ستكون إضافة مفيدة لهذا المكون هي خيار لجعل التنقل المخصص يظهر قبل قوائم فئات وعلامات التصنيف المنسدلة، هل هذا ممكن (بدون الكثير من العمل)؟!

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

يمكنك القيام بذلك باستخدام بعض CSS المضافة إلى سمة:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 إعجابات

هذا يبدو سحريًا.

مرحباً،
كيف يمكنني إعداد عنوان URL في Nav ليتم فتحه في علامة تبويب جديدة؟
شكراً لك!

هذا غير ممكن من المكون الإضافي، تحتاج إلى إضافة جافاسكريبت مخصص لهذا الغرض.

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

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

هل هناك طريقة لعرض الرابط على الهاتف المحمول من فضلك؟

شكرا!

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

مرحباً،

شكراً على ردك السريع!

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

كيف يمكنني إخفاء هذه الروابط الافتراضية مع الاستمرار في عرض روابطي على الهاتف المحمول من فضلك؟

لقد قدمت تقرير خطأ لهذا TC:

هذا يفسد الوظيفة بشكل كبير؛ إذا لم تتم معالجتها، فربما يجب تمييزها بـ #broken؟

4 إعجابات

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

هناك مكون يسمح لك بإضافة أيقونات إلى الروابط في التنقل العلوي: Discourse Nav Item Icon / Emoji
وهو يعمل أيضًا مع الروابط المخصصة المضافة بواسطة هذا المكون. الفرق الوحيد هو أنك تحتاج إلى إضافة custom_ قبل اسم عنصر التنقل.

على سبيل المثال،
لقد أضفت رابط “Preferences” بمساعدة هذا المكون: Preferences;edit your preferences;/my/preferences

ثم قمت بتكوين مكون الأيقونة/الرموز التعبيرية لإضافة أيقونة المفتاح: icon:custom_preferences:solid:wrench:currentColor

النتيجة:
image

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