Benutzerdefinierte Top-Navigationslinks

[Discourse]

	Zusammenfassung	Benutzerdefinierte Top-Navigationslinks ermöglicht es Ihnen, Links zur Discourse-Top-Navigation hinzuzufügen.
	Vorschau	Vorschau im Discourse Theme Creator
	Repository-Link	https://github.com/discourse/Discourse-nav-links-component
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Modul installieren

Da dies ein official Theme-Modul ist, das vom Discourse-Team gepflegt wird, können Support, bug, ux und #feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Modul-Tag versehen werden. Klicken Sie auf einen der folgenden Links, um einen zu starten.

 Support  Fehler  UX  Funktion

Funktionen

Desktop

Mobile

Einstellungen:

Name	Beschreibung
Navigationslinks	Semikolon-getrennt in dieser Reihenfolge: Anzeigename;Beschreibung;URL
Dropdowns ausblenden	Kategorien- und Tag-Dropdowns ausblenden
Standard-Links ausblenden	Die Standard-Links sowohl auf mobilen Geräten als auch auf dem Desktop ausblenden.

• Navigationslinks – diese benötigen drei Teile:

  • Name
  • Beschreibung
  • Pfad oder URL

  Der Name ist der Text für den Link, der im Menü angezeigt wird. Die Beschreibung wird angezeigt, wenn Sie mit der Maus über den Namen fahren, wie hier:

  

  Pfad/URL ist das Ziel, zu dem der Link führen soll.

  Sie können Links als semikolon-getrennte Werte in den Theme-Einstellungen hinzufügen, wobei Sie diese Reihenfolge einhalten:

  name;description;URL

  Die URL kann auch relativ sein, wie zum Beispiel:

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

• Dropdowns ausblenden

  Blendet die Standard-Kategorien- und Tag-Dropdowns aus

  

• Standard-Links ausblenden

  Blendet die Standard-Links in diesem Abschnitt aus

  

Von uns gehostet? Theme-Module können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

[Cazadividendos (Luis álvarez)]

Hallo,

ich verwende diese Theme-Komponente. Einer der Menüpunkte verweist auf eine Kategorie, und ich möchte die Anzahl der ungelesenen Themen für diese Kategorie anzeigen lassen.

Anstatt „Agora

[manuel (Manuel Kostka)]

@Johani

URLs können auch relativ sein, wie z. B.

/tags/theme-component

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.

[manuel (Manuel Kostka)]

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.

• 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).

• 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“:

[sok777 (sok)]

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.

[WJsirius (WJ)]

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

[WJsirius (WJ)]

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

[sok777 (sok)]

Gut gemacht

Wo hast du dieses Code-Snippet platziert?

[WJsirius (WJ)]

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

[nathank (Nathan Kershaw)]

@WJsirius

Ich habe die Komponente geforkt, sie in den folgenden Code geändert und es funktioniert.

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

[WJsirius (WJ)]

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!

[nathank (Nathan Kershaw)]

@WJsirius

Ich denke immer, mein Code-Level ist zu schlecht

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.

[piffy]

@manuel

Ich habe einen Menüpunkt für einen direkten Kategorie-Link (/c/game-talk) hinzugefügt. Wenn ich ihn aufrufe, 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).

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

[piffy]

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.

[mononym]

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

[thaidb]

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

[carbonrich (Richard Hawkins)]

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?

[awesomerobot (Kris)]

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

[carbonrich (Richard Hawkins)]

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

@manuel

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

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