Composant Nav Button Highlighter - fonctionne maintenant

Drew-ART · Novembre 18, 2025, 1:14

J’ai dû le reconstruire comme un composant purement CSS car j’ai eu des problèmes pour stabiliser la section d’administration de la version Javascript, ce qui signifie que vous devez modifier directement les sélecteurs CSS pour qu’il fonctionne sur votre site.

Le but du composant est de vous aider à mettre en évidence un chemin que vous souhaitez spécifiquement que les utilisateurs empruntent.

Lien : https://github.com/focallocal/nav-buttons-highlighter

Voici comment il est installé et met en évidence le plugin de tableau Kanban que la plupart des utilisateurs de ma plateforme ne sauraient pas où trouver après avoir été membres pendant des mois, en particulier ceux qui utilisent principalement le mobile.

Ordinateur de bureau :

Mobile :

Surligneur de boutons de navigation (Nav Buttons Highlighter)

Un composant de thème Discourse qui met en évidence les boutons de navigation pour guider les utilisateurs vers des chemins ou des fonctions spécifiques qu’ils sont censés suivre, et rend le menu déroulant mobile plus clair et visible.

Objectif

Ce composant vous aide à :

Guider les utilisateurs en mettant en évidence les liens de navigation importants (par exemple, votre tableau de tâches, la documentation ou les catégories clés)
Améliorer l’expérience utilisateur mobile en faisant ressortir le bouton de navigation déroulant
Créer une hiérarchie visuelle dans votre barre de navigation

Fonctionnalités

Style de bouton épuré avec des couleurs unies et des effets de survol
Configuration par l’administrateur - aucune modification CSS requise
Prise en charge jusqu’à 3 boutons de navigation personnalisés
Adapté aux mobiles - inclut la mise en évidence du bouton de menu déroulant mobile
Préconfiguré pour le plugin Discourse Kanban par défaut
Prise en charge du sélecteur de couleur pour une personnalisation facile

Configuration par défaut

