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

مكون السمة
,
1
:discourse2: Summary Custom Top Navigation Links allows you to add links to Discourse top navigation.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/Discourse-nav-links-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Desktop

desktop example
desktop example1768×294 22.9 KB

Mobile

36c3512b5fd56acac5556fe12e3b30992f93bc8d_2_853x750
36c3512b5fd56acac5556fe12e3b30992f93bc8d_2_853x750853×750 97.2 KB

Settings:

Name Descriptions
Nav links Semicolon delimited in this order: display name;description;URL
Hide dropdowns Hide category and tag dropdowns
Hide default links Hide the default links on both mobile and desktop.

  • Nav links — these need 3 parts:

    • Name
    • Description
    • Path or URL

    Name is the text for the link that shows up on the menu. Description shows up when you hover the name like this:

    hover2
    hover21364×406 47.5 KB

    Path/URL is where you want the link to go.

    You can add links as semicolon delimited values in theme settings following this order

    name;description;URL

    URL can also be relative like

    /c/staff, /t/232, /groups/plugin_authors, /about, /tags/official

  • Hide dropdowns

    Hides the default category and tag dropdowns

    Screenshot 2023-05-11 at 3.10.55 PM

  • Hide default links

    Hides the default links in this section

    Screenshot 2023-05-11 at 3.11.29 PM


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T23:40:05Z

Check documentPerform check on document:
63 إعجابًا
41

Hi

I use this theme component. One of the items in the menú points to a category and I would like to inform the unread topics for this category.

image

Instead of Agora I would like Agora (3) for an user who has three unread topics in this category (same behaviour as standard link “Unread”).

Any idea?

Thanks in advance.

52

هل يعرف أحد كيف يمكنني إضافة رابط علامة يكون نسبيًا فعليًا للمسار الحالي؟ أود استخدام علامة حول وتقديمها كرابط علوي يوجه إلى موضوع حول نسبي للفئة التي يتواجد فيها المستخدم.
على سبيل المثال، يتواجد المستخدم في الفئة /c/feedback/7. سيؤدي اختيار حول إلى التوجيه إلى /tags/c/feedback/7/about.

إعجابَين (2)
53

أود استخدام المكون على مثيل ولكن السلوكيات المختلفة لا تعمل:

  • عند استخدام “إخفاء الروابط الافتراضية”، فإنه يخفي العنصرين الفرعيين الأولين (الأحدث والفئات). ولكن عندما يتنقل المرء إلى فئة، فإن رابط “الفئات” الافتراضي غير معروض بالفعل في القائمة. ثم يخفي هذا الإعداد عنصر تنقل إضافي، وهو العنصر الثالث في الصف.

لقطة شاشة من 2022-05-10 18-29-05

  • أضفت عنصر قائمة لرابط فئة مباشر (/c/game-talk). عندما أتنقل إليه، لا يحصل على فئة نشطة ولا يتم تمييزه. بدلاً من ذلك، يتم تمييز رابط “الأحدث” ولديه فئة نشطة. هذا ليس رابط “الأحدث” الافتراضي، ولكنه رابط أضفته من خلال المكون (يربط فقط بـ /latest).

لقطة شاشة من 2022-05-10 18-25-39

  • في الواقع، رابط “الأحدث” لا يحصل على فئة نشطة أيضًا عندما لا يسمى “الأحدث”. لذلك، يبدو أن الفئة النشطة على المسار الحالي لا تعمل على الإطلاق بسبب المكون. هذا هو العرض على /latest ولكن باسم مختلف لرابط الأحدث:

لقطة شاشة من 2022-05-10 18-39-15

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

سؤال سريع-
أحاول إنشاء هذا وجعل عنوان URL ?order=created حتى يتمكن المستخدمون من تصفح المواضيع الحديثة.
يعمل هذا بشكل مثالي على سطح المكتب ولكنه يفشل على الهاتف المحمول - يتم إعادة تحميل شريط التنقل ولن تظهر القائمة المنسدلة.

56

لدي نفس السؤال… هل هذا حل؟ :face_with_monocle:

57

أعتقد أنني أعرف سبب حدوث ذلك…
المكون يحتوي على السطر التالي:

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

بسبب التعبير العادي… ؟ يُستخدم بحد ذاته كعلامة خاصة للتعبير العادي، وكان من المفترض مقارنة المعلمة بـ window.location.search.
لقد قمت بعمل نسخة من المكون، وغيرته إلى الكود التالي وهو يعمل.

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }
إعجاب واحد (1)
58

أحسنت صنعًا :clap:

أين وضعت جزء الكود هذا؟

59

Discourse-nav-links-component/mobile/head_tag.html ، استبدل رمز المطابقة. :face_with_peeking_eye:

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

لماذا لا تقوم بعمل PR ليستفيد منه الجميع؟

4 إعجابات
61

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

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

أنا أفكر في محاولات مساهمتي أيضًا!!

ومع ذلك، يبدو أن الفريق (وأدواتهم الآلية) جيدون جدًا في تنظيف الكود.

بمجرد أن تقوم بإنشاء طلب سحب (PR)، يمكنك نشر رابط طلب السحب هنا في Meta وسيعرض تحديثًا مباشرًا رائعًا لحالة طلب السحب.

5 إعجابات
64

هل تمكنت من حل هذه المشكلة؟ أنا أواجه مشكلة مماثلة

65

لا يمكنني القول بأنني وجدت حلاً مثالياً، لكنني اكتشفت ما كانت المشكلة بالنسبة لي.

يمكن العثور على المشكلة هنا
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

وتحديداً، هذا الجزء:

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

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

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

بالنسبة لي، هذا يتحقق مما إذا كان عنوان URL للصفحة هو نفس موقع عنوان URL لشريط التنقل، وإذا كان الأمر كذلك، فإنه يُرجع نتيجة contentFilterMode === filter، وكلا المتغيرين غير واضحين إلى حد ما بالنسبة لي. إذا فشل الشرط، يبدو أنه يقوم فقط بتشغيل المنطق العادي لما إذا كان يجب تمييز شيء ما على أنه نشط (وهذا هو سبب عمل روابطي غير المخصصة بشكل جيد). المشكلة هي أنه بينما يعمل هذا الرمز مرة واحدة لكل رابط تنقل، فإن متغير location يبدو دائماً أنه “categories” لذا فإن الشرط if خاطئ دائماً للروابط المخصصة. علاوة على ذلك، حتى لو قمت بإصلاح متغير “location” عن طريق استبداله بـ this.get("content").href، فإن قيمة الإرجاع خاطئة دائماً أيضاً لأن متغير filter يتم تعيينه دائماً إلى “categories”.

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

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

بشكل أساسي، يتحقق فقط مما إذا كان عنوان URL الحالي يتضمن عنوان URL لشريط التنقل كجزء من سلسلة نصية. إذا كان الأمر كذلك، فإنه يسلط الضوء عليه.

4 إعجابات
67

تم تقسيم 4 مشاركات إلى موضوع جديد: Custom relative tag filter on the nav bar

68

مرحباً. أنا أكرر هذه المشاركة. هل هناك طريقة للإشارة إلى المواضيع غير المقروءة من فضلك؟ شكراً

69

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

70

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

72

هل يمكنك أن تكون أكثر تحديدًا بشأن الأخطاء التي تمنعك من استخدام المكون؟

73

نعم، آسف، الرئيسي الذي واجهته هو هذا:

أفترض أنه يحتاج فقط إلى بعض CSS مستهدفة بشكل أفضل ولكن قد أكون مخطئًا!

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