サイドバーカテゴリ整理ツール

Drew-ART · 2025 年 11 月 21 日午前 12:22

サイドバーの整理ツールを作成しました。以前、これについて多くの議論があり、他の人は必要ないと感じていましたが、私のユーザーはあまり技術に詳しくなく、最初はフォーラムの仕組みをよく理解していないと感じていたため、このドロップダウン整理ツールを作成しました。

このテーマコンポーネントをインストール

上部に小さなトグルがあり、ユーザーはデフォルトとこれとを切り替えて、好みのものを選択できます。経験豊富なユーザーの多くはナビゲーションサイドバーをカスタマイズしたいと思いますが、ほとんどの新しいユーザーはそうではないと思うので、そこに配置しました。

サイドバーカテゴリオーガナイザー

Discourseのテーマコンポーネントで、サイドバーのカテゴリをカスタマイズ可能な折りたたみ可能な色分けされたセクションに整理し、高度な機能を提供します。

特徴

10個の折りたたみ可能なセクション: カテゴリを最大10個のカスタムセクションにグループ化
色のカスタマイズ: 各セクションヘッダーの背景色とテキスト色を設定
グラデーションの背景: 写真のようなオプションのグラデーションフェード効果
カテゴリバッジ: カテゴリの横にあるデフォルトのDiscourseカラーバッジの表示/非表示を切り替え可能
サブカテゴリのサポート: セクションごとのトグルでサブカテゴリの表示/非表示を切り替え（インデント表示）
カテゴリの非表示: すべてのビューから特定のカテゴリを非表示にする
双方向トグル: カスタムセクションとデフォルトのDiscourseビューを切り替え（トグルボタンは両方のビューに表示）
永続的な状態: 開いている/閉じているセクションとユーザーのビュー設定を記憶
権限対応: ユーザーがアクセス権を持つカテゴリのみを表示
未分類のカテゴリ: 分類されていないカテゴリを自動的に別のセクションに表示
モバイル対応: すべてのデバイスサイズで動作

インストール

Discourseインスタンスで 管理 → カスタマイズ → テーマ に移動します
インストール → Gitリポジトリから をクリックします
次を入力します: https://github.com/focallocal/sidebar-categories-organizer
インストール をクリックします
コンポーネントをアクティブなテーマに追加します

設定

グローバル設定

サイドバーオーガナイザーを有効化: カスタムビューのオン/オフを切り替え
トグルボタンを表示: ビューを切り替えるための📂アイコンを表示（カスタムビューとデフォルトビューのヘッダーに表示）
カテゴリバッジを表示: カテゴリ名の横に色付きの四角を表示
グラデーションフェードを使用: セクションヘッダーにグラデーション背景効果を有効化（50%の固定色、50%は透明にフェード）
非表示にするカテゴリ: すべてのビューから非表示にするカテゴリのスラッグをコンマ区切りで指定（例: staff,private）
デフォルトビュー: 最初に読み込むビューを選択（カスタムまたはデフォルト）

セクション設定 (1-10)

各セクションには以下があります:

有効: セクションのオン/オフを切り替え
タイトル: セクションヘッダーのテキスト
背景色: セクションヘッダーの背景色のカラーピッカー
テキストの色: ヘッダーテキストのカラーピッカー
カテゴリ: カテゴリのスラッグをコンマ区切りで指定（例: general,support,feedback）
サブカテゴリを表示: このセクションのサブカテゴリを表示/非表示にするトグル
デフォルトで開く: セクションが展開された状態で開始するか折りたたまれた状態で開始するか

カテゴリスラッグの見つけ方

カテゴリのスラッグはURLにあります:

yoursite.com/c/general/5 → スラッグは general
yoursite.com/c/feature-requests/12 → スラッグは feature-requests

使用方法

インストールと設定後:

カスタムビュー: カテゴリが設定したセクションに色付きヘッダーでグループ化されます
展開/折りたたみ: セクションヘッダーをクリックしてコンテンツの表示/非表示を切り替えます
ビューの切り替え: ヘッダーの📂アイコンをクリックして、カスタムビューとデフォルトビューを切り替えます
- カスタムビューの場合: トグルボタンはカスタムビューのヘッダーに表示されます
- デフォルトビューの場合: トグルボタンはデフォルトの「カテゴリ」ヘッダーに表示されます
サブカテゴリ: セクションごとに有効にすると、サブカテゴリが親カテゴリの下にインデント表示されます
カテゴリバッジ: 小さな色付きの四角（有効な場合）が各カテゴリの色を表示します
未分類のカテゴリ: セクションに割り当てられていないカテゴリは「その他のカテゴリ」に表示されます
設定: ビューの選択と開閉状態はブラウザごとに保存されます

高度な機能

グラデーションの背景