Par défaut, ce composant est configuré pour mettre en évidence le plugin Discourse Kanban (lien) en BLEU (#4285F4).

Installation

Dans la console d’administration de Discourse, allez à Personnaliser → Thèmes → Composants et cliquez sur Installer

Copiez le lien du dépôt Git et collez-le :

https://github.com/focallocal/nav-buttons-highlighter

Une fois installé, ajoutez le composant à votre thème actif.

Comment personnaliser

Panneau des paramètres d’administration

Toute la configuration se fait via de simples paramètres d’administration - aucune modification CSS requise !

Pour configurer :

Allez à Admin → Personnaliser → Thèmes
Cliquez sur votre thème actif
Trouvez Nav Buttons Highlighter dans la section Composants inclus
Cliquez sur Paramètres

Paramètres disponibles :

Bouton 1 - Kanban (Par défaut) :

Mettre en évidence Kanban : Activer/désactiver (par défaut : activé)
Couleur Kanban : Sélecteur de couleur (par défaut : bleu #4285F4)
Sélecteur Kanban : Sélecteur CSS (par défaut : a.kanban-nav)

Bouton 2 - Personnalisé :

Mettre en évidence le bouton 2 : Activer le deuxième bouton (par défaut : désactivé)
Couleur du bouton 2 : Sélecteur de couleur (par défaut : vert #4CAF50)
Sélecteur du bouton 2 : Entrez votre sélecteur CSS (par exemple, a[href='/page'])

Bouton 3 - Personnalisé :

Mettre en évidence le bouton 3 : Activer le troisième bouton (par défaut : désactivé)
Couleur du bouton 3 : Sélecteur de couleur (par défaut : orange #FF5722)
Sélecteur du bouton 3 : Entrez votre sélecteur CSS

Mobile :

Mettre en évidence le menu déroulant mobile : Basculer le menu déroulant Derniers du mobile (par défaut : activé)
Couleur du menu déroulant mobile : Sélecteur de couleur (par défaut : bleu #4285F4)

Trouver des sélecteurs CSS :

Pour mettre en évidence différents liens de navigation, vous avez besoin de leur sélecteur CSS :

Ouvrez votre forum dans un navigateur
Faites un clic droit sur le lien que vous souhaitez mettre en évidence
Sélectionnez « Inspecter l’élément »
Recherchez la balise <a> et notez :
- Noms de classe : class="kanban-nav" → utilisez : a.kanban-nav
- Valeur Href : href="/c/support" → utilisez : a[href="/c/support"]

Exemples courants :

Plugin Kanban : a.kanban-nav
Catégorie de support : a[href="/c/support"]
Balise de documentation : a[href="/tags/documentation"]
Page personnalisée : a[href="/my-page"]
Deuxième bouton de navigation : #navigation-bar > li:nth-child(2) > a

Sélection de couleur :

Utilisez des codes de couleur hexadécimaux (par exemple, #4285F4 pour le bleu). Le composant génère automatiquement :

Nuance plus claire pour le haut du dégradé
Nuance plus foncée pour le bas/l’ombre
Couleurs d’état de survol et actif

Couleurs populaires :

Bleu : #4285F4 (par défaut)
Vert : #4CAF50
Rouge : #F44336
Orange : #FF9800
Violet : #9C27B0

Version CSS seule stable

Si vous préférez l’édition CSS directe, la version précédente (2.0.1) est disponible :

Installer la version CSS seule :

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

Consultez le fichier README de cette branche pour les instructions d’édition CSS.

Développement

Ce dépôt contient :

common/common.scss — Tous les styles de boutons et guide de personnalisation détaillé
assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — Initialisateur minimal (requis pour Discourse)
about.json — Métadonnées du composant

Dépannage

Q : Les modifications n’apparaissent pas
R : Après avoir modifié, cliquez sur « Enregistrer » et effectuez un rechargement forcé de votre page de forum (Ctrl+F5 ou Cmd+Shift+R).

Q : Je veux mettre en évidence plusieurs boutons
R : Copiez l’intégralité du bloc CSS du bouton et collez-le sous la règle CSS existante, puis modifiez le sélecteur et éventuellement les couleurs.

Licence

MIT — Public Happiness Movement

merefield · Novembre 18, 2025, 1:25

Qu’est-ce que tout ce markdown étrange ?

l’avez-vous signalé pour le déplacer vers Theme component ?

Drew-ART · Novembre 18, 2025, 1:33

Merci. J’ai copié/collé directement depuis le fichier README de Github. Je l’ai mis à jour depuis que j’ai posté.\n\n> l’avez-vous signalé pour le déplacer vers Composant de thème ?\n\nNon, je voulais d’abord obtenir des retours et vérifier que tout allait bien.

Drew-ART · Novembre 18, 2025, 1:47

J’ai eu un problème bizarre où Discourse a mis en cache un fichier, je pense que c’était le fichier about.json, et chaque modification que j’y apportais échouait à la mise à jour ou à la réinstallation. Il m’a fallu une éternité pour comprendre pourquoi je ne parvenais pas à faire aboutir un changement.

Existe-t-il un meilleur moyen de tester un composant plutôt que sur un site en direct ?

NateDhaliwal · Novembre 19, 2025, 2:44

@Drew-ART Avez-vous consulté Objects type for theme setting ? Peut-être pourrait-il alors être utilisé pour ajouter de nombreuses règles CSS, en utilisant peut-être l’imbrication pour ajouter des choses comme la couleur d’arrière-plan et le remplissage à chaque règle. SCSS possède une boucle each que vous pourriez être en mesure d’utiliser.

Peut-être que ceci pourrait aider ?

github.com/Arkshine/discourse-banner-featured-links

scss/functions.scss

ce190f66a


      
            @return $result;
          }
          
          /**
           * Parses a string of ruby-like key-value pairs into a map.
           * Format: [{"key1"=>"value1", "key2"=>"value2"}, {"key1"=>"value1","key2"=>"value2"}]
           *
           * @param {String} $string - The string of key-value pairs.
           * @return {Map} - The map of key-value pairs.
           */
          @function parseObjectSettings($string) {
            $string: str-slice($string, 2, -2);
            $items: str-split($string, "}, {");
          
            $parsedItems: ();
          
            @each $item in $items {
              $item: str-replace($item, "{", "");
              $item: str-replace($item, "}", "");
              $item: str-trim($item);

Drew-ART · Novembre 19, 2025, 12:47

Merci @NateDhaliwal. C’était mon approche initiale, mais j’ai rencontré l’erreur 500 ci-dessus et je n’arrivais pas à la surmonter pendant des heures, alors je suis revenu à une approche uniquement CSS.

Je pourrais revenir à cette tentative abandonnée et voir si elle se charge maintenant que je pense avoir compris l’erreur 500. Je vais essayer.

Drew-ART · Novembre 19, 2025, 1:28

Non, je n’arrive pas du tout à faire fonctionner cela.

Je l’ai configuré avec les paramètres d’administration et une solution de repli en CSS s’ils ne se chargent pas correctement, mais quelque chose que je n’arrive pas à détecter empêche son fonctionnement total.

Drew-ART · Novembre 20, 2025, 12:36

Ok, j’ai réussi à faire fonctionner la section admin en utilisant des paramètres texte/booléens simples.

J’ai trouvé difficile de faire fonctionner le type Objets avec l’analyse SCSS et quelqu’un pourrait-il expliquer pourquoi la branche ci-dessus n’a pas fonctionné, mais ceux qui veulent l’utiliser maintenant peuvent personnaliser leurs paramètres dans la section admin du composant.

Drew-ART · Novembre 20, 2025, 8:54

Ok, je pense avoir trouvé le problème SCSS.

J’ai trouvé ceci dans le composant de carrousel de @NateDhaliwal :
SCSS (common.scss) :

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

Paramètres (settings.yml) :


pagination_button_color:
  type: string
  default: ""

Pour toute autre personne en difficulté :

injecter dans les propriétés personnalisées CSS en utilisant la syntaxe #{$var}
Ensuite, utiliser ces variables CSS ailleurs pour que la bibliothèque Swiper puisse les lire

Cela fonctionne parce que :

Les variables de paramètres peuvent être interpolées avec #{}
Les propriétés personnalisées CSS acceptent des valeurs de type chaîne de caractères
Le style réel utilise les variables CSS, pas les fonctions SCSS

Je mettrai à jour ce plugin avec la version plus moderne bientôt.

Sujet		Réponses	Vues
First component attempt. I've had a go at creating a Nav Button Highlighter. Not working as yet Dev	1	45	Novembre 11, 2025
Highlighter Composer Button Theme component	22	1301	Septembre 5, 2023
Fast Highlight Dev	49	2304	Septembre 30, 2023
MD Composer extras Theme component	70	8697	Juillet 8, 2025
Discourse Button Styles Theme component	40	10498	Septembre 18, 2025