サイドバーのメニューセクションの順序を制御する方法

こんにちは、皆さん、

Discourseフォーラムのサイドバーメニューで問題が発生しています。セクションの順序は固定されているようです。たとえば、カスタムセクションを追加すると、常に「カテゴリ」セクションの上に表示されます。

私のコミュニティでは、これらのカスタムセクションをカテゴリの下に表示することが重要ですが、この順序を変更または制御する方法が見つかりません。

サイドバーセクションの位置を管理する方法はありますか、それとも現在、これらのブロックの階層/順序をカスタマイズすることはできませんか?

ご指導よろしくお願いします!

「いいね!」 2

サイドバーセクションの順序はCSSで制御できます。以下のようなCSSコードを含む新しいコンポーネントを追加してください。管理 -> テーマとコンポーネント -> コンポーネント に移動し、新しいローカルコンポーネントを作成します。

そして、CSSタブに以下のコードを追加します。ここで custom-section-name はカスタムメニューセクションのスラッグ名です。

.sidebar-wrapper { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}
CSSタブのスクリーンショット

上記のコードの数値を変更し、カスタムセクションを追加して、お客様の特定のニーズに合わせて調整する必要があります。このようになります。

「いいね!」 4

ありがとう!ちょうどこれを見つけて実装したのですが、モバイルでは動作しませんでした。

ここでも以前話題になったようですが、これも機能しません。

モバイルでは sidebar-wrapper クラスが sidebar-hamburger-dropdown に置き換えられると思います。そのため、これらを追加するとモバイルでも機能するはずです。

.sidebar-wrapper, 
.sidebar-hamburger-dropdown { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}
「いいね!」 3

ありがとうございます!試してみましたが、残念ながらうまくいきませんでした。:folded_hands:

右にもう一つ詳細があります。サイドバーはモバイルではフレックスを使用していないようです。そのため、それも追加する必要があります。

.sidebar-sections {
display: flex;
flex-direction: column;
}
「いいね!」 6

ありがとうございます!! うまくいきました!! 素晴らしいです!

「いいね!」 1

カスタムセクションのヘッダー名にスペースが含まれています(例:「ヘルプユーザー」)。

data-section-name=“help users” を試しましたが、機能しませんでした。

スペースを指定するにはどうすればよいですか?マスキングは必要ですか?
助けてください

編集:
FFの開発者ツールを使用してサイトを検査したところ、解決策は「help-users」であることがわかりました。

「いいね!」 3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.