Benutzerdefinierte Top-Navigationslinks

: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

Mobile

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:

    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:
64 „Gefällt mir“
Categories in "top menu"?
Add /groups to top nav
How to add breadcrumb?
What about adding tags in the top menu?
How to make some categories like Bugs and Features here visible in top menu?
What is the proper way to extend categories route and filter topics?
Link to find all deleted posts by all users in a particular period
Adding link to blog on main page
Create a Tag filter like 'Make & Model' on community.cartalk.com
How can I add a menu item
A playful approach to category moderation
Simple Unread List
Displaying all non-solved topics
Volunteer Activities - a simple setup for non-hierarchical collaboration
Discourse Docs
How to make the recommanded topics collection
Reply reminder - Remind users to reply to new users topics with zero replies
How to add a topic in top nav in a specific category?
Following tags and top feed for followed tags
Show latest list sorted by creation date
Following tags and top feed for followed tags
Change Topic List home router - from Latest to Following
Missing category and tags breadcrumbs
A "Votes" option for the top menu in main page
Adding a chat link in the top navigation links?
Add a specific class for wikis (when first post) at the topic list level
How to add an icon in a navigation link?
Customizing your site with existing theme components
Show Latest topics, not by comment on home page
Custom Button For Discourse
Add Follow feed to top navigation
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Sidebar link / top button to PM admin
Adding 'Upcoming Events' to top navigation
Strange repetition in menu items
Disclaimer section on the "about" page
FKB Pro - Social theme
2023: The Year in Review
Is it possible to have the Board view as the only view?
How to add Button in Section
Brave default Theme
Air Theme
Provide a way to access tracked/watched topics (outside search)
Discourse Solved
The first Custom Top Nav link inappropriately appears selected
Add another tab to menu bar
Can we add "Groups" to top menu?
How to Disable ALL User-to-User DMs/Chat without breaking Other Features?
Disable personal message between members
Add category in Top Menu?
How can I remove the Category and tag filter?
How can I add a link to the top menu area?
Why we can't add groups to top menu
How to add links on home page menu to other site?
Traditional multi level hierarchy vs flat discourse hierarchy
Ordering topics - how do the links work?
Force Mobile Homepage
Knowledge Base
Automatically fill category with topics? "Best of" category?
How to add new button in different color
Adding "Category" as a topic list option within categories
Docs: Add link to top menu
New Theme: Tag-Pages Navigation
Custom nav bar options
Topic list sidebar navigation
Where can I see posts created by me?
Discourse Docs
Showing categories statically above most recent posts
Custom nav items no longer showing after recent update
Add /groups to top nav
Add topics-sorted-by-create-time to `top menu`
Categories Customization

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.

Weiß jemand, wie ich einen Tag-Link hinzufügen kann, der sich tatsächlich auf die aktuelle Route bezieht? Ich möchte einen About-Tag verwenden und ihn als obersten Link zu einem About-Thema anbieten, das relativ zur Kategorie ist, in der sich ein Benutzer befindet.

Z. B. befindet sich ein Benutzer in der Kategorie /c/feedback/7. Wenn er About wählt, wird er zu /tags/c/feedback/7/about weitergeleitet.

2 „Gefällt mir“

Ich möchte die Komponente auf einer Instanz verwenden, aber verschiedene Verhaltensweisen funktionieren nicht:

  • Wenn „Standardlinks ausblenden“ verwendet wird, werden die ersten beiden untergeordneten Elemente (Neueste und Kategorien) ausgeblendet. Wenn man jedoch zu einer Kategorie navigiert, wird der Standardlink „Kategorien“ nicht mehr im Menü angezeigt. Dann blendet diese Einstellung ein zusätzliches Navigations-Element aus, das sonst an dritter Stelle steht.

Screenshot from 2022-05-10 18-29-05

  • Ich habe einen Menüpunkt für einen direkten Kategorie-Link hinzugefügt (/c/game-talk). Wenn ich dorthin navigiere, erhält er keine aktive Klasse und wird nicht hervorgehoben. Stattdessen wird der Link „Neueste“ hervorgehoben und hat eine aktive Klasse. Dies ist jedoch nicht der Standardlink „Neueste“, sondern einer, den ich über die Komponente hinzugefügt habe (der nur auf /latest verlinkt).

Screenshot from 2022-05-10 18-25-39

  • Tatsächlich erhält der Link „Neueste“ keine aktive Klasse, wenn er nicht „Neueste“ heißt. Die aktive Klasse für die aktuelle Route scheint also aufgrund der Komponente überhaupt nicht zu funktionieren. Dies ist die Ansicht unter /latest, aber mit einem anderen Namen für den Link „Neueste“:

Screenshot from 2022-05-10 18-39-15

2 „Gefällt mir“

Kurze Frage –
Ich versuche, dies zu erstellen und die URL auf ?order=created zu setzen, damit Benutzer aktuelle Themen durchsuchen können.

