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

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

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

:bulb: はじめに

Discourse管理者から、グローバルなカスタムセクションを含むサイドバーメニューセクションの順序変更に関する多くのリクエストを見てきました。現在、CSSでこれを行うのは直感的ではなく、多くの人にとって簡単ではありません。また、管理や変更が難しい場合があるため、管理者UIでこれをずっと簡単にできるテーマコンポーネントを作成しました。

:woman_technologist:t2: 概要

このDiscourseテーマコンポーネントを使用すると、管理者は管理者UIでフォーラムのサイドバーメニューセクションの順序を変更できます。これには、すべてのデフォルトセクションおよびグローバルに表示されるカスタムセクションが含まれます。

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

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

  • Discourseテーマ使用の初心者ガイドに従って、このテーマコンポーネントをインストールします。
  • communityセクションは、サイドバーのデフォルトの最上部セクション（Topicsヘッダーを持つメニュー）を指し、Moreドロップダウンサブメニューを含みます。communityセクションの上に1〜2つのセクション（デフォルトまたはカスタム）を移動することをお勧めします。
  • 設定内のデフォルトセクションを削除しないでください。そうすると順序が崩れます（いつでも追加し直すか、設定をリセットできます）。
  • このコンポーネントを設定する最善の方法は、1つのブラウザウィンドウで順序変更リスト設定を持つコンポーネント管理者画面を表示し、別のブラウザウィンドウでテストユーザーとしてフォーラムのサイドバービューを並べて表示することです。リスト内のメニューセクションの順序を変更するたびにページをリロードしてください。
  • コンポーネントの管理者設定では、カスタムセクションにスラッグ形式の命名規則を使用するようにしてください。そうしないと無視されます（例：「Custom Menu Name」にはcustom-menu-name、「Useful Links」にはuseful-linksなどを使用）。

: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というセクションに注目してください。これは、Messages section for sidebarコンポーネントがサイドバーに挿入するMessagesセクションです（上記のtoolboxカスタムメニューの下）。このコンポーネントを使用してこれを移動することもできることを示しています。

さらに、このテーマコンポーネントはGroup sidebar menusおよびIndented subcategoriesコンポーネントと併用できます（上記のスクリーンショットを参照）。

:backhand_index_pointing_right: 注意事項

  • sidebar_menu_order設定に新しいグローバルカスタムセクションを追加した後、フォーラムユーザーはブラウザをリロードするか、サイドバーを折りたたんで展開すると、新しい正しいメニュー順序を確認できます。
  • このコンポーネントが有効な間に新しいグローバルカスタムメニューセクションを作成すると、サイドバーが再レンダリングされるまで（ページのリフレッシュまたは折りたたみ/展開による）、管理者に一時的に重複したセクションが表示される可能性があります。
  • ユーザー作成のカスタムメニューセクションは、常にそのユーザーのサイドバーの最下部に表示されますが、それ以外は影響を受けません。
  • Admin -> All Site Settings -> Chat Separate Sidebar Mode設定がAlwaysに設定されている場合、チャットボタンは通常通り最下部に表示され、コンポーネントはデフォルトのチャットメニューセクション（chat-dms、chat-channels、およびchat-search）を無視します。
私の他のDiscourse関連コンテンツをチェック
「いいね！」 29
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:

「いいね！」 2
16

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

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

編集：完了しました

「いいね！」 6
17

このテーマコンポーネントで、サイドバーに同じスラッグを使用して並べ替えることは可能ですか？

私のユースケースは、同じタイトルを表示しますが、無料ユーザーとサブスクライブユーザーの間でアクセスレベルを分けることです。

18

具体的に何を意味しているのかよく分かりません？これは単にセクションの順序を入れ替えるだけです。スラッグ名は一意である必要があります。異なる名前を付けて、Group Sidebar Menus と併用してください。

19

もっともな指摘です。ただ、「新しい」サイドバーセクションに非常に似た名前を考え出す必要があります。

同じナビバーセクション内で2つの異なるリンクを使い、適切に区別しようとしています。通常見られる「アクセス権がありません」という表示は、私には少し扱いにくいものです。

20

このコンポーネントに関連して、これが何を意味するのか全く分かりません