有効にすると、セクションヘッダーはスムーズなグラデーションを使用します:

50%の固定色（選択した背景色）
50%は透明にフェード
モダンで洗練された外観を作成

カテゴリの非表示

サイドバーから完全に非表示にするカテゴリのスラッグを指定します:

スタッフ専用カテゴリや廃止されたカテゴリに便利
カスタムビューとデフォルトビューの両方に適用されます
コンマ区切りのリスト（例: staff,private,archived）

サブカテゴリ

セクションごと（グローバルではない）にトグル可能
インデント表示とわずかに小さいフォント
視覚的な階層のために不透明度を低く設定
カテゴリバッジの色は維持されます

バージョン

現在: 1.0.1
最小Discourse: 3.3.0
作成者: Andy@Focallocal

ライセンス

MITライセンス - LICENSEファイルを参照

サポート

問題を報告: GitHub · Where software is built

Lilly · 2025 年 11 月 21 日午前 12:43

素晴らしい仕事です

カテゴリ設定のヒント

管理者にカテゴリのスラッグを入力させる代わりに、たとえば settings.yml ファイルでこれを使用できます。

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

これにより、次のような設定が得られます。

グループのドロップダウンを作成したい場合も、同様のことをグループに対して行うことができます。

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

これにより、次のようなものが得られます。

jenmck · 2025 年 11 月 21 日午前 6:11

これをとても気に入っていますし、確かに私も考えたことがあるので、ありがとうございます！

質問ですが、ユーザーが特定のセクション内のどのカテゴリにもアクセスできない場合、そのセクション自体はユーザーに表示されますか？

NateDhaliwal · 2025 年 11 月 21 日午前 6:22

はい、そうです。

github.com/focallocal/sidebar-categories-organizer

javascripts%2Fdiscourse%2Fapi-initializers%2Fsidebar-organizer.js

main


      
          const currentUser = api.getCurrentUser();
          
          // Get categories to hide
          const hiddenSlugs = settings.categories_to_hide
            ? settings.categories_to_hide.split(",").map(s => s.trim())
            : [];
          
          // Filter categories based on user permissions and hidden list
          const accessibleCategories = allCategories.filter(cat => {
            if (hiddenSlugs.includes(cat.slug)) return false;
            if (!currentUser) return !cat.read_restricted;
            // Category is accessible if not read_restricted, or user has permission
            return true; // Discourse handles permissions in the category objects
          });
          
          const customContainer = document.createElement("div");
          customContainer.id = "custom-categories-sidebar";
          customContainer.className = "sidebar-section-wrapper";
          
          // Track which categories are in groups
          const groupedCategorySlugs = new Set();

Drew-ART · 2025 年 11 月 21 日午後 6:52

いいえ、カテゴリ/サブカテゴリは、アクセス権がない場合は非表示になります。また、設定から任意に非表示にすることもできます。

Drew-ART · 2025 年 11 月 21 日午後 6:53

リリーさん、ありがとうございます。それを他の最近のコンポーネントも更新して、より良くします。

Drew-ART · 2025 年 11 月 21 日午後 11:55

プラグインが、素敵なドロップダウンセレクターで更新されました。

jenmck · 2025 年 11 月 23 日午前 7:51

なるほど、その部分は理解しました。しかし、カテゴリだけでなく、実際のセクションについて尋ねています。

例えば、次のような設定があるとします。

動物

猫
犬

雲

ニンバス
積雲

曜日

土曜日
日曜日

ユーザーがニンバスと積雲の両方にアクセスできない場合、次のように、カテゴリのない「雲」セクションはユーザーに表示されるのでしょうか。

動物

猫
犬

雲

曜日

土曜日
日曜日

それとも、次のように、「雲」セクションはまったく表示されないのでしょうか。

動物

猫
犬

曜日

土曜日
日曜日

Drew-ART · 2025 年 11 月 24 日午前 2:17

ユーザーがいずれのカテゴリも表示する権限を持っていない場合、セクション全体（タブ）が非表示になります。

Heliosurge · 2025 年 12 月 2 日午前 5:06

これはかなりクールですね！

アイデアを再考させられます（笑）。

カスタムセクションをフォーカスされたメニューでレイアウトするために、Doc Categoriesプラグインの使用を検討していました。しかし、色とアイコンを許可するために見た目を整える必要があります。

Opに「Install component」を追加するためのマークダウンがあります。

Metaで何か変更がありましたか？Androidでは何かを選択して引用符で囲むことができないようです。- ああ、解決したようです。

Heliosurge · 2025 年 12 月 2 日午前 5:26

やあ、リリー、「コンポーネントのインストール」のMarkdownを教えてもらえますか

NateDhaliwal · 2025 年 12 月 2 日午前 5:51

このコンポーネントの例はこちらです。