Как разделить категории на секции с заголовками?

Разработка
1

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

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

Я хочу добавить пробел между категориями в представлении списка категорий и вставить туда слово-заголовок. Например:

Проекты
| Категория 1 - подкатегория 1
| Категория 2
| Категория 3 - подкатегории 1+2

Обучение
| Категория 4 - подкатегория 1
| Категория 5

Местное
| Категория 6 - подкатегории 1+2+3
| Категория 7

2

Вы можете выбирать категории по их идентификаторам и вставлять свои заголовки перед ними, например:

body [data-category-id="1"]:before {
    content: "Проекты";
}

В качестве альтернативы можно использовать этот новый компонент, который включает настройки бэкенда для добавления разделов категорий:

3

Я применил тот же CSS-редактирование к своему форуму Discourse, но с последними обновлениями, добавившими боковую панель, всё немного сломалось:

image
image823×1257 54 KB

Как применить это редактирование только к основному контейнеру, а не к боковой панели?
Спасибо!

РЕДАКТИРОВАНИЕ: Это также происходит в выпадающем меню заголовка:

image
image418×801 20.8 KB

4

Вам просто нужно сделать объявление стилей более конкретным. Приведённый фрагмент кода объявляет стили для любого элемента body. Чтобы изменить это, используйте инструменты браузера для инспекции элемента, который вы хотите настроить, и замените body на более конкретное объявление, например:

#main-outlet .category-list {
  [data-category-id="1"]:before {
     content: "Projects";
  }
}