サイドバーはデフォルトで閉じた状態

:information_source: 概要 管理者がグループごとに Discourse サイドバーのデフォルト動作を制御できるようにします
:hammer_and_wrench: リポジトリ GitHub - nathan-nz/closed-sidebar-by-default: Allows control of the default sidebar behaviour · GitHub
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourse テーマは初めてですか? Discourse テーマの使用に関する初心者ガイド

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

このシンプルなテーマコンポーネントにより、管理者はグループごとに Discourse サイドバーのデフォルト動作を制御できます。

ユーザー/デバイスごとのサイドバーの以前の状態を尊重し続けます。つまり、リロード時に一貫性のある素晴らしい体験を提供します。

使用例

最も一般的な使用例は、カジュアルな訪問者向けのクリーンでシンプルなUIです。例えば、Discourse Metaで使用する場合、人は次のように表示されます。

代わりに、より賑やかな次のようになります。

設定

設定は1つだけで、シンプルなグループセレクターです。デフォルトは anonymous_users(ID 4)ですが、任意のグループを使用できます。

謝辞

@don に多大な感謝を。このテーマコンポーネントはフォークされた元のテーマコンポーネントを作成してくれました:

「いいね!」 8

はい、数か月前からDonのバージョンを使用しており、とても気に入っています。まったく新しいユーザーがサイトにアクセスしたとき、少し圧倒されてしまうことがあると思います。彼らは自分が何を見ているのか全く分かりません。サイドバーを非表示にすることで、UIが少し分かりやすくなります。私の考えでは、ある人が何度もサイトに訪れると、必要なときにメニューを探す場所が分かってくるはずです。

サイドバーをデフォルトで閉じた状態にするというアイデアは気に入りました。この2つのテーマコンポーネントの違いは何ですか?

ドンのバージョンにはグループ設定がありません

「いいね!」 2

本当にありがとうございます。いいね!を押そうとしたのですが、ハートのボタンを押しすぎてしまい、結果として「54秒」待たされることになってしまいました。そのため、この短いメッセージを残します。

「いいね!」 1

サイドバーをデフォルトで閉じた状態にすることには魅力があると思います。特にスペースが限られている小さな画面では、少しでも表示領域を広げられるのは大きいですね。一部のユーザーは常にサイドバーに依存していますが、他のユーザーはほとんど使わないため、ユーザーの好みで設定できるようにするか(あるいは最後の状態を記憶するか)するのが最も良い妥協点かもしれません。

通常、最後の状態は記憶されます。ただし、このコンポーネントがアクティブな場合、その機能はすべて無効になります。

もっとスマートな方法があるかもしれません。

「いいね!」 1

こんにちは :waving_hand:

このテーマコンポーネントのトピックを作成してくれた @nathank さん、ありがとう! :hugs:

今では、このような方法で動作するはずです。このアプローチでは、初期ロード時にのみサイドバーが閉じられ、それ以降はデフォルトの動作(ユーザーの設定を記憶する)に戻ります。

import { apiInitializer } from "discourse/lib/api";

const HIDE_SIDEBAR_KEY = "sidebar-hidden";
const INITIALIZED_KEY = "closed-sidebar-by-default-initialized";

export default apiInitializer("1.8.0", (api) => {
  const keyValueStore = api.container.lookup("service:key-value-store");
  const userGroups = settings.user_in_closed_sidebar_groups;

  if (userGroups) {
    if (!keyValueStore.getItem(INITIALIZED_KEY)) {
      keyValueStore.setItem(HIDE_SIDEBAR_KEY, "true");
      keyValueStore.setItem(INITIALIZED_KEY, "true");
    }
  } else {
    if (keyValueStore.getItem(INITIALIZED_KEY)) {
      keyValueStore.removeItem(HIDE_SIDEBAR_KEY);
      keyValueStore.removeItem(INITIALIZED_KEY);
    }
  }
});
「いいね!」 1

このコンポーネントは、ページを更新するとサイドバーを再度非表示にします。初期状態として設定でき、その後の変更を記憶してくれると便利でしょう。

「いいね!」 1

@Don さん、ありがとうございます!

これを TC に取り込みましたが、謳い文句通り問題なく動作しています。かなり改善されました!!