Dies funktioniert auf dem Desktop einwandfrei, schlägt jedoch auf Mobilgeräten fehl – die Navigationsleiste wird einfach neu geladen und das Dropdown-Menü wird nicht angezeigt.

Ich habe die gleiche Frage… Ist das eine Lösung? :face_with_monocle:

Ich glaube, ich weiß, warum das passiert ist…
Die Komponente hat die folgende Zeile:

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

Wegen des Reg…?selbst wird als spezielles Reg-Zeichen verwendet, und der Parameter soll mit window.location.search verglichen werden.
Ich habe die Komponente geforkt, sie in den folgenden Code geändert und es funktioniert.

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 „Gefällt mir“

Gut gemacht :clap:

Wo hast du dieses Code-Snippet platziert?

Discourse-nav-links-component/mobile/head_tag.html , ersetzen Sie den übereinstimmenden Code. :face_with_peeking_eye:

1 „Gefällt mir“

Warum machen Sie daraus keinen PR, damit alle davon profitieren können?

4 „Gefällt mir“

Kann ich das tun? Ich denke immer, mein Code-Niveau ist zu schlecht … und fühle mich ein wenig peinlich, das zu tun. Danke für den Rat!!! Ich werde es überarbeiten und einen PR machen!

1 „Gefällt mir“

Das denke ich auch über meine Beitragsversuche!!

Allerdings scheinen das @team (und ihre automatisierten Werkzeuge) ziemlich gut darin zu sein, Code aufzuräumen.

Sobald du es zu einem PR gemacht hast, kannst du den PR-Link hier in Meta posten und es wird ein fantastisches eingebettetes Live-Update des PR-Status angezeigt.

5 „Gefällt mir“

Konntest du das jemals lösen? Ich habe ein ähnliches Problem

Ich kann nicht sagen, dass ich eine ideale Lösung gefunden habe, aber ich habe herausgefunden, was für mich das Problem war.

Das Problem ist hier zu finden:
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

Insbesondere dieser Teil:

    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"));
        }
      })
    });

Es sieht so aus, als würde dies das “active” für jeden Navigationslink setzen. Ehrlich gesagt, die Logik, wie es entscheidet und was all diese Variablen sind, ist mir ziemlich undurchsichtig. Aber das Problem liegt hier:

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

Für mich prüft dies, ob die Seiten-URL mit dem Standort der Navigationsleisten-URL übereinstimmt, und wenn ja, gibt es das Ergebnis von contentFilterMode === filter zurück, wobei beide Variablen für mich etwas unklar sind. Wenn die Bedingung fehlschlägt, sieht es so aus, als würde es einfach die normale Logik ausführen, ob etwas als aktiv markiert werden soll (deshalb scheinen meine nicht benutzerdefinierten Links einwandfrei zu funktionieren). Das Problem ist, dass, obwohl dieser Code einmal pro Navigationslink korrekt ausgeführt wird, die Variable location immer “categories” zu sein scheint, sodass die if-Anweisung für benutzerdefinierte Links immer falsch ist. Darüber hinaus ist selbst wenn ich die Variable “location” korrigiere, indem ich sie durch this.get("content").href ersetze, der Rückgabewert auch immer falsch, da die Variable filter ebenfalls immer auf “categories” gesetzt ist.

Normalerweise würde ich einen PR machen, um dies zu beheben, aber das eigentliche Grundproblem entzieht sich mir immer noch. Ich habe einen Workaround gefunden, der für mich funktioniert, aber die dokumentierte Funktionalität dieser Komponente leicht verändert, daher würde ich ihn lieber nicht als PR einreichen. Ich denke, es wird auch Randfälle geben, in denen er nicht funktioniert, z. B. wenn Ihre Homepage auf /latest gesetzt ist.

    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);
      })
    });

Grundsätzlich prüft es nur, ob die aktuelle URL die URL der Navigationsleiste als Teilstring enthält. Wenn ja, wird sie hervorgehoben.

4 „Gefällt mir“

4 Beiträge wurden in ein neues Thema aufgeteilt: Benutzerdefinierter relativer Tag-Filter in der Navigationsleiste

Hallo. Ich durchsuche diesen Beitrag. Gibt es eine Möglichkeit, ungelesene Themen anzuzeigen? Danke.

Hallo,
Wie richte ich ein „URL in neuem Tab öffnen“ ein?
Danke!

Dies ist potenziell eine wirklich hilfreiche Komponente, aber es scheint, dass einige grundlegende (aber für mich nicht zu behebende) Fehler ihre breitere Nutzung verhindern. Werden einige davon behoben?

Können Sie genauer angeben, welche Fehler Sie daran hindern, die Komponente zu verwenden?

Ja, Entschuldigung, das Hauptproblem, auf das ich gestoßen bin, ist dieses:

Ich gehe davon aus, dass nur etwas besser zielgerichtetes CSS benötigt wird, aber ich könnte mich auch irren!

1 „Gefällt mir“