Перестановка бокового меню в Discourse

Настройка Компонент темы
1
:information_source: Краткое содержание Позволяет изменять порядок разделов бокового меню по умолчанию и пользовательских разделов
:eyeglasses: Предпросмотр https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: Репозиторий https://github.com/Lillinator/discourse-sidebar-menu-reorder
:question: Руководство по установке Как установить тему или компонент темы

Установить этот компонент темы

:bulb: Введение

Я видел множество запросов от администраторов Discourse, желающих изменить порядок разделов бокового меню, включая глобальные пользовательские разделы. Поскольку в настоящее время это не очень интуитивно понятно и просто для большинства людей с помощью CSS, а управление и внесение изменений может быть затруднительным, я создал компонент темы, который значительно упрощает эту задачу в интерфейсе администратора.

:woman_technologist:t2: Обзор

Этот компонент темы Discourse позволяет администраторам изменять порядок разделов бокового меню форума в интерфейсе администратора, включая все разделы по умолчанию, а также любые глобально видимые пользовательские разделы.

Компонент работает как для настольных, так и для мобильных видов бокового меню, а также для режима выпадающего списка в заголовке (хотя в идеале он предназначен для режима бокового меню).

:wrench: Установка и настройка

  • Установите этот компонент темы в соответствии с Руководством для начинающих по использованию тем Discourse.
  • Раздел community относится к верхнему разделу бокового меню по умолчанию — меню с заголовком Topics и включающее выпадающее подменю More; рекомендуется перемещать не более одного или двух разделов (по умолчанию или пользовательских) выше раздела community.
  • Не удаляйте никакие разделы по умолчанию в настройках, иначе они потеряют свой порядок (вы всегда можете добавить их обратно или сбросить настройку).
  • Лучший способ настроить этот компонент — иметь экран администратора компонента с настройкой списка сортировки в одном окне браузера, а вид бокового меню форума как тестового пользователя в другом окне рядом; перезагружайте страницу после каждого изменения порядка разделов меню в списке.
  • В настройке администратора компонента обязательно используйте формат именования через дефис для пользовательских разделов, иначе они будут проигнорированы (например, используйте custom-menu-name для «Custom Menu Name», useful-links для «Useful Links» и т. д.)

:gear: Настройки

Настройка Описание
Sidebar menu order Настройка списка, содержащая разделы меню по умолчанию. (community — это раздел по умолчанию в верхней части бокового меню и включает выпадающее подменю More.) Измените порядок разделов меню с помощью стрелок вверх и вниз сбоку. Также можно добавить глобально видимые пользовательские разделы — используйте слаг имени меню (например, для пользовательского меню с заголовком Test Menu добавьте test-menu в настройку).

Компонент темы изначально имеет настройки по умолчанию. Администраторам необходимо добавить любые глобальные пользовательские разделы меню, которые они хотят включить в список сортировки, а затем изменить их порядок вместе с разделами по умолчанию.

снимок экрана настроек компонента по умолчанию

image
image1632×2188 262 KB

:camera_flash: Снимки экрана

На снимках экрана ниже показан раздел community и два примера пользовательских разделов меню под названием «Dev Links» (dev-links) и «Toolbox» (toolbox) так, как они отображаются в панели администратора компонента слева и у обычного пользователя справа. Стрелки для перемещения раздела меню вверх и вниз в настройке администратора компонента показаны в маленьком красном квадрате.

image
image1709×1200 222 KB

Здесь настройка конфигурирована так, чтобы раздел categories по умолчанию отображался выше раздела community (в свернутом и развернутом режимах):

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

Вот пример с двумя пользовательскими разделами: один под названием dev-links, расположенный выше раздела community по умолчанию, и другой под названием toolbox, расположенный ниже раздела tags по умолчанию.

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

Также обратите внимание на раздел под названием inbox-section на снимке экрана администратора выше — это раздел Messages, который компонент Раздел сообщений для бокового меню вставляет в боковое меню (под пользовательским меню toolbox выше), показывая, что этот компонент также можно использовать для его перемещения.

Кроме того, этот компонент темы можно использовать вместе с компонентами Меню бокового меню групп и Вложенные подкатегории (см. на снимке экрана выше).

:backhand_index_pointing_right: Примечания

  • После добавления новых глобальных пользовательских разделов в настройку sidebar_menu_order пользователи форума увидят правильный новый порядок меню при перезагрузке браузера или сворачивании/разворачивании бокового меню.
  • Создание новых глобальных пользовательских разделов меню при включенном этом компоненте может привести к временному появлению дублирующихся разделов для администратора до тех пор, пока боковое меню не будет перерисовано, либо при обновлении страницы, либо при сворачивании и разворачивании.
  • Пользовательские пользовательские разделы меню всегда будут отображаться в нижней части бокового меню для этого пользователя, но в остальном на них это не влияет.
  • Если настройка Admin -> All Site Settings -> Chat Separate Sidebar Mode установлена в значение Always, кнопка чата будет отображаться как обычно в нижней части, а компонент будет игнорировать разделы меню чата по умолчанию (chat-dms, chat-channels и chat-search).
Посмотрите мои другие материалы по Discourse
27 лайков
Configuring the default sidebar for your users
Discourse Group Sidebar Menus
Messages section for sidebar
2

Это так круто. Мне очень нравится использовать категории (1), а затем настройку чата (2). Большое спасибо за вашу прекрасную работу, Лилли.

4 лайка
3

Это всё ещё поддерживается? Я попытался установить, но получил следующую ошибку. Пробовал установить как с этой страницы, так и по ручной инструкции.

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

