Benutzerdefinierte Top-Navigationslinks

Themenkomponente
,
74

Vielen Dank für die zusätzlichen Details! Es war tatsächlich ein fragiles CSS. Wir haben hier Klassennamen, wo vorher keine waren, sodass wir jetzt spezifischer sein können.

Ich habe die Komponente hier etwas umgestaltet:

Es muss also nur noch ein Update erfolgen.

Ich habe dies aktualisiert, sodass hide default links alle Standardlinks ausblendet, nicht nur Latest & Categories. Ich denke, das macht das Ausblendverhalten etwas leichter verständlich.

Navigationspunkte, die von dieser Komponente hinzugefügt werden, erhalten nun eine Klasse nav-item_custom_item-name, wobei item-name der Anzeigename des Navigationspunkts ist (Leerzeichen durch Bindestriche ersetzt). Ein Navigationspunkt namens “my bookmarks” kann also mit CSS wie folgt angesprochen werden:

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

Standardelemente haben einen Klassennamen wie nav-item_name. Wenn Sie also den Standard-Kategorienlink ausblenden möchten, können Sie Folgendes tun:

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

Dies sollte jetzt die aktive Klasse erhalten.

3 „Gefällt mir“
75

Hallo,

Das neueste Update ändert den Anzeigetext des Navigationslinks in Kleinbuchstaben und fügt zusätzliche Bindestriche hinzu.

Wir haben Folgendes im Navigationslink-Feld:

⮉ Home;show all categories;/forums

Der Navigationslink wird wie folgt angezeigt:
image

Zuvor wurde es angezeigt als: ⮉ Home

Diese Zeile scheint der Schuldige zu sein:

2 „Gefällt mir“
76

Danke für den Hinweis, ich habe gerade ein kleines Update vorgenommen, das dies behebt!

3 „Gefällt mir“
77

Da wir uns hier im Reich der wildesten Träume befinden – vielen Dank für diese Korrekturen @awesomerobot! –, wäre eine nützliche Ergänzung dieser Komponente die Option, die benutzerdefinierte Navigation vor den Dropdown-Menüs für Kategorien und Tags erscheinen zu lassen, ist das möglich (ohne viel Arbeit)?!

1 „Gefällt mir“
78

Sie können dies mit etwas CSS tun, das einem Theme hinzugefügt wird:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 „Gefällt mir“
79

Das sieht wie Magie aus.

80

Hallo,
wie kann ich eine URL im Nav so einrichten, dass sie in einem neuen Tab geöffnet werden kann?
Vielen Dank!

image
image1444×302 25.2 KB

81

Das ist mit dem Plugin nicht möglich, Sie müssen dafür benutzerdefiniertes JavaScript hinzufügen.

1 „Gefällt mir“
82

Hallo Leute,

Gibt es eine Möglichkeit, den Link auf Mobilgeräten anzuzeigen?

Danke!

83

Hallo, beziehst du dich auf die vollständigen Links anstelle des Dropdowns auf Mobilgeräten?
Wenn ja, gibt es auf Mobilgeräten nicht viel Platz für die Links. Das Dropdown komprimiert sie zu einem.

84

Hallo,

Vielen Dank für Ihre schnelle Antwort!

Entschuldigung, ich hätte mehr mit den Einstellungen spielen sollen. Es wird auf Mobilgeräten nicht angezeigt, da ich sowohl für Mobilgeräte als auch für Desktops “Standardlinks ausblenden” aktiviert habe.

Wie kann ich diese Standardlinks ausblenden und meine Links trotzdem auf Mobilgeräten anzeigen?

86

Ich habe einen Fehlerbericht für diesen TC eingereicht:

Dies beeinträchtigt die Funktionalität wirklich stark. Wenn es nicht behoben wird, sollte dies vielleicht als broken markiert werden?

4 „Gefällt mir“
87

Vorschlag: Icons als Option einbeziehen. Ich habe Emojis verwendet und es sieht wirklich stilvoll aus, aber es funktioniert auf Mobilgeräten nicht und ist offensichtlich nicht konsistent

Screenshot at 2025-07-27 21-14-38
Screenshot at 2025-07-27 21-14-381056×141 14.2 KB

88

Es gibt eine Komponente, mit der Sie Symbole zu den Links in der oberen Navigation hinzufügen können: Discourse Nav Item Icon / Emoji
und sie funktioniert auch mit benutzerdefinierten Links, die von dieser Komponente hinzugefügt wurden. Der einzige Unterschied besteht darin, dass Sie custom_ vor den Namen des Navigationspunkts setzen müssen.

Zum Beispiel:
Ich habe mit Hilfe dieser Komponente einen Link “Preferences” hinzugefügt: Preferences;edit your preferences;/my/preferences

Konfiguration der Einstellung „Navigationslinks“: „Preferences;edit your preferences;/my/preferences“
Konfiguration der Einstellung „Navigationslinks“: „Preferences;edit your preferences;/my/preferences“910×255 8.94 KB

Und dann habe ich die Symbol-/Emoji-Komponente so konfiguriert, dass das Schraubenschlüsselsymbol hinzugefügt wird: icon:custom_preferences:solid:wrench:currentColor

Konfiguration der Einstellung „Navigationspunkt-Präfix“: „icon:custom_preferences:solid:wrench:currentColor“
Konfiguration der Einstellung „Navigationspunkt-Präfix“: „icon:custom_preferences:solid:wrench:currentColor“912×306 8.92 KB

Ergebnis:
Bild

1 „Gefällt mir“