ヘッダー カテゴリー ナビバー

|||
|-|-|-|
| :discourse2: | 概要 | Header Categories Navbar は、サイトヘッダーに親カテゴリリンクのメニューを追加するシンプルなコンポーネントで、必要に応じて水平スクロール可能なオーバーフローが追加されます。
| :eyeglasses:|プレビュー| Theme Creator でプレビュー |
| : hammer_and_wrench:|リポジトリ| https://github.com/discourse/discourse-categories-navbar |
| : question:|インストールガイド|テーマまたはテーマコンポーネントのインストール方法|
| : open_book:|Discourse テーマ初心者ですか?| Discourse テーマ使用の初心者ガイド

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

機能

このテーマコンポーネントは、サイトヘッダーに親カテゴリリンクのメニューを追加します。

設定

名前 説明
カテゴリドロップダウンを非表示 トピックリストナビゲーションからカテゴリドロップダウンを非表示にします
すべてのパンくずナビゲーションを非表示 トピックリストナビゲーションからすべてのパンくずを非表示にします
トピックのスクロール時に非表示 有効にすると、トピックタイトルがヘッダーにドッキングされている場合に、デスクトップでナビゲーションが非表示になります。

:discourse2: 当社でホストしていますか? テーマコンポーネントは、Standard、Business、Enterprise プランで利用できます。

「いいね!」 20

これは本当に素晴らしいですね。クリスさん、気に入りました!サイドバーとも美しく組み合わさり、上部には主要なカテゴリ、サイドバーには短いパーソナライズされた選択肢が表示されるようになります。

改善すればさらに良くなると思われる、2つの小さなUXの問題点に気づきました。

UX:カテゴリ選択のハイライト

カテゴリリストにいるとき、正しいカテゴリには控えめな下線が表示されます。

しかし、トピックやサブカテゴリに入ると、この下線は表示されなくなります。

これら両方の状況で表示されると嬉しいです。

UX:モバイルでのスクロール/オーバーフロー

デスクトップでは、カテゴリがオーバーフローした場合に、フェードアウトや控えめな矢印が表示されます。

モバイルではオーバーフローがはるかに起こりやすいですが、私のデバイス(Chrome / Android)では、これらの控えめな表示は存在せず、スクロールが可能であることが明確ではありません。

モバイルでは、スクロールを容易にするために、カテゴリバーをもう少し高くすることも役立つかもしれません。

「いいね!」 6

主にモバイルに適用される、その他のUXの問題をいくつかご紹介します。

モバイルのトピックパンくずリストの競合

モバイルのトピックビューでは、パンくずナビゲーションがカテゴリナビバーと競合します。

ハイライトされたカテゴリが表示されない

また、選択されたカテゴリは自動的にスクロールされないため、ユーザーがナビバーをスクロールしない限り、選択されていることがわかりません。これは非常に重要です。

デスクトップのみ?

まだモバイル向けに準備ができていないのではないかと思います。少なくとも現時点では、デスクトップにのみ適用する設定があると非常に便利でしょう。

「いいね!」 4

迅速なフィードバックをありがとうございます!これらの問題に対処するためのいくつかのアップデートをマージしました。

「いいね!」 3

素晴らしい - フィードバックが聞き入れられるなら、喜んで提供します! かなり多くの追加が必要だったようですね。

これは、お互いへのささやかなクリスマスプレゼント:wrapped_gift:だと受け取りますね。:heart_eyes:

サブカテゴリに入ったときはこれを修正していただきました - 素晴らしいです!

しかし、トピックに入ったときは適用されません - これは意図的なことでしょうか? 個人的には、カテゴリ発見ビューだけでなく、トピックも含めて、ユーザーが「中」にいる間はカテゴリがハイライトされたままである方が理にかなっていると思います。

また、/admin のような別のページに入ると、カテゴリが選択されたままになります。この場合はカテゴリが選択されない方が良いでしょう。

モバイルでもフェードは見えるようになりましたが、矢印/シェブロンは表示されません。可能であれば、フェードはかなり控えめなので、これは非常に役立ちます。

デスクトップ: image

モバイル: image

リクエスト #1 - UX

トピック内でスクロールするときにナビバーを非表示にしてください。少しごちゃごちゃします!
image

また、デスクトップでは、ナビバーを、その画像内のパンくずリスト/タグがある場所、またはそれらの下ではなく、そこに配置した方が良いかもしれません。

