Réorganisation du menu latéral

Personnalisation Composant de thème
1
:information_source: Résumé Permet de réorganiser les sections du menu latéral par défaut et personnalisées
:eyeglasses: Aperçu https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: Dépôt https://github.com/Lillinator/sidebar-menu-reorder
:question: Guide d’installation Comment installer un thème ou un composant de thème

Installer ce composant de thème

:bulb: Introduction

J’ai vu de nombreuses demandes de la part d’administrateurs Discourse souhaitant réorganiser les sections du menu latéral, y compris les sections personnalisées globales. Comme ce n’est actuellement pas très intuitif ou simple pour la plupart des gens à faire avec CSS, et que cela peut être difficile à gérer et à modifier, j’ai créé un composant de thème qui facilite grandement cette tâche dans l’interface d’administration.

:woman_technologist:t2: Aperçu

Ce composant de thème Discourse permet aux administrateurs de réorganiser les sections du menu latéral de leur forum dans l’interface d’administration, incluant toutes les sections par défaut ainsi que les sections personnalisées visibles globalement.

Le composant fonctionne pour les vues latérales sur bureau et mobile, ainsi que pour le mode menu déroulant en haut de page (bien qu’il soit idéalement conçu pour le mode latéral).

:wrench: Installation & Configuration

  • Installez ce composant de thème conformément au Guide débutant pour utiliser les thèmes Discourse.
  • La section community fait référence à la section supérieure par défaut du menu latéral - le menu avec l’en-tête Sujets et inclut le sous-menu déroulant Plus ; il est recommandé de ne déplacer qu’une ou deux sections (par défaut ou personnalisées) au-dessus de la section community.
  • Ne supprimez aucune des sections par défaut dans les paramètres, sinon elles seront désorganisées (vous pouvez toujours les réajouter ou réinitialiser le paramètre).
  • La meilleure façon de configurer ce composant est d’avoir l’écran d’administration du composant avec le paramètre de liste de réorganisation dans une fenêtre de navigateur, et la vue latérale du forum en tant qu’utilisateur de test dans une autre fenêtre à côté ; rechargez la page après chaque modification de l’ordre des sections de menu dans la liste.
  • Dans le paramètre d’administration du composant, assurez-vous d’utiliser le format de nommage slug pour les sections personnalisées, sinon elles seront ignorées (par exemple : utilisez custom-menu-name pour “Custom Menu Name”, useful-links pour “Useful Links”, etc.)

:gear: Paramètres

Paramètre Description
Sidebar menu order Un paramètre de liste contenant les sections de menu par défaut. (community est la section supérieure par défaut dans le menu latéral et inclut le sous-menu déroulant More.) Réorganisez les sections de menu avec les flèches haut et bas sur le côté. Les sections personnalisées visibles globalement peuvent également être ajoutées - utilisez le slug du nom du menu (par exemple, pour un menu personnalisé intitulé Test Menu, ajoutez test-menu dans le paramètre).

Le composant de thème possède initialement les paramètres par défaut. Les administrateurs doivent ajouter les sections de menu personnalisées globales qu’ils souhaitent mélanger dans la liste de réorganisation, puis les réorganiser avec les sections par défaut.

capture d'écran des paramètres par défaut du composant

image
image1632×2188 262 KB

:camera_flash: Captures d’écran

Les captures d’écran ci-dessous montrent la section community, et deux sections de menu personnalisées exemples appelées “Dev Links” (dev-links) et “Toolbox” (toolbox) telles qu’elles apparaissent dans le panneau d’administration du composant à gauche, et pour un utilisateur ordinaire à droite. Les flèches pour déplacer une section de menu vers le haut ou vers le bas dans le paramètre d’administration du composant sont indiquées dans la petite boîte rouge.

image
image1709×1200 222 KB

Ici, le paramètre est configuré pour afficher la section categories par défaut au-dessus de la section community (modes réduit et développé) :

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

Voici un exemple utilisant deux sections personnalisées : l’une appelée dev-links qui est au-dessus de la section community par défaut, et une autre appelée toolbox qui se trouve sous la section tags par défaut.

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

Notez également la section appelée inbox-section dans la capture d’écran d’administration ci-dessus - il s’agit de la section Messages que le composant Section Messages pour le menu latéral insère dans le menu latéral (sous le menu personnalisé toolbox ci-dessus), montrant que ce composant peut également être utilisé pour la déplacer.

De plus, ce composant de thème peut être utilisé conjointement avec les composants Menus latéraux de groupe et Sous-catégories indentées (voir la capture d’écran ci-dessus).

:backhand_index_pointing_right: Notes

  • Après avoir ajouté de nouvelles sections personnalisées globales au paramètre sidebar_menu_order, les utilisateurs du forum verront le nouvel ordre de menu correct lorsqu’ils rechargeront leur navigateur ou réduiront/développeront le menu latéral.
  • La création de nouvelles sections de menu personnalisées globales tandis que ce composant est activé peut entraîner des sections dupliquées temporaires pour l’administrateur jusqu’à ce que le menu latéral soit rendu à nouveau, soit avec un rafraîchissement de page, soit en réduisant et en développant.
  • Les sections de menu personnalisées créées par l’utilisateur apparaîtront toujours en bas du menu latéral pour cet utilisateur, mais sont autrement non affectées.
  • Si le paramètre Admin -> All Site Settings -> Chat Separate Sidebar Mode est défini sur Always, le bouton de chat apparaîtra comme d’habitude en bas, et le composant ignorera les sections de menu de chat par défaut (chat-dms, chat-channels, et chat-search).
