Je ne peux pas dire avoir trouvé une solution idéale, mais j’ai trouvé quelle était la cause du problème pour moi.
Le problème se trouve ici :
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html
Spécifiquement, cette partie :
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"));
}
})
});
Il semble que cela définisse “active” sur chaque élément de navigation. Franchement, la logique de la façon dont il décide et de ce que sont toutes ces variables m’est assez opaque. Mais le problème se situe ici :
if (window.location.pathname === location) {
return contentFilterMode === filter;
} else {
return this._super(contentFilterMode, this.get("filterMode"));
}
Pour moi, cela vérifie si l’URL de la page est identique à la location de l’URL de la barre de navigation, et si c’est le cas, il renvoie le résultat de contentFilterMode === filter, les deux variables étant un peu floues pour moi. Si la condition échoue, il semble qu’il exécute simplement la logique normale pour déterminer si quelque chose doit être marqué comme actif (c’est pourquoi mes liens non personnalisés semblent fonctionner correctement). Le problème est que, bien que ce code s’exécute correctement une fois par élément de navigation, la variable location est toujours égale à “categories”, de sorte que l’instruction if est toujours fausse pour les liens personnalisés. De plus, même si je corrige la variable “location” en la remplaçant par this.get("content").href, la valeur de retour est également toujours fausse car la variable filter est également toujours définie sur “categories”.
Normalement, je ferais une PR pour corriger cela, mais le véritable problème de fond m’échappe toujours. J’ai trouvé une solution de contournement qui fonctionne pour moi, mais qui modifie légèrement la fonctionnalité documentée de ce composant, je préférerais donc ne pas la PR. Je pense qu’il y aura des cas limites où cela ne fonctionnera pas non plus, par exemple si votre page d’accueil est définie sur /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);
})
});
Essentiellement, cela vérifie si l’URL actuelle inclut l’URL de la barre de navigation comme sous-chaîne. Si oui, il la met en surbrillance.
