Discourseに人気の機能を導入：ヘッダー検索、ウェルカムバナー、カテゴリアイコン/絵文字

[lindsey (Lindsey Fogle)]

Discourse には、コミュニティのデザインをより簡単にカスタマイズできるように、人気の テーマコンポーネント に基づいたいくつかの新機能が追加されました。このトピックでは、これらの新しいコア機能、その使い方、およびそれらにインスピレーションを与えたテーマコンポーネントとの比較について詳しく説明します。

ヘッダー検索

ヘッダー検索機能は、右上隅の虫眼鏡アイコンから、サイトヘッダーのより目立つ入力フィールドに検索を移動させます。

ヘッダーのスペースがさらに必要になった場合（トピックのスクロール時など）、検索はスペースを節約するために虫眼鏡アイコンに戻ります。

ヘッダー検索をオンにするには…

1. 管理エリアで、Themes & components に移動します。
2. アクティブなテーマの Edit ボタンをクリックします。
3. Search experience 設定を見つけます。
4. この設定を「Search field in site header」に更新します。
5. 緑色のチェックマークをクリックして保存します。

ヘッダー検索機能 vs. Advanced Header Search コンポーネント

ヘッダー検索は、Header Search テーマコンポーネントにインスパイアされたもので、コア機能と区別するために Advanced Header Search に名前が変更されました。

外部検索（Discourse コミュニティ外の検索）をサポートする必要がある場合は、Advanced Header Search コンポーネントを使用してください。それ以外の場合は、Discourse コアの一部となったヘッダー検索機能を使用できます。

ウェルカムバナー

ウェルカムバナーは、メンバーや訪問者を歓迎し、トピックリストに目立つ検索バーを追加します。

ウェルカムバナーとヘッダー検索機能は互換性があるため、ウェルカムバナーが表示されている間はヘッダー検索は非表示になります。

ウェルカムバナーをオンにするには…

1. 管理エリアで、Themes & components に移動します。
2. アクティブなテーマの Edit ボタンをクリックします。
3. Enable welcome banner 設定を見つけます。
4. この設定を有効にします。
5. 緑色のチェックマークをクリックして保存します。

バナーに表示されるメッセージをカスタマイズするには、Site Texts エリアに移動し、「welcome_banner」を検索します。登録済みメンバーの挨拶、匿名ユーザーの挨拶、検索フィールドのテキスト文字列を変更できます。

ウェルカムバナー vs. Advanced Search Banner コンポーネント

ウェルカムバナーは、Search Banner コンポーネントにインスパイアされたもので、コア機能と区別するために Advanced Search Banner に名前が変更されました。

バナーにカスタム背景画像を使用したい場合、バナーに複数行のテキストを入力したい場合、またはバナーを表示するユーザーを変更したい場合（ログインメンバー、ログアウトユーザー、またはその両方）は、Advanced Search Banner コンポーネントを使用してください。それ以外の場合は、Discourse コアの一部となったウェルカムバナー機能を使用できます。

カテゴリアイコンと絵文字

これで、色付きの正方形の代わりに、アイコンと絵文字を使用してカテゴリを区別できるようになりました。

カテゴリアイコン/絵文字を使用するには…

1. カテゴリを作成または編集する際に、Style 設定を Icon または Emoji に変更します。
2. 使用したいアイコンまたは絵文字を選択します。色は、アイコンの色（使用する場合）を決定し、カテゴリに関連付けられた色が使用される他の領域（例：/categories ページ）に影響します。
3. Save Category をクリックします。

カテゴリアイコンと絵文字 vs. Category Icons コンポーネント

カテゴリアイコンと絵文字は、Category Icons コンポーネントにインスパイアされたものです。このコア機能のサポートを強化するため（例：絵文字のサポート）、およびセットアップエクスペリエンスを大幅に簡素化するため、まもなく廃止される予定です。

現在 Category Icons を使用している場合は、長期的なサポートと継続的な機能改善のために、アイコンのカスタマイズを Category Icons からコアのカテゴリ設定に移行することをお勧めします。当社のテストでは、コンポーネントの設定がコア機能の設定を上書きしましたが、これらは一緒に使用するように設計されていませんでした。

[AquaL1te]

ネイティブのカテゴリアイコンメソッドに移行したかったのですが、テーマコンポーネントにはもっと多くのアイコンがあることに気づきました。使用していたアイコンのほとんどは、ネイティブのカテゴリアイコンではごく一部しか機能しません。一方はFontAwesomeを使用し、もう一方は絵文字を使用しているという違いがあるのではないでしょうか？「アイコン」オプションも使用していますが、検索しても表示されません（カテゴリアイコン用のテーマコンポーネントを無効にした後）。

現在使用しているものの例：

[Arkshine]

SVG アイコンサブセット のサイト設定に、不足しているアイコンを追加できます。

[krystal (Krystal S)]

@lindsey

外部検索（Discourseコミュニティ外の検索）をサポートする必要がある場合は、高度なヘッダー検索コンポーネントを使用する必要があります。

