Как изменить порядок разделов меню в боковой панели?

Поддержка
1

Всем привет,

У меня возникла проблема с боковым меню в моём форуме Discourse. Порядок разделов, кажется, фиксирован — например, когда я создаю дополнительные пользовательские разделы, они всегда появляются выше раздела «Категории».

Для моего сообщества важно, чтобы эти пользовательские разделы находились ниже категорий, но я не могу найти способа изменить или контролировать этот порядок.

Есть ли способ управлять расположением разделов бокового меню, или в настоящее время невозможно настроить иерархию/порядок этих блоков?

Заранее спасибо за любые советы!

image
image880×1674 121 KB

2

Привет! Вы можете управлять порядком разделов боковой панели с помощью CSS. Просто добавьте новый компонент, используя примерно следующий CSS-код. Перейдите в admin -> темы и компоненты -> компоненты и создайте новый локальный компонент.

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

Добавьте этот код во вкладку CSS, где custom-section-name — это slug-название вашего пользовательского раздела меню:

.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;
  }
}
скриншот вкладки CSS

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

Вам потребуется изменить числа и добавить пользовательские разделы в приведённый выше код в соответствии с вашими конкретными потребностями. Это будет выглядеть примерно так:

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

3

Спасибо! Я как раз нашёл это и внедрил — но на мобильных устройствах это не работало

6

Здесь это, кажется, уже обсуждалось, но это тоже не работает.

7

Класс sidebar-wrapper на мобильных устройствах, как я полагаю, заменён на sidebar-hamburger-dropdown. Поэтому добавление этого класса должно обеспечить работу и на мобильных устройствах:

.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;
  }
}
8

Спасибо! Только что попробовал — но, к сожалению, не сработало. :folded_hands:

9

Да, ещё один нюанс: судя по всему, на мобильных устройствах боковая панель не использует flex. Так что это тоже нужно добавить.

.sidebar-sections {
display: flex;
flex-direction: column;
}

Я проверял это лишь кратко, поэтому не уверен, на что ещё это повлияет. Но именно это является препятствием.

10

Спасибо большое!! Это работает!! Супер!

13

Заголовок моей пользовательской секции содержит пробел, например: «Help users».

Я пытался использовать data-section-name="help users", но это не сработало.

Как указать пробел? Нужно ли здесь какое-либо экранирование?
Пожалуйста, помогите.

РЕДАКТИРОВАНИЕ:
После проверки сайта с помощью инструментов разработчика в Firefox я обнаружил, что решение — использовать «help-users».