Erweiterte Kopfzeilensuche

Anpassung Themenkomponente
,
1
:discourse2: Zusammenfassung Erweiterte Header-Suche entfernt das Suchsymbol aus dem Header-Menü und erstellt eine Suchleiste, die in der Mitte des Header-Bereichs platziert wird.
:eyeglasses: Vorschau Vorschau im Discourse Theme Creator
:hammer_and_wrench: Repository-Link https://github.com/discourse/discourse-header-search
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Komponente installieren

:white_exclamation_mark:Hinweis

Diese Theme-Komponente ist nur erforderlich, wenn Websites externe Suchen unterstützen möchten. Andernfalls können Sie die Einstellung Sucherlebnis auf Suchfeld im Seitenheader aktualisieren, um die Suchfunktion der Seite in den Header zu verschieben.

Funktionen

image
image2120×1900 464 KB

Einstellungen

Name Beschreibung
extra search icons Fügt der Suchleiste zusätzliche Symbole hinzu (z. B. zum Auslösen einer externen Suche).
svg icons

Optional externe Suchsymbole anzeigen

Verwenden Sie extra_search_icons, um zusätzliche Symbole in der Suchleiste anzuzeigen.

Diese Einstellung unterstützt die folgenden Parameter:

  • prefix: Das Präfix der Such-URL beim Klicken auf das jeweilige Symbol
  • icon: Das anzuzeigende Symbol aus dem Font Awesome-Set (möglicherweise muss es auch in der Einstellung svg icons hinzugefügt werden)
  • target: Optional auf “_blank” setzen, um den Link standardmäßig in einem eigenen Tab/Fenster zu öffnen
  • showInCategories: Kategorie-IDs, in denen das angegebene Symbol ausschließlich angezeigt werden soll (standardmäßig wird das Symbol überall angezeigt)
  • excludeFromCategories: Kategorie-IDs, in denen das angegebene Symbol nicht angezeigt werden soll

Danksagungen

Danke an @Johani für den JavaScript-Code des Suchpanels :+1:


:discourse2: Von uns gehostet? Theme-Komponenten können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

37 „Gefällt mir“
Edit search header theme css
Top Search bar fully open
Header search in custom header
Search Bar pops up when adding new topic or replying
Fonction recherche dans certaines catégories
Pavilion Header Search Theme Component
🌐 www theme
Search section like on Reddit?
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Separate notifications and account options
Customizing your site with existing theme components
Pavilion Header Search Theme Component
Insert search in custom header
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Fully Theme
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji
Pavilion Header Search Theme Component
Why is the Sidebar Collapse missing on my site?
Pavilion Header Search Theme Component
Where to find search bar in our settings?
Discourse has slowly been solving a fatigue I didn't realize I had
17

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

6 „Gefällt mir“
18

Das funktioniert jetzt gut.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Danke.

5 „Gefällt mir“
20

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.

Bildschirmfoto 2022-07-28 um 17.36.22
Bildschirmfoto 2022-07-28 um 17.36.222232×1698 166 KB

4 „Gefällt mir“
21

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“
22

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

3 „Gefällt mir“
23

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“
24

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

4 „Gefällt mir“
26

Danke, dass du das @manuel identifiziert hast!

Ich habe gerade einen Fix veröffentlicht :tada:

6 „Gefällt mir“
27

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“
28

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.

3 „Gefällt mir“
29

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“
30

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

1 „Gefällt mir“
31

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“
32

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“
33

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“
34

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“
35

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“
36

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“
37

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“