高度なヘッダー検索

Discourse · 2021 年 6 月 16 日午後 6:03


	概要	高度なヘッダー検索は、ヘッダーメニューから検索アイコンを削除し、ヘッダー領域の中央に配置される検索バーを作成します。
	プレビュー	Discourse Theme Creator でプレビュー
	リポジトリリンク	https://github.com/discourse/discourse-header-search
	Discourse テーマは初めてですか？	Discourse テーマの利用に関する初心者ガイド

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

注意

このテーマコンポーネントは、外部検索をサポートしたいサイトでのみ必要です。それ以外の場合は、検索体験設定を「サイトヘッダーに検索フィールド」に更新して、サイト検索をヘッダーに移動できます。

機能

設定

名前	説明
追加の検索アイコン	検索バーに追加のアイコンを追加します（例：外部検索をトリガーするため）。
svg アイコン

外部検索アイコンをオプションで表示

extra_search_icons を使用して、検索バーに追加のアイコンを表示します。

この設定は以下のパラメータをサポートします:

prefix: 該当のアイコンをクリックした際の検索 URL のプレフィックス
icon: 表示するアイコン（Font Awesome セットから。svg icons 設定に追加する必要がある場合もあります）
target: デフォルトでリンクを新しいタブ/ウィンドウで開くように “_blank” に設定可能
showInCategories: 指定されたアイコンを exclusively に表示するカテゴリ ID（デフォルトではすべての場所で表示）
excludeFromCategories: 指定されたアイコンを表示しないカテゴリ ID

クレジット

検索パネルの JavaScript コードを提供してくれた @Johani に感謝します。

当方でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

awesomerobot · 2022 年 7 月 25 日午後 3:03

コンポーネントを更新しました。これにより、モバイルでデフォルトの検索アイコンが表示されるようになります。

miss · 2022 年 7 月 25 日午後 3:15

これで問題なく動作します。

@JammyDodger
@awesomerobot

ありがとうございます。

alanost · 2022 年 7 月 28 日午後 3:40

こんにちは、まず最初に、このテーマコンポーネントは本当に素晴らしいです。私にとって非常によく機能しています。
改善のための小さな提案があります。ログインが必要なフォーラムでは、検索バーは表示されないはずです。なぜなら、どうせ使用できないからです。

alanost · 2022 年 8 月 23 日午後 9:37

このバグを修正していただけたら、とても嬉しいです。多くの人には影響がないことは承知していますが、このテーマコンポーネントが大好きで、この問題のために使用できずにいます。

awesomerobot · 2022 年 8 月 24 日午前 1:15

ログインが必要な場合に、ログアウト中のユーザーから検索バーを非表示にするアップデートを行いました。

awesomerobot · 2022 年 8 月 24 日午後 12:46

ヘッダーの色（ヘッダーのプライマリとヘッダーの背景）を入力に使用するアップデートも追加しました。

manuel · 2022 年 10 月 10 日午後 9:05

ヘッダーのサイドバー切り替えを無効にするコンポーネントのようです。

keegan · 2022 年 10 月 12 日午後 4:46

@manuel、特定してくれてありがとう！

修正をプッシュしました

manuel · 2022 年 10 月 27 日午後 6:21

もう一つ見つけた小さな不具合です。検索入力フィールドに入るためにデフォルトの「/」ショートカットを使用できます。しかし、結果が表示されるドロップダウンは展開されません。そのためには手動で入力フィールドをクリックする必要があり、キーボードショートカットがほとんど役に立たなくなります。

manuel · 2022 年 12 月 20 日午後 8:52

コンポーネントを使用すると、ヘッダーのサイドバー切り替えが無効になります。サイドバーの設定が変更されたためだと思われます。

jordan.vidrine · 2022 年 12 月 21 日午後 9:49

この最新のPRで修正されるはずです FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

ozkn · 2022 年 12 月 31 日午後 10:17

@jordan.vidrine こんにちは、このコンポーネントをモバイルヘッダーのデフォルトとして使用できますか？

jordan.vidrine · 2023 年 1 月 2 日午後 2:08

リリース前に検討しましたが、モバイルヘッダーに十分なスペースがなく、適切に機能しません。

bquast · 2023 年 3 月 2 日午後 1:26

素晴らしいコンポーネントをありがとうございます。

検索ボックスの境界線の色をカスタマイズする方法はありますか？

Screenshot from 2023-03-02 10-13-59

私にとっては少しグレーなのですが、#FFFFFF の白にしたいです。

jordan.vidrine · 2023 年 3 月 2 日午後 4:40

ローカルのテーマコンポーネントにCSSを追加することで、この色をカスタマイズできます。もし作成したカスタムCSS用のテーマコンポーネントがない場合は、/admin/customize/themesにアクセスし、「コンポーネント」をクリックして「インストール」をクリックしてください。

モーダルが表示されたら、「新規作成」を選択し、コンポーネントに名前を付けます。コンポーネントの新しいページに移動し、適用するテーマを選択します。インストール済みのテーマに適用する必要があります。

CSSを追加するには、「CSS/HTMLの編集」をクリックし、「共通」ページにCSSを追加して保存します。

次のようなことを行うと良いでしょう。

.search-menu .search-input {
    border: 1px solid #FFFFFF
}

bquast · 2023 年 3 月 6 日午前 5:04

詳細なご指示をありがとうございます、@jordan.vidrine。

最近、このフォーラムの他の親切な方々の助けを借りて、カスタムCSSを追加する方法を学びました。

Canapin · 2023 年 3 月 6 日午前 10:53

さらなる変更の参考になるかもしれません
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
これは、CSSでどの要素をターゲットにするかを見つける方法を説明しています。

satonotdead · 2023 年 4 月 18 日午前 1:22

768px までメディアクエリを使用して無効にすることで、その行を削除してもすべてが壊れることはありませんか？

タブレットではボタン（チャットとビデオがあるため）を削除したいのですが、検索ボックスは非常にうまく収まっているようです。

volanar · 2023 年 7 月 13 日午後 4:25

すべて問題ありませんが、モバイルバージョンでは標準検索に切り替える必要があります。ひどい見た目なので\n\nvs\n

トピック		返信	表示
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji Announcements	18	1636	2025 年 5 月 7 日
Making a search icon with a theme Support	7	983	2022 年 8 月 4 日
Search section like on Reddit? Development	15	822	2024 年 3 月 31 日
Header search box Support	4	1146	2019 年 10 月 16 日
Top Search bar fully open General	1	889	2021 年 8 月 7 日

高度なヘッダー検索

注意

機能

設定

外部検索アイコンをオプションで表示

クレジット

関連トピック