Liens de navigation supérieure personnalisés

[Discourse]

	Résumé	Liens de navigation supérieure personnalisés vous permet d’ajouter des liens à la navigation supérieure de Discourse.
	Aperçu	Aperçu sur le Créateur de thèmes Discourse
	Lien vers le dépôt	https://github.com/discourse/Discourse-nav-links-component
	Nouveau sur les thèmes Discourse ?	Guide pour débutant sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Comme il s’agit d’un #composant de thème #officiel maintenu par l’équipe Discourse, les demandes de Support, de bug, d’expérience utilisateur (UX) et de #fonctionnalité peuvent être soumises dans les catégories respectives ici sur Meta, et étiquetées avec la balise appropriée du composant de thème. Cliquez sur un lien ci-dessous pour en démarrer un.

 Support  Bogue  UX  Fonctionnalité

Fonctionnalités

Bureau

Mobile

Paramètres :

Nom	Description
Liens de navigation	Délimités par des points-virgules dans cet ordre : nom d’affichage ;description ;URL
Masquer les menus déroulants	Masquer les menus déroulants des catégories et des étiquettes
Masquer les liens par défaut	Masquer les liens par défaut sur mobile et sur bureau.

• Liens de navigation — ceux-ci nécessitent 3 parties :

  • Nom
  • Description
  • Chemin ou URL

  Le nom est le texte du lien qui apparaît dans le menu. La description s’affiche lorsque vous passez la souris sur le nom comme ceci :

  

  Le chemin/URL est l’endroit où vous souhaitez que le lien mène.

  Vous pouvez ajouter des liens en tant que valeurs délimitées par des points-virgules dans les paramètres du thème en suivant cet ordre

  nom;description;URL

  L’URL peut également être relative comme

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

• Masquer les menus déroulants

  Masque les menus déroulants par défaut des catégories et des étiquettes

  

• Masquer les liens par défaut

  Masque les liens par défaut dans cette section

  

Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos offres Standard, Business et Entreprise.

[Cazadividendos (Luis álvarez)]

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.

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.

[manuel (Manuel Kostka)]

@Johani

L’URL peut aussi être relative comme
/tags/theme-component

Quelqu’un sait comment je pourrais ajouter un lien de tag qui est en fait relatif à la route actuelle ? J’aimerais utiliser un tag About et l’offrir comme lien principal vers un sujet About relatif à la catégorie dans laquelle se trouve un utilisateur.

Par exemple, l’utilisateur est dans la catégorie /c/feedback/7. Choisir About dirigera vers /tags/c/feedback/7/about.

[manuel (Manuel Kostka)]

Je voudrais utiliser le composant sur une instance mais plusieurs comportements ne fonctionnent pas :

• Lorsque vous utilisez “Masquer les liens par défaut”, cela masque les deux premiers éléments enfants (Derniers et Catégories). Mais lorsque l’on navigue vers une catégorie, le lien par défaut “Catégories” n’est déjà plus affiché dans le menu. Ensuite, ce paramètre masque un élément de navigation supplémentaire, celui qui serait autrement le troisième de la liste.

• J’ai ajouté un élément de menu pour un lien de catégorie direct (/c/game-talk). Lorsque je navigue vers celui-ci, il n’obtient pas de classe active et n’est pas mis en surbrillance. Au lieu de cela, le lien “Derniers” est mis en surbrillance et possède une classe active. Ce n’est cependant pas le lien “Derniers” par défaut, mais un que j’ai ajouté via le composant (ne pointant que vers /latest).

• En fait, le lien “Derniers” n’obtient pas non plus de classe active lorsqu’il n’est pas nommé “Derniers”. La classe active sur la route actuelle ne semble donc pas fonctionner du tout à cause du composant. Voici la vue sur /latest mais avec un autre nom pour le lien Derniers :

[sok777 (sok)]

Question rapide -
J’essaie de créer ceci et de faire en sorte que l’URL soit ?order=created afin que les utilisateurs puissent parcourir les sujets récents.

Cela fonctionne parfaitement sur ordinateur, mais échoue sur mobile - la barre de navigation se recharge simplement et n’affiche pas le menu déroulant.

[WJsirius (WJ)]

J’ai la même question… Est-ce une solution ?

[WJsirius (WJ)]

Je pense savoir pourquoi c’est arrivé…
le composant contient la ligne ci-dessous :

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

À cause de l’expression régulière… ? est lui-même utilisé comme marque spéciale d’expression régulière, et le paramètre est censé être comparé à window.location.search.
J’ai forké le composant, l’ai modifié comme suit et cela fonctionne.

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)]

Oh wow, bien joué

Où avez-vous mis ce morceau de code ?

[WJsirius (WJ)]

Discourse-nav-links-component/mobile/head_tag.html , remplacez le code correspondant.

[nathank (Nathan Kershaw)]

@WJsirius

J’ai forké le composant, je l’ai modifié pour le code suivant et cela fonctionne.

Pourquoi ne pas en faire une PR pour que tout le monde en profite ?

[WJsirius (WJ)]

Puis-je faire ça ? Je pense toujours que mon niveau de code est trop faible… et je me sens un peu embarrassé de faire ça. Merci pour le conseil !!! Je vais le réviser et faire une PR !

[nathank (Nathan Kershaw)]

@WJsirius

Je pense toujours que mon niveau de code est trop faible

Je pense la même chose de mes tentatives de contribution !!

Cependant, l’@équipe (et leurs outils automatisés) semblent assez bons pour nettoyer le code.

Une fois que vous l’avez transformé en PR, vous pouvez poster le lien du PR ici dans Meta et il affiche une mise à jour en direct impressionnante intégrée du statut du PR.

[piffy]

@manuel

J’ai ajouté un élément de menu pour un lien de catégorie direct (/c/game-talk). Lorsque je navigue dessus, il n’obtient pas de classe active et n’est pas mis en surbrillance. Au lieu de cela, le lien « Latest » est mis en surbrillance et a une classe active. Ce n’est cependant pas le lien « Latest » par défaut, mais un que j’ai ajouté via le composant (ne liant que /latest)

Avez-vous pu résoudre ce problème ? J’ai un problème similaire.

[piffy]

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.

[Tris20 (Tristan) A scindé ce sujet ()]

4 messages ont été déplacées vers un nouveau sujet : Filtre de balise relative personnalisé dans la barre de navigation

[mononym]

Bonjour. J’itère sur ce post. Y a-t-il un moyen d’indiquer les sujets non lus s’il vous plaît ? Merci.

[thaidb]

Bonjour,
Comment configurer l’ouverture d’une URL dans un nouvel onglet ?
Merci !

[carbonrich (Richard Hawkins)]

Ceci est potentiellement un composant vraiment utile, mais il semble que quelques bugs basiques (mais au-delà de ma capacité à corriger) l’empêchent d’être plus largement utilisé. Est-ce que certains d’entre eux seront corrigés ?

[awesomerobot (Kris)]

Pouvez-vous être plus précis sur les bogues qui vous empêchent d’utiliser le composant ?

[carbonrich (Richard Hawkins)]

Oui, désolé, le principal que j’ai rencontré est le suivant :

@manuel

• Lors de l’utilisation de « masquer les liens par défaut », il masque les deux premiers éléments enfants (Derniers et Catégories). Mais lorsqu’on navigue vers une catégorie, le lien par défaut « Catégories » n’est déjà plus affiché dans le menu. Ensuite, ce paramètre masque un élément de navigation supplémentaire, celui qui serait autrement le troisième de la liste.

Je suppose qu’il a juste besoin d’un CSS mieux ciblé, mais je pourrais me tromper !