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

[Lilly]

	概要	デフォルトおよびカスタムのサイドバーメニューセクションの並べ替えを可能にします
	プレビュー	Theme Creator
	リポジトリ	GitHub - Lillinator/discourse-sidebar-menu-reorder: A Discourse theme component that allows admins to change the order of the sidebar menu sections, including the community section, and any global custom menu sections.
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマは初めてですか？	Discourseテーマを使用するための初心者ガイド

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

はじめに

Discourse管理者がサイドバーメニューセクション（グローバルカスタムセクションを含む）の順序を変更したいという要望をいくつか見かけました。現在、CSSでこれを行うのはほとんどの人にとって直感的でも簡単でもなく、管理や変更が難しいため、管理UIでより簡単にできるようにするテーマコンポーネントを作成しました。

概要

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

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

---

インストールと設定

• Discourseテーマを使用するための初心者ガイドに従って、このテーマコンポーネントをインストールします。
• communityセクションは、サイドバーのデフォルトの最上位セクション（トピックヘッダーを持つメニューとその他のドロップダウンサブメニューを含む）を指します。communityセクションの上に移動するセクション（デフォルトまたはカスタム）は1つか2つまでにとどめることをお勧めします。
• 設定でデフォルトのセクションを削除しないでください。順序が狂います（いつでも追加し直したり、設定をリセットしたりできます）。
• このコンポーネントを設定する最良の方法は、コンポーネント管理画面（並べ替えリスト設定がある）を1つのブラウザウィンドウに、テストユーザーとしてのフォーラムサイドバー表示をもう1つのウィンドウに並べて表示し、リスト内のメニューセクションの順序を変更するたびにページをリロードすることです。

---

設定

設定	説明
Sidebar menu order	デフォルトのメニューセクションを含むリスト設定。community（サイドバーのデフォルトの最上位セクションで、Moreドロップダウンサブメニューを含む）。メニューセクションを横にある上下の矢印で並べ替えます。グローバルに表示されるカスタムセクションも追加できます。メニュー名のスラッグを使用します（例：Test Menuというタイトルのカスタムメニューの場合、設定にtest-menuを追加します）。

テーマコンポーネントには、初期設定が適用されています。管理者は、順序付けリストに混在させたいグローバルカスタムメニューセクションを追加し、デフォルトセクションと一緒に並べ替える必要があります。

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

---

スクリーンショット

以下のスクリーンショットは、コンポーネント管理パネルの左側と、通常のユーザーから見た右側に表示される、「Dev Links」（dev-links）と「Toolbox」（toolbox）という2つのカスタムメニューセクションとcommunityセクションを示しています。コンポーネント管理設定でメニューセクションを上下に移動するための矢印は、小さな赤いボックス内に示されています。

---

ここでは、設定によりデフォルトのcategoriesセクションがcommunityセクションの上に表示されるように構成されています（折りたたまれた状態と展開された状態）：

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

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

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

---

注意事項

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

[David_Ghost]

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

[R23D_Printing]

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

[Moin]

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

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

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

[nathank (Nathan Kershaw)]

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

[nathank (Nathan Kershaw)]

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

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

   

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

[Lilly]

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

[nathank (Nathan Kershaw)]

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

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

Update settings.yml (#3)

[Moin]

@nathank

communityと呼ばれていたものが、代わりにthe-forumと呼ばれるようになりました

私のフォーラムではまだcommunityと呼ばれており、ここMetaでも同様です。

どのように変更したのか不思議に思います。

[nathank (Nathan Kershaw)]

それは確かに奇妙ですね！今思い返すと、ある時点でテキストを変更したことを覚えています。しかし、それがどのようにHTMLに入り込んだのかはわかりません！

そのPRを取り下げて、もう少し頭を悩ませる必要があります。私のサイトの「癖」として残るしかないかもしれません！

[Lilly]

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

必ず最初にバックアップを取ってください。