高度な検索バナー

[Discourse]

このテーマコンポーネントは非推奨であり、使用を中止する必要があります。その機能は現在Discourseコアに含まれています。ウェルカムバナーの設定方法については、ドキュメントをご覧ください。

→ https://meta.discourse.org/t/creating-a-banner-to-display-at-the-top-of-your-site/153718#p-762961-welcome-banner-1

	概要	Advanced Search Banner は、検索バーとオプションのヘッドラインおよびサブヘッドテキストを、メインのトピックリストナビゲーションの上にあるバナーに配置します。
	プレビュー	Discourse Theme Creatorでプレビュー
	リポジトリリンク	https://github.com/discourse/discourse-search-banner
	Discourseテーマは初めてですか？	Discourseテーマ使用の初心者ガイド

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

これはDiscourseチームによって保守されている#officialテーマコンポーネントであるため、#support、#bug、#ux、および#featureのリクエストは、ここMetaのそれぞれのカテゴリで行い、適切なテーマコンポーネントタグを付けてください。リンクをクリックして開始してください。

サポート バグ UX 機能

機能

デフォルトでは、このバナーはすべてのトップレベルのトピックページ（latest/new/unread/top/categories… top menu サイト設定にあるものすべて）に表示されますが、コミュニティのホームページにのみ表示されるように設定することもできます。

設定

名前	説明
show on	バナーを表示するページを決定します
plugin outlet	バナーがページ上のどこに表示されるか
background image light	ライトカラーパレットでのバナーの背景画像
background image dark	ダークカラーパレットでのバナーの背景画像
tile background image	背景画像を繰り返す
show for	検索バナーを表示できるユーザー（ログイン済み、未ログイン、または両方）
special style	検索バナーの外観を変更するオプションのバリエーション

翻訳	デフォルト
search_banner.headline	コミュニティへようこそ
search_banner.subhead	ご参加いただきありがとうございます。ヘルプが必要な場合は、投稿する前に検索してください。
search_banner.search_button_text

表示から除外するには、フィールドを空白のままにします。

カスタムスタイリング

このバナーが表示される場所では、HTML要素に.display-search-bannerというクラスが付き、バナー自体は.custom-search-bannerクラスでラップされるため、いくつかのCSSでこのバナーの外観を好きなようにカスタマイズできるはずです。

今後の機能強化

• 特定のカテゴリでバナーを有効にするオプションを追加する

謝辞

これは、@angusのhttps://meta.discourse.org/t/header-search-theme/67959から大幅に借用しています。

ホストされていますか？ テーマコンポーネントは、当社のStandard、Business、およびEnterpriseプランで利用できます。

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

コンポーネントにオプションのスタイルを追加するマイナーアップデートを行いました。これにより、タイトルテキストなしの大きな検索バーが表示されます。

これは新しい「スペシャルスタイル」設定で有効にできます。これを行うのは、少し追加のCSSを有効にするだけです。

将来的には、さらにオプションを追加する可能性があります！

[AndyBr (Andy)]

このアドオンの「ようこそ」テキストの色を変更するにはどうすればよいですか？

[Arkshine]

それに対する設定はありません。ただし、CSSで追加できます。

以下をテーマまたは新しいテーマコンポーネントに追加し、必要に応じて変更してください。

.search-banner > .custom-search-banner  {
    /* title */
    h1 {
        color: #286989;
    }
    
    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

どうもありがとうございます！

[RBoy]

検索アイコンを非表示にする方法はありますか（CSSまたはその他の方法を使用）？ このコンポーネントと組み合わせて使用すると、検索アイコンが重複するという問題が発生しています: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

検索アイコンは1つだけ表示されるはずです。ただし、検索バナーとヘッダー検索を同時に使用すると、UXに悪影響があることは申し添えておきます。

どちらか一方のみを使用することをお勧めします。

[RBoy]

ありがとうございます！大変参考になりました。

@isaac

ただ、検索バナーとヘッダー検索を同時に使用すると、UXに悪影響が出ると言わざるを得ません。

具体的にどのようなUXの悪影響があるのか、詳しく教えていただけますか？

[isaac (Isaac Janzen)]

上記の動画で、いくつかの問題点を示しています

• 重複する検索ドロップダウン
• 検索ドロップダウンの奇妙な開閉状態
• 検索アイコンが、一方の検索入力では高度な検索へのリンクになっているが、もう一方ではそうではない
• など

[RBoy]

承知しました。同じページにない限り、問題ないということですね。

[مباركمبارك (مبارك)]

誰か手伝ってくれませんか？ Discourseにこのテーマをインストールしましたが、画像が右側の一部で切り取られています。画像が完全に収まるようにするには、サイトのフォントを「より小さい」に設定する必要があります。Discourseのインストールは2つありますが、そのうちの1つでは画像は正常に機能しましたが、もう1つでは画像が切り取られているのはなぜですか？

[awesomerobot (Kris)]

スクリーンショットを含めることはできますか？これにより、問題を理解するのがはるかに簡単になります。

[ecki (Bernd)]

同じ問題が発生しており、異なるブラウザ/モードで画像の異なる部分が表示されます。画像を非常に幅広くすることで解決しましたが、これにより右側が一部の条件でしか表示されなくなります。しかし、対称的な画像ではそれほど簡単ではありません。おそらく、さらにCSS（thome-component-overwrite を検索せずに）を追加すると役立つでしょう。

[مباركمبارك (مبارك)]

一部解決できました。他のテーマのテーマコンポーネントを無効にし、1つだけ残しました。信じられないかもしれませんが、画像はフォントサイズが「normal」で「normal」だったのは、携帯電話のせいで画像の片側しか表示されなかったからです。携帯電話でも完全に表示できるように何かできることはありますか？

[Surbhi_Pal1 (Surbhi)]

こんにちは。

検索バナーとヘッダーの間のスペースを削除する方法はありますか？

[Arkshine]

こんにちは、新しいテーマコンポーネントでこのCSSを使用できます。

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

完璧に機能しました、ありがとう！

[PT_LB (Paul)]

Discourse にも私のコミュニティと同じ問題があるようです。検索アンダーレイ (Discover) を覆うオーバーレイが表示されるまでに時間がかかります。

私のコミュニティでは、さらに顕著です。

この問題に対する修正策をご存知の方はいらっしゃいますか？オーバーレイの表示を遅延させることで解決できるかもしれません。ユーザーエクスペリエンスが悪化する可能性があります。