カテゴリをタイトル付きのセクションに分割する方法

[Drew-ART (Drew)]

以前に誰かが同じことをやったに違いないと感じていますが、ここにはどこにも言及されていません。3 つのサブカテゴリが必要だと感じたのでその修正を加えましたが、正直なところ、他のプラグインにバグを引き起こすほどの価値はありません。

そもそも第 3 の階層は不要で、カテゴリ一覧ページをセクションに分割して、各グループが他とは明確に区別され、ユーザーが即座に何であるか理解できる仕組みが必要です。すでに色分けは行っていますが、各色が何を意味するかをユーザーに説明するものがありません。

カテゴリ一覧表示でカテゴリ間にスペースを空け、そこにタイトルとして単語を挿入したいと考えています。例えば：

プロジェクト
| カテゴリ 1 - サブ 1
| カテゴリ 2
| カテゴリ 3 - サブ 1+2

学習
| カテゴリ 4 - サブ 1
| カテゴリ 5

地域
| カテゴリ 6 - サブ 1+2+3
| カテゴリ 7

[manuel (Manuel Kostka)]

カテゴリとその ID を選択し、その前にタイトルテキストを挿入できます。例：

body [data-category-id="1"]:before {
    content: "プロジェクト";
}

または、この新しいコンポーネントを使用することもできます。これは、カテゴリセクションを追加するためのバックエンド設定を備えています。

GitHub - discourse/discourse-minimal-category-boxes

[MattiaB (Mattia)]

Discourse フォーラムでも同じ CSS 編集を使用しましたが、最新のアップデートでサイドバーが追加されたため、少し壊れてしまいました。

この編集をサイドバーではなく、メインのアウトレットにのみ適用するにはどうすればよいですか？
よろしくお願いします！

編集：ヘッダーのドロップダウンでも同様の問題が発生しています。

[manuel (Manuel Kostka)]

@manuel

body [data-category-id="1"]:before {
    content: "Projects";
}

スタイル宣言をより具体的にする必要があります。コードスニペットは、body要素のどこにでもスタイルを宣言します。それを変更するには、ブラウザツールで調整したい要素を検査し、body をより具体的な宣言に置き換えます。たとえば、次のようになります。

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