カスタム検索バーの作り方

discourse-search-banner プラグインに似たカスタム検索バーを作成しようとしています。テーマの外観に影響を与えるため、そのプラグインは使用したくありません。

どのようにすれば、好きな <input type="text" /> 要素にその機能を反映させることができますか?

プラグインのソースコードを確認し、HTML 要素のみを使用するように適応させようとしましたが、うまくいきませんでした。何かヒントがあれば、ぜひ教えていただきたいです!

「いいね!」 2

そのプラグインへのリンクをここに貼っていただけませんか?どうしても見つけられません。プラグイン作成者にもタグ付けしていただけると、何かアイデアがあるかもしれません。

「いいね!」 2

この #theme-component のことをお話ししているのでしょうか?

「いいね!」 2

その通り!すみません、リンクを貼るのを忘れました。編集しますね。

「いいね!」 1

ご心配なく。ただし、これはテーマコンポーネントでありプラグインではありません。そのため、いくつかの変更が必要です。特に、テーマコンポーネントはクライアントサイドのロジックで動作し、プラグインはサーバーサイドのロジックで動作するためです。あるいは、そのテーマコンポーネントを基にしたプラグインを作成しようとしているのでしょうか?

「いいね!」 2

遅い回答で申し訳ありません。

プラグインになるかテーマのコンポーネントになるかは、目的の機能を実現できればどちらでも構いません。基本的に必要なのは、デフォルトの検索(トップバーのアイコン)の動作を、任意のテキスト入力欄に反映させることです。

これを実現するにはどうすればよいでしょうか?

多くの問題は CSS で解決できます。
単にインスペクトして CSS を修正することができないのはなぜですか?それがはるかに迅速な解決策になるはずです。
最悪の場合、TC をフォークして CSS を編集すればよいのです。

「いいね!」 1

CSS というよりは、配置と HTML 構造への適合性の方が問題ですね。コンポーネントの注入場所を変更する方法が分かれば、解決策が見つかるかもしれません。何かヒントをいただけませんか?

サイト上でテーマコンポーネントを有効にした後、ブラウザでコードを検査して配置場所を確認してください。ブラウザ上で調整を行い、より適切な場所を探し、その設定を使って TC のフォークを更新・編集してください。これで動作するはずです。

ヘッダー用の既製品もあります:

どちらも適さず、CSS の修正だけでは不十分な場合は、ウィジェットコードをいじる 必要があります :).

「いいね!」 1

投稿が新しいトピックに分割されました: 設定で検索バーはどこにありますか?