リクエスト #2 - 機能

必要に応じて一部を非表示にできるように、各ナビピルにCSSクラスを追加していただけますか?

そうお願いするのは、サブカテゴリを有効にするためだけの(非公開の)親カテゴリがいくつかあり、それらが一般のナビゲーションを望ましくない方法で散らかしているからです。

今はhrefを使用してこれらを非表示にしていますが、もちろんそれはかなり危険です!

リクエスト #3 - UX

サイドバーのカテゴリをアルファベット順に並べ替えるオプション。

これを実装するにあたり、デフォルトのサイドバーカテゴリリストから親カテゴリを削除しました。これにより、ユーザーは自分に関連する1〜5個のサブカテゴリのリストだけが表示されるようになります。

しかし、それらは少し散らばっており、論理的な順序になっていません。なぜなら、/Categories でのサブカテゴリの順序はあまり意味をなさないからです。これらのサブカテゴリがアルファベット順になっていると、これを助けるのに非常に役立ちます!

「いいね!」 4

選択したときに色が少しずれています

  • デフォルトのライトおよびダークパレット

何かアイデアはありますか?

「いいね!」 3

報告ありがとうございます!これで修正されるはずです。

「いいね!」 2

完璧に動作します。ありがとう!

「いいね!」 2

こんにちは。まず、これは非常に役立つトピックのコンポーネントであり、あなたの仕事に感謝したいと思います :raised_hands:
私のインスタンスでは、このコンポーネントはエラーを引き起こしました。他のプラグインやテーマコンポーネントとの互換性をチェックしましたが、現時点では競合は見つかっていません。コンポーネント自体が原因である可能性はありますか?

このコンポーネントを有効にすると、コンテンツの表示が歪みます。
ビデオはこちらです。


エラーを検出するには、最新の投稿ページ /latest から任意の投稿をクリックし、投稿が標準モードで開かれたら、最新の投稿ページに戻る必要があります。

「いいね!」 1

@Aizada_M - 再現できません。コンポーネントからプレビューすると、この問題が発生しますか?

「いいね!」 2

こんにちは!返信が遅れてすみません:raised_hands:
プレビューは使用せず、コンポーネントを有効にした状態でテストしました。

「いいね!」 1

トピックタイトルの下にあるカテゴリ名をクリックすると、常に100%機能します。

「いいね!」 1

ヘッダーのナビバーのテキストが突然 font-up-1 に変更されたことに気づきました(以前は font-down-1 だったと思います)。これは、他のすべてのナビゲーションピルと同じなので、非常に不快で不快です。

このCSSで上書きしました。これははるかに心地よいです。

// ヘッダーナビバーのテキストサイズを修正します
.custom-categories-navbar .nav-pills li a {
    font-size: var(--font-0);
}

実際には font-0 の方が、十分に異なり、使いやすいので気に入っています。

「いいね!」 1

コアCSSは変更されておらず、コンポーネントはフォントサイズを設定していません。:thinking:
以前にカスタムCSSを使用していたのではないでしょうか?

「いいね!」 2

4件の投稿が新しいトピックに分割されました: ヘッダーカテゴリナビバーのモバイルスタイリングの破損

このTCは素晴らしいです、ありがとうございます!表示するアイテムと表示しないアイテムをカスタマイズできるとさらに良いのですが!

「いいね!」 3

気に入っていますが、最新バージョンの Discourse ではテーマ コンポーネントが壊れているようです。

編集: 問題なく動作しますが、ヘッダーの「チャット」と「ダーク・ライト トグル」アイコンを無効にする必要がありました。

「いいね!」 2

チャットがアクティブな状態だと動作します :slight_smile:

「いいね!」 3

はい、ロゴが原因です。少しカットすると、チャットやダーク・ライト切り替えで機能します。現在、以下を使用しています。

.d-header #site-logo {
max-height: 30px;
}

「いいね!」 2

モバイルでバグを見つけました。以下のように再現できます。

  1. ヘッダーのカテゴリをクリックします。
  2. カテゴリ内の投稿をクリックし、一番下までスクロールします。
  3. ヘッダーの同じカテゴリを再度クリックします。

すると、すべてのカテゴリヘッダーが消えます。フォーラムとデモの両方で試しました。

編集:
カテゴリに移動してページをリロード(F5)しても同じです。すべてのカテゴリが消えます。

編集:
これに対する修正はありますか?よろしくお願いします。

「いいね!」 4