Erweiterte Kopfzeilensuche

:discourse2: Summary Advanced Header Search removes the search icon from the header menu and creates a search bar that is placed in the middle of the header area.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-header-search
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

:grey_exclamation:Note

This theme component is only required when sites want to support external searches. Otherwise, you may update the Search experience setting to Search field in site header to move site search to the header.

Features

Settings

Name Description
extra search icons Add extra icons to the search bar (for example to trigger an external search).
svg icons

Optionally show external search icons

Use the extra_search_icons to show additional icons in the search bar.

This setting supports the following params:

  • prefix: the prefix to the search URL when clicking the respective icon
  • icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
  • target: optionally set to “_blank” to open the link in its own tab/window by default
  • showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
  • excludeFromCategories: category IDs where the given icon should not be shown

Credits

Thanks to @Johani for the search panel javascript code :+1:


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @lindsey 2025-02-28T14:39:07Z

Check documentPerform check on document:
37 „Gefällt mir“

Ich habe gerade ein Update für die Komponente vorgenommen. Dadurch wird das Standard-Suchsymbol auf Mobilgeräten angezeigt:

6 „Gefällt mir“

Das funktioniert jetzt gut.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Danke.

5 „Gefällt mir“

Hallo, zuerst einmal ein wirklich gutes Thema-Komponente. Funktioniert für mich sehr gut.
Ich habe einen kleinen Verbesserungsvorschlag. Die Suchleiste sollte in einem Forum, das eine Anmeldung erfordert, sicherlich nicht angezeigt werden, da sie ohnehin nicht genutzt werden kann.

4 „Gefällt mir“

Ich wäre sehr glücklich, wenn jemand diesen Fehler beheben könnte. Ich weiß, dass er nicht viele betrifft, aber ich liebe diese Theme-Komponente und dieses Problem hindert mich daran, sie zu nutzen :cry:

1 „Gefällt mir“

Ich habe gerade ein Update vorgenommen, das die Suchleiste für abgemeldete Benutzer ausblendet, wenn eine Anmeldung erforderlich ist.

3 „Gefällt mir“

Ich habe auch ein Update hinzugefügt, das die Header-Farben (primäre Header-Farbe und Hintergrundfarbe des Headers) für die Eingabe verwendet

4 „Gefällt mir“

Die Komponente scheint den neuen Header-Sidebar-Umschalter zu deaktivieren.

4 „Gefällt mir“

Danke, dass du das @manuel identifiziert hast!

Ich habe gerade einen Fix veröffentlicht :tada:

6 „Gefällt mir“

Ein weiterer kleiner Fehler, auf den ich gestoßen bin: Ich kann die Standard-„/“-Tastenkombination verwenden, um das Suchfeld aufzurufen. Aber sie erweitert nicht das Dropdown-Menü mit den Ergebnissen. Ich müsste manuell in das Eingabefeld klicken, damit dies geschieht, was die Tastenkombination irgendwie nutzlos macht.

1 „Gefällt mir“

Durch die Verwendung der Komponente wird der Header-Sidebar-Umschalter wieder deaktiviert. Ich vermute, das liegt daran, dass sich die Einstellungen für die Seitenleiste geändert haben.

2 „Gefällt mir“

Dies sollte mit diesem neuesten PR behoben sein FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

3 „Gefällt mir“

@jordan.vidrine Hallo, kann ich diese Komponente als Standard in der mobilen Kopfzeile verwenden?

1 „Gefällt mir“

Ich hatte das vor der Veröffentlichung in Betracht gezogen, aber es gibt nicht genug Platz im mobilen Header, damit dies richtig funktioniert.

4 „Gefällt mir“

Vielen Dank für die tolle Komponente.

Gibt es eine Möglichkeit, die Farbe des Rahmens des Suchfelds anzupassen?

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

Für mich ist er irgendwie grau, ich hätte ihn gerne weiß (#FFFFFF).

2 „Gefällt mir“

Sie können diese Farbe anpassen, indem Sie etwas CSS zu einer lokalen Themenkomponente hinzufügen, falls Sie eine für das Hinzufügen von benutzerdefiniertem CSS erstellt haben.

Wenn Sie dies noch nicht getan haben, besuchen Sie /admin/customize/themes und klicken Sie auf Komponenten, dann auf Installieren.

Wenn sich das Modal öffnet, wählen Sie Neu erstellen und benennen Sie Ihre Komponente. Sie werden zur neuen Seite der Komponente weitergeleitet, wo Sie das Thema auswählen können, auf das Sie sie anwenden möchten. Sie möchten sie auf das installierte Thema anwenden.

Um das CSS hinzuzufügen, klicken Sie auf CSS/HTML bearbeiten und fügen Sie das CSS zur common-Seite hinzu und speichern Sie es.

Sie möchten etwas Ähnliches tun:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
2 „Gefällt mir“

Vielen Dank @jordan.vidrine für die detaillierten Anweisungen.

Ich hatte kürzlich mit Hilfe anderer guter Leute in diesem Forum gelernt, wie man benutzerdefiniertes CSS hinzufügt.

3 „Gefällt mir“

Das könnte für weitere Änderungen hilfreich sein :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Es erklärt, wie man herausfindet, welches Element man mit CSS ansprechen muss.

4 „Gefällt mir“

Kann ich diese Zeile entfernen und Media Queries verwenden, um sie bis 768px zu deaktivieren, ohne alles zu zerstören? :slight_smile:

Ich möchte den Button (weil wir dort Chats und Videos haben) auf Tablets entfernen und sehe, dass die Suchleiste wirklich gut passt.

1 „Gefällt mir“

Alles ist in Ordnung, aber in der mobilen Version muss man zur Standardsuche wechseln, da sie schrecklich aussieht
image
vs
image

1 „Gefällt mir“