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

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

:bulb: はじめに

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

:woman_technologist:t2: 概要

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

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


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

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

:gear: 設定

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

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

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


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

以下のスクリーンショットは、コンポーネント管理パネルの左側と、通常のユーザーから見た右側に表示される、「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コンポーネントと併用できます(上記のスクリーンショットを参照)。


:backhand_index_pointing_right: 注意事項

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

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

「いいね!」 4

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

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

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

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

「いいね!」 1

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

「いいね!」 3