Discourse サイドバーメニューの順序変更

:information_source: 概要 デフォルトおよびカスタムのサイドバーメニューセクションの並べ替えを可能にします
:eyeglasses: プレビュー ューTheme Creator
:hammer_and_wrench: リポジトリ ュー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.
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマは初めてですか? Discourseテーマを使用するための初心者ガイド

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

:bulb: はじめに

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

:woman_technologist:t2: 概要

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

このコンポーネントは、デスクトップとモバイルのサイドバービュー、およびヘッダーのドロップダウンモード(ただし、サイドバーモード用に作成されることが理想的)で機能します。


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

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

:gear: 設定

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

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

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


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

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


ここでは、設定によりデフォルトの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-channels、およびchat-search)を無視します。
「いいね!」 20

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

「いいね!」 4