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 つのウィンドウに並べて表示し、リスト内の各メニューセクションの順序変更後にページをリロードすることです。

:gear: 設定

設定 説明
Sidebar menu order デフォルトのメニューセクションを含むリスト設定です（community はサイドバーのデフォルトの最上部セクションで、More ドロップダウンサブメニューを含みます）。サイドの上下矢印でメニューセクションの順序を変更できます。グローバルに表示されるカスタムセクションも追加できます。メニュー名のスラッグを使用してください（例：「Test Menu」というカスタムメニューの場合、設定に 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 というセクションに注意してください。これは、サイドバー用のメッセージセクション コンポーネントがサイドバーに挿入する「メッセージ」セクション（上記のカスタムメニュー 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