||||
-|-|
| 概要 | Advanced Header Search は、ヘッダーメニューから検索アイコンを削除し、ヘッダー領域の中央に検索バーを配置します。
| 
| プレビュー | Discourse Theme Creator でのプレビュー |
| リポジトリリンク | https://github.com/discourse/discourse-header-search
| Discourse テーマが初めての方へ | Discourse テーマの使い方入門ガイド
注意
このテーマコンポーネントは、外部検索をサポートしたいサイトでのみ必要です。そうでない場合は、検索体験 設定を Search field in site header に更新して、サイト検索をヘッダーに移動してください。
機能
設定
| 名前 | 説明
|-|
| extra search icons | 検索バーに追加のアイコンを追加します（例：外部検索をトリガーするため）。
| svg icons
外部検索アイコンをオプションで表示
extra_search_icons を使用して、検索バーに追加のアイコンを表示します。
この設定は以下のパラメータをサポートします：
prefix: 対応するアイコンをクリックしたときの検索 URL へのプレフィックスicon: 表示するアイコン（Font Awesome セットから選択。svg icons 設定にも追加が必要になる場合があります）target: オプションで “_blank” に設定すると、リンクがデフォルトで新しいタブ/ウィンドウで開きますshowInCategories: 指定されたアイコンを一意に表示するカテゴリ ID（デフォルトでは、アイコンは everywhere で表示されます）excludeFromCategories: 指定されたアイコンを表示しないカテゴリ ID
クレジット
検索パネルの JavaScript コードを提供してくれた @Johani に感謝します 
ホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランでご利用いただけます。
「いいね！」 37
コンポーネントを更新しました。これにより、モバイルでデフォルトの検索アイコンが表示されるようになります。
「いいね！」 6
miss
(miss)
18
これで問題なく動作します。
@JammyDodger
@awesomerobot
ありがとうございます。
「いいね！」 5
alanost
(Alan)
20
こんにちは、まず最初に、このテーマコンポーネントは本当に素晴らしいです。私にとって非常によく機能しています。
改善のための小さな提案があります。ログインが必要なフォーラムでは、検索バーは表示されないはずです。なぜなら、どうせ使用できないからです。
「いいね！」 4
alanost
(Alan)
21
このバグを修正していただけたら、とても嬉しいです。多くの人には影響がないことは承知していますが、このテーマコンポーネントが大好きで、この問題のために使用できずにいます。
「いいね！」 1
ログインが必要な場合に、ログアウト中のユーザーから検索バーを非表示にするアップデートを行いました。
「いいね！」 3
ヘッダーの色（ヘッダーのプライマリとヘッダーの背景）を入力に使用するアップデートも追加しました。
「いいね！」 4
manuel
(Manuel Kostka)
24
ヘッダーのサイドバー切り替えを無効にするコンポーネントのようです。
「いいね！」 4
manuel
(Manuel Kostka)
27
もう一つ見つけた小さな不具合です。検索入力フィールドに入るためにデフォルトの「/」ショートカットを使用できます。しかし、結果が表示されるドロップダウンは展開されません。そのためには手動で入力フィールドをクリックする必要があり、キーボードショートカットがほとんど役に立たなくなります。
「いいね！」 1
manuel
(Manuel Kostka)
28
コンポーネントを使用すると、ヘッダーのサイドバー切り替えが無効になります。サイドバーの設定が変更されたためだと思われます。
「いいね！」 3
ozkn
(Mathx)
30
@jordan.vidrine こんにちは、このコンポーネントをモバイルヘッダーのデフォルトとして使用できますか？
「いいね！」 1
リリース前に検討しましたが、モバイルヘッダーに十分なスペースがなく、適切に機能しません。
「いいね！」 4
bquast
(Bastiaan Quast)
32
素晴らしいコンポーネントをありがとうございます。
検索ボックスの境界線の色をカスタマイズする方法はありますか？
私にとっては少しグレーなのですが、#FFFFFF の白にしたいです。
「いいね！」 2
ローカルのテーマコンポーネントにCSSを追加することで、この色をカスタマイズできます。もし作成したカスタムCSS用のテーマコンポーネントがない場合は、/admin/customize/themesにアクセスし、「コンポーネント」をクリックして「インストール」をクリックしてください。
モーダルが表示されたら、「新規作成」を選択し、コンポーネントに名前を付けます。コンポーネントの新しいページに移動し、適用するテーマを選択します。インストール済みのテーマに適用する必要があります。
CSSを追加するには、「CSS/HTMLの編集」をクリックし、「共通」ページにCSSを追加して保存します。
次のようなことを行うと良いでしょう。
.search-menu .search-input {
border: 1px solid #FFFFFF
}
「いいね！」 2
bquast
(Bastiaan Quast)
34
詳細なご指示をありがとうございます、@jordan.vidrine。
最近、このフォーラムの他の親切な方々の助けを借りて、カスタムCSSを追加する方法を学びました。
「いいね！」 3
Canapin
(Coin-coin le Canapin)
35
「いいね！」 4
768px までメディアクエリを使用して無効にすることで、その行を削除してもすべてが壊れることはありませんか？
タブレットではボタン（チャットとビデオがあるため）を削除したいのですが、検索ボックスは非常にうまく収まっているようです。
「いいね！」 1
volanar
(Volanar)
37
すべて問題ありませんが、モバイルバージョンでは標準検索に切り替える必要があります。ひどい見た目なので\n
\nvs\n
「いいね！」 1
| 概要 | Advanced Header Search は、ヘッダーメニューから検索アイコンを削除し、ヘッダー領域の中央に検索バーを配置します。