Да, это так. Ссылка в кнопке «Установить этот компонент темы» устарела, но ссылка вверху по-прежнему верна, и вы можете использовать её для ручной установки компонента.

Или попробуйте эту кнопку:

Установить этот компонент темы

2 лайка
5

Я только что исправил ссылку в кнопке установки в первом посте, так что теперь всё в порядке.

4 лайка
6

Я столкнулся с ошибкой: указанный порядок не работает, когда у меня необычно узкий экран «десктопа» — например, на моем складном телефоне.

Краткое описание

Вот как я хочу, чтобы это выглядело:

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

Когда у меня экран странного размера (похоже, ширина около 640–820 пикселей), порядок теряется:

image
image670×862 60.9 KB

1 лайк
7

О боже, возвращение двухколоночной боковой панели. Я думал, что эта штука уже ушла? Посмотрю…

редактирование: я не могу воспроизвести это — когда я изменяю размер браузера на своём iPad, чтобы получить компактную двухколоночную боковую панель, она отображается в правильном порядке, указанном компонентом. Когда я изменяю размер области просмотра с помощью консоли разработчика, боковая панель также показывает её в правильном порядке (независимо от размера области просмотра). :woman_shrugging:t2:

IMG_0012
IMG_00121289×1163 108 KB

Screenshot 2026-03-03 at 3.21.39 AM
Screenshot 2026-03-03 at 3.21.39 AM1396×884 43.2 KB

4 лайка
8

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

Однако я заметил одну вещь: то, что называлось community, теперь называется the-forum. Вот PR, чтобы привести это в порядок в настройках по умолчанию:

1 лайк
9

На моём форуме оно всё ещё называется community, и здесь, на Meta, тоже.

image
image1258×159 35.2 KB

Интересно, как вы это изменили.

2 лайка
10

Это действительно странно! Теперь, когда я об этом подумал, я вспоминаю, что в какой-то момент менял текст на нём. Но не понимаю, как это попало в HTML!

Я отзову этот PR и ещё немного поломает голову. Возможно, это останется своеобразной «фишкой» моего сайта!

1 лайк
11

Вы должны иметь возможность выполнить несколько команд Rails, чтобы переименовать его обратно. Если ваша секция действительно называется the-forum, то, думаю, это должно сработать из консоли 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 "Готово: переименовано в 'community'."
else
  puts "Секция не найдена."
end

Обязательно сначала сделайте резервную копию.

3 лайка
12

Наконец-то попробовал это. Но раздел так и не нашёл:

image
image1147×245 29.6 KB

Кажется, это просто останется странностью этого сайта, да?

1 лайк
13

@nathank — ок, я поэкспериментировал с этим на тестовом экземпляре и смог переименовать секцию the-forum, а затем вернуть название community.

Если в консоли Rails выполнить:

SidebarSection.where(public: true).pluck(:id, :title, :section_type)

что выведется?

Я предполагаю, что результат будет примерно таким:

=> [..., [1, "the-forum", "community"]]

или

=> [..., [1, "The Forum", "community"]]

что подтвердит, что section_type = community, но с другим заголовком. Тогда мы можем выполнить:

# найти секцию сообщества по умолчанию через enum в Rails
section = SidebarSection.find_by(section_type: :community)

# запасной вариант: если не найдено по типу, ищем по конкретному пользовательскому заголовку
section ||= SidebarSection.find_by(title: 'the-forum', public: true)

if section
  section.update!(title: 'Community')
  puts "Успех: секция переименована обратно в 'Community'."
else
  puts "Ошибка: секция не найдена."
end

Скриншот моей консоли Rails, где показано, что секция сообщества с заголовком the-forum переименована обратно в Community, а затем подтверждено изменение:

Screenshot 2026-04-07 at 10.42.57 PM
Screenshot 2026-04-07 at 10.42.57 PM1574×690 144 KB

2 лайка
14

Примечание: я только что внес исправления для мобильных устройств в этот компонент — он начал отображать горизонтальные линии между секциями боковой панели, которые должны быть видны только на настольных компьютерах и планшетах.

2 лайка
15

Я использую этот замечательный компонент темы вместе с не менее прекрасным компонентом Лилли: Discourse Group Sidebar Menus. Моя задача — создавать пользовательские меню для клиентов, чтобы каждый в организации мог иметь быстрые ссылки, актуальные именно для него, прямо вверху, сразу после раздела сообщества.

Хочу отметить для будущих путешественников (включая меня самого), что название раздела боковой панели очень чувствительно и должно точно совпадать: пробелы в имени заменяются на дефисы. Так, «Doing business» превращается в «doing-business».

Всё это хорошо, но когда я создавал раздел боковой панели группы, случайно добавил пробел в конце названия группы, и оно стало «doing-business-». Мне потребовалось некоторое время на отладку с помощью инструментов разработчика, чтобы обнаружить это.

Эти функции настолько важны для меня, что я был бы очень признателен, если бы они были рассмотрены для включения в ядро, чтобы их можно было легко использовать на любом сайте Discourse. :folded_hands:

2 лайка
16

Спасибо, Тобиас. Я на самом деле упоминал об использовании слаг-названий разделов в описании настроек, и это также указано в примерах на скриншотах (см. «dev-links» = DEV LINKS). [quote=“Lilly, post:1, topic:394049”]
Можно также добавить глобально видимые пользовательские разделы — используйте слаг-название меню (например, для пользовательского меню с названием «Test Menu» добавьте test-menu в настройку).
[/quote]

Возможно, мне стоит добавить это где-то ещё, кроме описаний настроек. :thinking:

edit: готово

6 лайков