Comment contrôler l'ordre des sections du menu dans la barre latérale ?

Soutien
1

Salut à tous,

Je rencontre un problème avec le menu latéral de mon forum Discourse. L’ordre des sections semble fixe — par exemple, lorsque je crée des sections personnalisées supplémentaires, elles apparaissent toujours au-dessus de la section « Catégories ».

Pour ma communauté, il serait important que ces sections personnalisées apparaissent en dessous des catégories, mais je ne trouve aucun moyen de changer ou de contrôler cet ordre.

Existe-t-il un moyen de gérer la position des sections de la barre latérale, ou est-il actuellement impossible de personnaliser la hiérarchie/l’ordre de ces blocs ?

Merci d’avance pour vos conseils !

image
image880×1674 121 KB

2 « J'aime »
2

Bonjour, vous pouvez contrôler l’ordre des sections de la barre latérale avec CSS. Ajoutez simplement un nouveau composant avec un code CSS similaire à celui ci-dessous. Allez dans admin -> thèmes & composants -> composants et créez un nouveau composant local

Screenshot 2025-09-20 at 7.50.50 AM
Screenshot 2025-09-20 at 7.50.50 AM1630×1166 171 KB

et ajoutez ce code dans l’onglet CSS, où custom-section-name est le nom slug d’une section de menu personnalisée :

.sidebar-wrapper { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}
capture d'écran de l'onglet CSS

Screenshot 2025-09-20 at 7.56.44 AM
Screenshot 2025-09-20 at 7.56.44 AM1186×1174 83.1 KB

Vous devrez modifier les nombres et ajouter des sections personnalisées au code ci-dessus pour répondre à vos besoins spécifiques. Cela ressemblera à quelque chose comme ceci :

Screenshot 2025-09-20 at 7.58.17 AM
Screenshot 2025-09-20 at 7.58.17 AM538×1142 32.7 KB

4 « J'aime »
3

Merci ! Je venais de trouver et de mettre cela en œuvre - mais cela ne fonctionnait pas sur mobile

6

C’était apparemment déjà un sujet ici - mais cela ne fonctionne pas non plus

7

La classe sidebar-wrapper sur mobile est remplacée par sidebar-hamburger-dropdown, je crois. L’ajouter devrait donc aussi la faire fonctionner sur mobile :

.sidebar-wrapper, 
.sidebar-hamburger-dropdown { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}
3 « J'aime »
8

Merci ! Je viens de l’essayer - mais malheureusement, ça n’a pas fonctionné. :folded_hands:

9

Ah, encore un détail : le panneau latéral n’utilise apparemment pas flex sur mobile. Vous devrez donc également l’ajouter.

.sidebar-sections {
display: flex;
flex-direction: column;
}
6 « J'aime »
10

Merci beaucoup !! Ça fonctionne !! Super !

1 « J'aime »
13

Le nom de l’en-tête de ma section personnalisée contient un espace, par exemple, « Aide aux utilisateurs ».

J’ai essayé d’utiliser data-section-name=“help users”, mais cela ne fonctionne pas.

Comment puis-je spécifier l’espace ? Faut-il faire un masquage ici ?
Aidez-moi s’il vous plaît

EDIT :
Après avoir inspecté le site à l’aide des outils de développement de FF, j’ai trouvé que la solution est « help-users ».

3 « J'aime »
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.