Изменение порядка элементов в боковом меню

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

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

:bulb: Введение

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

:woman_technologist:t2: Обзор

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

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

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

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

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

Настройка Описание
Порядок меню боковой панели Настройка списка, содержащая разделы меню по умолчанию. (community — это раздел по умолчанию в верхней части боковой панели, и он включает выпадающее подменю More.) Переставляйте разделы меню с помощью стрелок вверх и вниз сбоку. Можно также добавлять глобально видимые пользовательские разделы — используйте slug имени меню (например, для пользовательского меню с названием 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 на приведённом выше скриншоте администратора — это раздел Сообщения, который компонент Раздел сообщений для боковой панели вставляет в боковую панель (под пользовательским меню toolbox выше), показывая, что этот компонент можно использовать для его перемещения.

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

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

  • После добавления новых глобальных пользовательских разделов в настройку sidebar_menu_order пользователи форума увидят новый правильный порядок меню при перезагрузке браузера или сворачивании/разворачивании боковой панели.
  • Создание новых глобальных пользовательских разделов меню при включённом этом компоненте может привести к временному появлению дублирующихся разделов для администратора до тех пор, пока боковая панель не будет перерисована, либо при обновлении страницы, либо при сворачивании и разворачивании.
  • Пользовательские разделы меню, созданные пользователями, всегда будут отображаться в нижней части боковой панели для этого пользователя, но в остальном не затрагиваются.
  • Если в настройке Администратор -> Все настройки сайта -> Отдельный режим боковой панели чата установлено значение Всегда, кнопка чата будет отображаться как обычно внизу, и компонент будет игнорировать разделы меню чата по умолчанию (chat-dms, chat-channels и chat-search).
Посмотрите мои другие разработки для Discourse
28 лайков
Configuring the default sidebar for your users
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 лайков