Organisateur de catégories de la barre latérale

[Drew-ART (Drew)]

J’ai créé un organisateur de barre latérale. Il y a eu beaucoup de discussions à ce sujet il y a quelque temps et d’autres ont estimé que ce n’était pas nécessaire, mais j’ai toujours pensé que mes utilisateurs n’étaient pas très techniques ou ne savaient pas bien comment le forum fonctionnait au début, alors j’ai créé cet organisateur déroulant pour aider.

Installer ce composant de thème

Il y a un petit interrupteur en haut pour que les utilisateurs puissent basculer entre le défaut et celui-ci, et choisir celui qu’ils préfèrent. Je l’ai mis là car je pense que de nombreux utilisateurs expérimentés voudront personnaliser leur barre latérale de navigation, mais que la plupart des nouveaux utilisateurs ne le veulent pas.

Organisateur de catégories de la barre latérale

Un composant de thème Discourse qui organise les catégories de la barre latérale en sections personnalisables à code couleur et extensibles avec des fonctionnalités avancées.

Fonctionnalités

• 10 Sections Extensibles: Regroupez les catégories dans un maximum de 10 sections personnalisées
• Personnalisation des Couleurs: Définissez les couleurs d’arrière-plan et de texte pour chaque en-tête de section
• Arrière-plans Dégradés: Effet de décoloration en dégradé optionnel comme sur les photos
• Badges de Catégorie: Les badges colorés par défaut de Discourse à côté des catégories peuvent être activés et désactivés
• Prise en Charge des Sous-catégories: Bascule par section pour afficher/masquer les sous-catégories (affichage indenté)
• Masquage de Catégories: Masquez des catégories spécifiques de toutes les vues
• Bascule Bidirectionnelle: Basculez entre les sections personnalisées et la vue par défaut de Discourse (un bouton de bascule apparaît dans les deux vues)
• État Persistant: Mémorise quelles sections sont ouvertes/fermées et la préférence de vue de l’utilisateur
• Sensible aux Permissions: N’affiche que les catégories auxquelles les utilisateurs ont accès
• Catégories Non Regroupées: Affiche automatiquement toutes les catégories non classées dans une section séparée
• Adapté aux Mobiles: Fonctionne sur toutes les tailles d’appareils

Installation

1. Allez dans Admin → Personnaliser → Thèmes dans votre instance Discourse
2. Cliquez sur Installer → Depuis un dépôt Git
3. Entrez : https://github.com/focallocal/sidebar-categories-organizer
4. Cliquez sur Installer
5. Ajoutez le composant à votre thème actif

Configuration

Paramètres Globaux

• Activer l’Organisateur de Barre Latérale: Activez/désactivez la vue personnalisée
• Afficher le Bouton de Bascule: Affichez l’icône pour basculer entre les vues (apparaît dans les en-têtes des vues personnalisée et par défaut)
• Afficher les Badges de Catégorie: Affichez des carrés colorés à côté des noms de catégorie
• Utiliser la Décoloration Dégradée: Activez l’effet d’arrière-plan dégradé sur les en-têtes de section (50% couleur unie, 50% décoloration vers le transparent)
• Catégories à Masquer: Slugs de catégories séparés par des virgules à masquer de toutes les vues (ex: staff,private)
• Vue par Défaut: Choisissez quelle vue se charge par défaut (personnalisée ou par défaut)

Paramètres de Section (1-10)

Chaque section a :

• Activé: Activez/désactivez la section
• Titre: Texte de l’en-tête de section
• Couleur d’Arrière-plan: Sélecteur de couleur pour l’arrière-plan de l’en-tête de section
• Couleur du Texte: Sélecteur de couleur pour le texte de l’en-tête
• Catégories: Slugs de catégories séparés par des virgules (ex: general,support,feedback)
• Afficher les Sous-catégories: Bascule pour afficher/masquer les sous-catégories pour cette section
• Ouvert par Défaut: Si la section commence développée ou réduite

Trouver les Slugs de Catégorie

Les slugs de catégorie se trouvent dans l’URL :

• votre-site.com/c/general/5 → le slug est general
• votre-site.com/c/feature-requests/12 → le slug est feature-requests

Utilisation

Une fois installé et configuré :

1. Vue Personnalisée: Les catégories sont regroupées dans vos sections configurées avec des en-têtes colorés
2. Développer/Réduire: Cliquez sur les en-têtes de section pour basculer la visibilité du contenu
3. Bascule des Vues: Cliquez sur l’icône dans l’en-tête pour basculer entre les vues personnalisée et par défaut
   • En vue personnalisée : Le bouton de bascule apparaît dans l’en-tête de la vue personnalisée
   • En vue par défaut : Le bouton de bascule apparaît dans l’en-tête “Catégories” par défaut
4. Sous-catégories: Lorsqu’elles sont activées par section, les sous-catégories apparaissent indentées sous les catégories parentes
5. Badges de Catégorie: De petits carrés colorés (si activés) montrent la couleur de chaque catégorie
6. Catégories Non Regroupées: Toutes les catégories non assignées à des sections apparaissent dans “Autres Catégories”
7. Préférences: Votre choix de vue et l’état ouvert/fermé sont enregistrés par navigateur

