Discourse サイドバーメニューの並び替え

カスタマイズ テーマコンポーネント
1
:information_source: 概要 デフォルトおよびカスタムサイドバーメニューセクションの並べ替えを可能にします
:eyeglasses: プレビュー https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: リポジトリ https://github.com/Lillinator/discourse-sidebar-menu-reorder
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法

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

:bulb: はじめに

Discourse の管理者から、グローバルカスタムセクションを含むサイドバーメニューセクションの並べ替えを希望するリクエストが多数寄せられていました。現在、CSS でこれを行うことは直感的でも明快でもなく、管理や変更が難しいため、管理者 UI でこれを大幅に容易にするテーマコンポーネントを作成しました。

:woman_technologist:t2: 概要

この Discourse テーマコンポーネントを使用すると、管理者は管理者 UI でフォーラムのサイドバーメニューセクション（デフォルトのセクションとグローバル表示のカスタムセクションのすべてを含む）の並べ替えを行うことができます。

このコンポーネントは、デスクトップおよびモバイルのサイドバー表示、およびヘッダーのドロップダウンモード（ただし、理想的にはサイドバーモード向けに設計されています）の両方で動作します。

:wrench: インストールと設定

  • Discourse テーマの初心者向けガイドに従って、このテーマコンポーネントをインストールしてください。
  • community セクションとは、サイドバーのデフォルトの最上部セクション（トピックヘッダーを持つメニューで、その他ドロップダウンサブメニューを含む）を指します。community セクションの上に移動するセクション（デフォルトまたはカスタム）は、1 つまたは 2 つまでにすることを推奨します。
  • 設定からデフォルトのセクションを削除しないでください。順序が崩れます（いつでも追加し直すか、設定をリセットできます）。
  • このコンポーネントを設定する最良の方法は、並べ替えリスト設定を含むコンポーネント管理画面を 1 つのブラウザウィンドウに、テストユーザーとしてのフォーラムサイドバー表示をもう 1 つのウィンドウに並べて表示し、リスト内のメニューセクションの順序を変更するたびにページをリロードすることです。
  • コンポーネント管理設定では、カスタムセクションにスラッグ名形式を使用してください。そうしないと無視されます（例：「カスタムメニュー名」の場合は custom-menu-name、「便利なリンク」の場合は useful-links など）。

:gear: 設定

設定 説明
Sidebar menu order デフォルトのメニューセクションを含むリスト設定です（community はサイドバーのデフォルトの最上部セクションで、More ドロップダウンサブメニューを含みます）。サイドの上下矢印でメニューセクションの順序を変更できます。グローバル表示のカスタムセクションも追加可能です。メニュー名のスラッグを使用してください（例：「テストメニュー」というカスタムメニューの場合は test-menu を設定に追加）

このテーマコンポーネントは、初期状態でデフォルトの設定になっています。管理者は、順序リストに混ぜたいグローバルカスタムメニューセクションを追加し、デフォルトのセクションと一緒に並べ替える必要があります。

デフォルトのコンポーネント設定のスクリーンショット

image
image1632×2188 262 KB

:camera_flash: スクリーンショット

以下のスクリーンショットは、コンポーネント管理パネル（左）と一般ユーザー（右）に表示される community セクションと、2 つの例示的なカスタムメニューセクション「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

以下は、2 つのカスタムセクションを使用した例です。1 つはデフォルトの community セクションの上に配置された dev-links、もう 1 つはデフォルトの tags セクションの下に配置された toolbox です。

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

また、上記の管理スクリーンショットに表示されている inbox-section というセクションに注意してください。これは、サイドバー用のメッセージセクション コンポーネントがサイドバーに挿入する Messages セクション（上記のカスタムメニュー toolbox の下）であり、このコンポーネントを使用すればその位置も移動できることを示しています。

さらに、このテーマコンポーネントは、グループサイドバーメニュー および インデントされたサブカテゴリ コンポーネントと併用可能です（上記のスクリーンショットを参照）。

