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

[Drew-ART (Drew)]

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

上部に小さなトグルがあり、ユーザーは切り替えて好きな方を選択できます。

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

高度な機能を備えた、カスタマイズ可能な折りたたみ可能なカラーコード付きセクションにサイドバーカテゴリを整理するDiscourseテーマコンポーネント。

特徴

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

インストール

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

設定

グローバル設定

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

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

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

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

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

カテゴリのスラッグはURLに含まれています:

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

使用方法

インストールと設定後:

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

高度な機能

グラデーションの背景

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

• 50%実色（選択した背景色）
• 50%透明へのフェード
• モダンで洗練された外観を実現

カテゴリの非表示

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

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

サブカテゴリ

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

バージョン

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

ライセンス

MITライセンス - LICENSEファイルを参照してください

サポート

問題を報告する場所: GitHub · Where software is built

[Lilly (Lillian Louis)]

素晴らしい仕事です

カテゴリ設定のヒント

管理者にカテゴリのスラッグを入力させる代わりに、たとえば 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 (jen)]

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

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

[NateDhaliwal]

はい、そうです。

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

[Drew-ART (Drew)]

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

[Drew-ART (Drew)]

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