Fonctionnalités Avancées

Arrière-plans Dégradés

Lorsqu’il est activé, les en-têtes de section utilisent un dégradé lisse :

• 50% couleur unie (votre couleur d’arrière-plan choisie)
• 50% décoloration vers le transparent
• Crée une apparence moderne et élégante

Masquage de Catégorie

Spécifiez les slugs de catégorie à masquer complètement de la barre latérale :

• Utile pour les catégories réservées au personnel ou obsolètes
• S’applique aux vues personnalisée et par défaut
• Liste séparée par des virgules (ex: staff,private,archived)

Sous-catégories

• Bascule par section (pas globale)
• Affichage indenté avec une police légèrement plus petite
• Opacité réduite pour la hiérarchie visuelle
• Maintient les couleurs des badges de catégorie

Version

• Actuelle: 1.0.1
• Discourse Minimum: 3.3.0
• Auteur: Andy@Focallocal

Licence

Licence MIT - Voir le fichier LICENSE

Support

Signaler les problèmes : GitHub · Where software is built

[Lilly]

Excellent travail

Astuce pour les paramètres de catégorie

Au lieu de demander aux administrateurs de saisir des slugs de catégorie, vous pouvez utiliser ceci dans votre fichier settings.yml, par exemple :

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

ce qui vous donnera un paramètre ressemblant à ceci :

Vous pouvez faire la même chose avec les groupes si jamais vous voulez une liste déroulante de groupes :

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

ce qui donnera quelque chose comme ceci :

[jenmck (jen)]

J’aime beaucoup cela et c’est certainement quelque chose qui m’a traversé l’esprit, alors merci !

Question : si un utilisateur n’a accès à aucune catégorie dans une section donnée, la section elle-même apparaît-elle toujours à l’utilisateur ?

[NateDhaliwal]

Oui, il le fait :

javascripts%2Fdiscourse%2Fapi-initializers%2Fsidebar-organizer.js

[Drew-ART (Drew)]

Non, la catégorie/sous-catégorie est masquée si l’utilisateur n’y a pas accès. Vous pouvez également en masquer manuellement celles que vous choisissez via les paramètres.

[Drew-ART (Drew)]

Merci Lilly. Je vais mettre à jour cela ainsi que mes autres composants récents pour les améliorer.

[Drew-ART (Drew)]

Le plugin est mis à jour avec de jolis sélecteurs déroulants maintenant.

[jenmck (jen)]

D’accord, j’ai compris cette partie - mais je parle de la section réelle, pas seulement de la catégorie.

Par exemple, si j’ai cette configuration :

Animaux

• Chats
• Chiens

Nuages

• Nimbus
• Cumulus

Jours

• Samedi
• Dimanche

Disons qu’un utilisateur n’a accès ni à la catégorie Nimbus ni à la catégorie Cumulus. La section Nuages apparaîtrait-elle toujours à l’utilisateur mais sans catégories, comme ceci :

Animaux

• Chats
• Chiens

Nuages

Jours

• Samedi
• Dimanche

Ou la section Nuages n’apparaîtrait-elle pas du tout, comme ceci :

Animaux

• Chats
• Chiens

Jours

• Samedi
• Dimanche

[Drew-ART (Drew)]

si un utilisateur n’a pas la permission de voir de catégories dans une section, la section entière (onglet) sera masquée

[Heliosurge (Dan DeMontmorency)]

C’est plutôt cool !

Ça me fait repenser à des idées mdr.

J’ai joué avec l’idée d’utiliser le plugin Doc Categories pour organiser des sections personnalisées avec des menus ciblés. Mais il faut un habillage pour permettre la couleur et les icônes.

Il y a un markdown pour ajouter le “Installer le composant” à Op.

Quelque chose a changé dans Meta ? Je n’arrive pas à surligner quelque chose pour citer sur Android ici. - ok, ça semble résolu.

[Heliosurge (Dan DeMontmorency)]

Hé Lily, pourrions-nous avoir le Markdown pour « Installer le composant »

[NateDhaliwal]

Voici un pour ce composant :

Installer ce composant de thème

Format Markdown (remplacez repoName et repoUrl) :

[wrap=theme-install-button repoName="Nom du composant" repoUrl="Lien du dépôt GitHub"]
Installer ce composant de thème
[/wrap]

[Heliosurge (Dan DeMontmorency)]

Merci Nate. J’ai essayé de faire une recherche mais peut-être avec des termes trop généraux.

[NateDhaliwal]

Oh, je ne suis pas sûr que ce soit mentionné quelque part. Je l’ai retiré du modèle de sujet Theme component .

[Heliosurge (Dan DeMontmorency)]

C’est vraiment cool. Meta pourrait vouloir considérer l’autre TC de zOp car il peut pré-insérer un modèle lors de la création d’un sujet.