Découvrez mes autres créations Discourse
28 « J'aime »
Configuring the default sidebar for your users
Group Sidebar Menus
Messages section for sidebar
2

C’est tellement cool. J’aime vraiment utiliser la configuration catégories (1) puis chat (2). Merci beaucoup pour votre excellent travail Lilly

4 « J'aime »
3

Est-ce toujours pris en charge ? J’ai essayé d’installer et j’ai obtenu l’erreur suivante. J’ai essayé à partir d’ici et aussi en utilisant les instructions manuelles.

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

Oui, c’est le cas. Le lien dans le bouton « installer ce composant de thème » est obsolète, mais le lien en haut est toujours correct et vous pouvez l’utiliser pour installer le composant manuellement

Ou essayez ce bouton

Installer ce composant de thème

2 « J'aime »
5

Je viens de corriger le lien dans le bouton d’installation dans le message initial, donc tout va bien maintenant.

4 « J'aime »
6

J’ai rencontré un petit bug, où l’ordre spécifié ne fonctionne pas lorsque j’ai un écran d’ordinateur de bureau inhabituellement étroit.

Voici à quoi je veux que cela ressemble :

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

Lorsque j’ai un écran de taille étrange (c’est-à-dire mon téléphone pliable - semble avoir une largeur d’environ 640-820), je perds l’ordre :

image
image670×862 60.9 KB

Mais dans l’in

1 « J'aime »
7

oh mon dieu le retour de la barre latérale à 2 colonnes. je pensais que ce truc avait disparu ? je vais jeter un œil…

4 « J'aime »
8

C’était effectivement moi qui étais un peu bête ! J’utilisais l’ancien composant et je ne l’avais même pas remarqué.

J’ai cependant remarqué une chose : ce qui était appelé community est maintenant appelé the-forum. Voici une PR pour nettoyer cela dans les paramètres par défaut :

1 « J'aime »
9

Sur mon forum, il est toujours appelé community et ici aussi sur Meta.

image
image1258×159 35.2 KB

Je me demande comment vous l’avez changé.

2 « J'aime »
10

C’est vraiment bizarre ! Je me souviens avoir changé le texte à un moment donné maintenant que j’y pense. Mais je ne sais pas comment c’est arrivé dans le HTML !

Je vais retirer cette PR et réfléchir un peu plus. Il se pourrait que cela reste une « particularité » de mon site !

1 « J'aime »
11

vous devriez être en mesure d’exécuter quelques commandes rails pour le renommer. si votre section s’appelle bien the-forum, alors je pense que cela devrait fonctionner depuis la console rails :

cd /var/discourse
./launcher enter app
rails c

section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "Terminé : renommé en 'community'."
else
  puts "Section non trouvée."
end

faites absolument une sauvegarde d’abord.

3 « J'aime »
12

Je l’ai enfin essayé. Cependant, il n’a pas trouvé la section :

image
image1147×245 29.6 KB

Je pense que cela risque de rester une particularité du site, n’est-ce pas ?

1 « J'aime »
13

(message supprimé par l’auteur)

2 « J'aime »
14

Remarque : je viens de pousser des correctifs mobiles pour ce composant — il commençait à afficher les lignes horizontales entre les sections de la barre latérale, qui ne devraient apparaître que sur les vues bureau/tablette.

2 « J'aime »
15

J’utilise ce magnifique composant de thème en parallèle du tout aussi charmant composant de Lilly : Discourse Group Sidebar Menus. Mon cas d’usage consiste à créer des menus personnalisés pour les clients, afin que chaque membre d’une organisation ait accès à des liens rapides qui lui sont spécifiquement pertinents, juste en haut, après la section communautaire.

Je tenais à noter pour les futurs voyageurs (y compris moi-même) que le nom de la section de la barre latérale est très sensible et doit correspondre exactement, les espaces dans le nom étant remplacés par des tirets. Ainsi, « Doing business » devient « doing-business ».

Tout cela est très bien, mais lorsque j’ai créé la section de la barre latérale du groupe, j’ai accidentellement ajouté un espace à la fin du nom du groupe, ce qui a donné « doing-business- ». Il m’a fallu un certain temps de dépannage avec les outils de développement pour découvrir cela.

Ces fonctionnalités sont si importantes pour moi que je serais vraiment reconnaissant qu’elles soient envisagées pour être intégrées au cœur du système, afin qu’elles soient plus facilement accessibles et simples à utiliser sur n’importe quel site Discourse. :folded_hands:

2 « J'aime »
16

Merci, Tobias. J’ai en fait mentionné d’utiliser les identifiants de section dans la description du paramètre, et cela est également indiqué dans les exemples d’captures d’écran (voir « dev-links » = LIENS DEV).

Peut-être devrais-je l’ajouter ailleurs que dans les descriptions de paramètres. :thinking:

edit : fait

6 « J'aime »