:backhand_index_pointing_right: 注意事項

  • sidebar_menu_order 設定に新しいグローバルカスタムセクションを追加した後、フォーラムユーザーはブラウザをリロードするか、サイドバーを折りたたんで展開すると、新しい正しいメニュー順序を確認できます。
  • このコンポーネントが有効な状態で新しいグローバルカスタムメニューセクションを作成すると、サイドバーが再レンダリングされるまで（ページをリロードするか、折りたたんで展開するか）、管理者に一時的な重複セクションが表示されることがあります。
  • ユーザー作成のカスタムメニューセクションは、常にそのユーザーのサイドバーの最下部に表示されますが、それ以外は影響を受けません。
  • Admin -> All Site Settings -> Chat Separate Sidebar Mode 設定が Always に設定されている場合、チャットボタンは通常通り最下部に表示され、コンポーネントはデフォルトのチャットメニューセクション（chat-dms、chat-channels、chat-search）を無視します。
他の Discourse 関連のコンテンツもチェックしてください
「いいね！」 27
Configuring the default sidebar for your users
Discourse Group Sidebar Menus
Messages section for sidebar
2

それは素晴らしいです。カテゴリ (1) の後にチャット (2) を設定する使い方がとても気に入りました。リリーさんの素晴らしい仕事にとても感謝しています。

「いいね！」 4
3

これはまだサポートされていますか？インストールを試みたところ、以下のエラーが発生しました。こちらから試したほか、手動の手順を使っても試しました。

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

はい、その通りです。「このテーマコンポーネントをインストール」ボタンのリンクは古いですが、上部にあるリンクはまだ正しく、手動でコンポーネントをインストールするためにそれを使用できます。

または、このボタンをお試しください。

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

「いいね！」 2
5

OPのインストールボタンのリンクを修正したので、すべて問題ありません。

「いいね！」 4
6

折りたたみ式スマートフォンなどで「デスクトップ」画面が異常に狭い場合に、指定した順序が機能しないというバグに遭遇しました。

このように表示させたいです。

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

画面サイズが奇妙な場合（幅が640〜820ピクセル程度）、順序が失われます。

image
image670×862 60.9 KB

「いいね！」 1
7

ああ、2カラムのサイドバーが戻ってきた。あれはなくなったと思っていたのに？見てみます…

「いいね！」 4
8

私が少し鈍かっただけでした！古いコンポーネントを使用しており、それに気づいていませんでした。

ただ一つ気づいた点があります。community と呼ばれていたものが、代わりに the-forum と呼ばれるようになっています。デフォルトを整理するためのプルリクエストは以下の通りです:

「いいね！」 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

(投稿が投稿者によって削除されました)

「いいね！」 2
14

注: このコンポーネント向けにいくつかのモバイル対応の修正をプッシュしました。以前は、デスクトップやタブレットでのみ表示されるべきサイドバーセクション間の水平線が、誤ってレンダリングされていました。

「いいね！」 2
15

私はこの素敵なテーマコンポーネントを、Lilly の同様に素晴らしい Discourse Group Sidebar Menus コンポーネントと併用しています。私のユースケースは、組織内の全員がコミュニティセクションの直後に、自分に関連するクイックリンクをすぐに見られるように、クライアント向けのカスタムメニューを作成することです。

今後の利用者（自分自身も含む）のために注意点として記しておきますが、サイドバーのセクション名は非常に敏感で、正確に一致している必要があります。名前のスペースはダッシュに変換されます。例えば「Doing business」は「doing-business」となります。

これはこれで問題ないのですが、グループのサイドバーセクションを作成した際、グループ名の末尾に誤ってスペースを入れてしまい、「doing-business-」となってしまいました。これは開発者ツールを使ってトラブルシューティングを行うまで気づきませんでした。

これらの機能は私にとって非常に重要です。コア機能として追加され、Discourse サイト全体でより手軽に利用できるよう検討していただければ幸いです。:folded_hands:

「いいね！」 1
16

ありがとう、トビアス。実は設定の説明にセクション名のスラッグを使用するよう記載しており、スクリーンショットの例（「dev-links」＝「DEV LINKS」）でも示されています。

もしかしたら、設定の説明以外の場所にも追加したほうがいいかもしれませんね：thinking:

編集：完了しました

「いいね！」 4