Liens de navigation supérieure personnalisés

Composant de thème
,
74

Merci pour les détails supplémentaires ! C’était effectivement du CSS un peu fragile. Nous avons maintenant des noms de classe là où il n’y en avait pas auparavant, ce qui nous permet d’être plus précis.

J’ai un peu refactorisé le composant ici :

Il ne nécessitera donc qu’une mise à jour.

J’ai mis à jour cela pour que hide default links masque tous les liens par défaut, pas seulement latest et categories. Je pense que cela rendra le comportement de masquage un peu plus facile à comprendre.

Les éléments de navigation ajoutés par ce composant recevront désormais une classe nav-item_custom_item-name, où item-name est le nom d’affichage de l’élément de navigation (les espaces sont remplacés par des tirets). Ainsi, un élément de navigation nommé “mes favoris” peut être ciblé avec du CSS comme ceci :

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

Les éléments par défaut ont un nom de classe comme nav-item_name, donc si vous voulez masquer le lien par défaut des catégories, vous pouvez faire :

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

Celui-ci devrait maintenant obtenir la classe active.

3 « J'aime »
75

Salut,

La dernière mise à jour modifie le texte d’affichage du lien de navigation en minuscules et ajoute des tirets supplémentaires.

Nous avons ce qui suit dans le champ du lien de navigation :

⮉ Home;show all categories;/forums

Le lien de navigation s’affiche comme suit :
image

Auparavant, il était affiché comme : ⮉ Home

Cette ligne semble être le coupable :

2 « J'aime »
76

Merci de l’avoir mentionné, je viens de faire une petite mise à jour qui corrige cela !

3 « J'aime »
77

Étant donné que nous sommes dans le domaine des rêves les plus fous ici — merci beaucoup pour ces corrections @awesomerobot ! — un ajout utile à ce composant serait une option pour que la navigation personnalisée apparaisse avant les menus déroulants de catégorie et d’étiquette, est-ce possible (sans beaucoup de travail) ?!

1 « J'aime »
78

Vous pouvez le faire avec un peu de CSS ajouté à un thème :

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 « J'aime »
79

Ça ressemble à de la magie.

80

Bonjour,
Comment puis-je configurer une URL dans la navigation pour qu’elle s’ouvre dans un nouvel onglet ?
Merci !

image
image1444×302 25.2 KB

81

Ce n’est pas possible depuis le plugin, vous devez ajouter du javascript personnalisé pour cela.

1 « J'aime »
82

Bonjour à tous,

Y a-t-il un moyen d’afficher le lien sur mobile s’il vous plaît ?

Merci !

83

Bonjour, faites-vous référence aux liens complets au lieu du menu déroulant sur mobile ?
Si oui, il n’y a pas beaucoup d’espace sur mobile pour afficher les liens. Le menu déroulant les compacte en un seul.

84

Salut,

Merci pour votre réponse rapide !

Désolé, j’aurais dû jouer davantage avec les paramètres, cela n’apparaît pas sur mobile car j’ai coché Masquer les liens par défaut sur mobile et sur ordinateur.

Comment puis-je masquer ces liens par défaut tout en affichant mes liens sur mobile, s’il vous plaît ?

86

J’ai signalé un bug pour ce TC :

Cela ruine vraiment la fonctionnalité ; si cela ne doit pas être résolu, peut-être que cela devrait être tagué broken ?

4 « J'aime »
87

Suggestion : inclure des icônes comme option. J’ai utilisé des emojis et cela a l’air très élégant, mais cela ne fonctionne pas sur mobile et n’est évidemment pas cohérent

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

88

Il existe un composant qui vous permet d’ajouter des icônes aux liens de la navigation supérieure : Discourse Nav Item Icon / Emoji
et il fonctionne également avec les liens personnalisés ajoutés par ce composant. La seule différence est que vous devez ajouter custom_ devant le nom de l’élément de navigation.

Par exemple,
J’ai ajouté un lien « Préférences » à l’aide de ce composant : Preferences;edit your preferences;/my/preferences

Configuration du paramètre « liens de navigation » : « Preferences;edit your preferences;/my/preferences »
Configuration du paramètre « liens de navigation » : « Preferences;edit your preferences;/my/preferences »910×255 8.94 KB

Et ensuite, j’ai configuré le composant d’icône/emoji pour ajouter l’icône de clé à molette : icon:custom_preferences:solid:wrench:currentColor

Configuration du paramètre « Préfixe de l'élément de navigation » : « icon:custom_preferences:solid:wrench:currentColor »
Configuration du paramètre « Préfixe de l'élément de navigation » : « icon:custom_preferences:solid:wrench:currentColor »912×306 8.92 KB

Résultat :
image

1 « J'aime »