これはどのように機能しますか？ これは、Discourse内で外部ソースを検索できることを意味しますか？それとも、外部ソースからDiscourseを検索できることを意味しますか？

[Heliosurge (Dan DeMontmorency)]

@lindsey

カテゴリアイコンと絵文字

色付きの四角の代わりに、アイコンや絵文字を使用してカテゴリを区別できるようになりました。

これは素晴らしい追加機能です！ありがとうございます！カスタム絵文字と組み合わせることで、印象的なカスタマイズ機能が追加されます！

[AquaL1te]

@lindsey

カテゴリアイコンと絵文字

ただし、テーマコンポーネントを使用すると、サブカテゴリにこのような素敵なタッチが追加されます。

これは、ネイティブのカテゴリアイコンオプションでは表示されません。一番上のアイコンは消えています。

[tomtjes (Thomas Reintjes)]

カテゴリーアイコンを使用して、カテゴリーが公開されているか、ログインしているメンバーに表示されるか、または特定のグループに限定されているかを示しています。新しい設定でこれを再現することは可能でしょうか？アイコンが灰色なのは気に入っていますが、すべてのカテゴリーの色を灰色にしたくはありません。

[Arkshine]

@AquaL1te

これは、ネイティブのカテゴリアイコンオプションでは表示されません。その場合、一番上のアイコンはなくなります。

このPRがマージされればサポートされるようになると思います。

FIX: add category badge style to category list

@tomtjes

カテゴリアイコンを使用して、カテゴリが公開されているか、ログインメンバーに表示されるか、または特定のグループに限定されているかを示しています。新しい設定でこれを再現することは可能でしょうか？アイコンが灰色なのは良いのですが、すべてのカテゴリの色を灰色にしたくはありません。

CSSで可能になるはずです。
すべてのアイコンのデフォルトの色を設定し、その後、.anon（非ログインユーザー用）クラスとユーザーのグループ名（CSS Classes for Current User's Groups を参照）に基づいて、アイコンを非表示にするか、灰色に変更することができます。

アイコンのみを使用しており、ログインユーザーオプションが必要な場合は、TCを引き続き使用しても問題ありません。

[mcwumbly (Dave McClure)]

@tomtjes

カテゴリアイコンを使用して、カテゴリが公開されているか、ログインメンバーに表示されるか、特定のグループに限定されているかを示しています。

これは良いですね。これは、管理者がカスタマイズで解決しなければならない負担をかけるのではなく、根本的に何かが欠けていることの兆候と見なすべきかどうかを検討したいと思います。

また、関連情報: Allow users with access to a restricted category to see who else has access

[gooseegg]

こんにちは皆さん、

最近、Discourseフォーラム（tw.forumosa.com）をアップグレードしました。最新のアップデートで、ホームページに新しい「おかえりなさい」ヘッダーと統合検索バーが追加されました。コンセプトとしては良いのですが、特にモバイルで使い勝手に問題があることに気づきました。

1. 透明度のせいで検索ドロップダウンが読みにくい

（例えばAndroidで）トップナビゲーションバーの検索アイコンをタップすると、ドロップダウンが表示されますが、背景が透明なため、背後のコンテンツの上に検索結果が重なってしまい、ほとんど読むことができません。これを解決するには、背景を不透明にするのが良いでしょう。意味するところは以下のスクリーンショットで確認できます。

2. ヘッダーが高い - 縦の間隔を調整するには？

新しいウェルカムメッセージと検索バーは、モバイルでは画面のかなりの領域を占有します。ナビゲーションバーにはすでに検索アイコンがあるので、追加された検索バーは冗長に感じられます。このヘッダーの高さを狭くするか、小さい画面では余分な検索バー/ウェルカムメッセージを完全に非表示にしたいと考えています。

これはデスクトップにも影響するかもしれませんが、現時点では特にモバイルで問題となっています。

誰かこれに遭遇して、CSSやテーマコンポーネントを介してオーバーライドするクリーンな方法を見つけましたか？

よろしくお願いします！

[Arkshine]

なお、アップデートバナーも上に積み重なります。

.welcome-banner の z-index（現在1）は、少なくとも >= 3 である必要があるようです（メインリンクとメタデータは z-index: 2 を使用しています）。

[davidkingham]

@Arkshine

このPRがマージされればサポートされるようになると思います。

まだ壊れているようです😥

[David_Ghost]

SVG アイコンサブセット にアイコンを追加する必要があります。まだ追加されていない場合は、追加してください。

[davidkingham]

ありがとうございます。しかし、私は以下のものを持っています。

[lindsey (Lindsey Fogle)]

これはどのページですか？

/categories ではアイコンが期待通りに表示されているようですが、それがテーマコンポーネントをまだ使用しているからなのか、それともあなたが経験している問題が他のページにあり、それを修正する必要があるのかははっきりしません。

[maiki]

素晴らしい体験をしました。個人サイトのテーマをHorizonに変更し、カテゴリのアイコンを設定しました。しかも、すべてモバイルデバイスから行いました。

これは驚くべきことで、管理画面の体験をこれほどスムーズにするための努力に感謝します。