Banner für erweiterte Suche

[Discourse]

Diese Theme-Komponente ist veraltet und sollte nicht mehr verwendet werden. Ihre Funktionen sind jetzt im Discourse Core enthalten – Details zur Einrichtung eines Willkommensbanners finden Sie in unserer Dokumentation:

→ Creating a banner to display at the top of your site

	Zusammenfassung	Advanced Search Banner platziert eine Suchleiste zusammen mit optionaler Überschrift und Untertitel-Text in einem Banner über der Hauptnavigation der Themenliste.
	Vorschau	Vorschau auf Discourse Theme Creator
	Repository-Link	https://github.com/discourse/discourse-search-banner
	Neu bei Discourse-Themes?	Einsteigerleitfaden zur Verwendung von Discourse-Themes

Diese Theme-Komponente installieren

Da es sich um eine official Theme-Komponente handelt, die vom Discourse-Team gepflegt wird, können Support, Contribute > Bug, Contribute > UX und #contribute:feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der unten stehenden Links, um eine Anfrage zu starten.

Support Bug UX Feature

Funktionen

Standardmäßig erscheint dieses Banner auf allen Top-Level-Themenseiten (latest/new/unread/top/categories… alles, was in der top menu-Site-Einstellung enthalten ist), es kann aber auch so eingestellt werden, dass es nur auf der Startseite einer Community angezeigt wird.

Einstellungen

Name	Beschreibung
show on	Legt fest, auf welchen Seiten das Banner erscheint
plugin outlet	Gibt an, wo auf der Seite das Banner erscheinen soll
background image light	Hintergrundbild für das Banner bei hellen Farbschemata
background image dark	Hintergrundbild für das Banner bei dunklen Farbschemata
tile background image	Wiederholt das Hintergrundbild
show for	Legt fest, wer das Search Banner sehen kann (angemeldet, abgemeldet oder beide)
special style	Optionale Variationen, die das Aussehen des Suchbanners verändern

Übersetzung	Standard
search_banner.headline	Willkommen in unserer Community
search_banner.subhead	Wir freuen uns, dass Sie hier sind. Wenn Sie Hilfe benötigen, suchen Sie bitte, bevor Sie einen Beitrag verfassen.
search_banner.search_button_text

Um eines davon auszublenden, lassen Sie das Feld leer.

Benutzerdefiniertes Styling

Das HTML-Element erhält überall dort, wo dieses Banner erscheint, eine Klasse namens .display-search-banner, und das Banner selbst ist mit der Klasse .custom-search-banner umschlossen, sodass Sie mit etwas CSS das Aussehen dieses Banners nach Belieben anpassen können.

Zukünftige Erweiterungen

• Option hinzufügen, um das Banner in bestimmten Kategorien zu aktivieren

Credits

Diese Komponente lehnt sich stark an @angus’ Pavilion Header Search Theme Component an

Bei uns gehostet? Theme-Komponenten sind auf unseren Standard-, Business- und Enterprise-Plänen verfügbar.

[awesomerobot (Kris)]

Ich habe das Theme-Komponenten-Update vorgenommen, um einige neue Einstellungen hinzuzufügen:

show on — Dies bestimmt, wo das Banner angezeigt wird, und bietet folgende Optionen:

• top_menu (Neueste/Kategorien/Top/Neu/Ungelesen)
• homepage
• all (alle Seiten außer der Standard-Suchseite und den Admin-Seiten)

show for — Dies bestimmt, wer das Banner sieht:

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

Ich habe gerade ein kleines Update vorgenommen, das dieser Komponente einen optionalen Stil hinzufügt. Sie erhalten eine große Suchleiste ohne Titeltext:

Dies kann durch eine neue Einstellung „Spezialstil“ aktiviert werden. Dies aktiviert lediglich ein wenig zusätzlichen CSS.

Ich werde hier in Zukunft vielleicht noch weitere Optionen hinzufügen!

[AndyBr (Andy)]

Wie kann ich die Farbe des Begrüßungstextes in diesem Add-on ändern?

[Arkshine]

Es gibt keine Einstellung dafür. Sie können es jedoch mit etwas CSS hinzufügen:

Fügen Sie Folgendes zu Ihrem Thema oder einer neuen Themenkomponente hinzu und ändern Sie es nach Belieben.

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

    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

Vielen Dank!

[RBoy]

Gibt es eine Möglichkeit, das Suchsymbol (mit CSS oder anders) auszublenden? Ich habe ein Problem, bei dem das Suchsymbol in Verbindung mit dieser Komponente dupliziert wird: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

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

sollte nur ein Suchsymbol anzeigen. Ich muss jedoch sagen, dass die gleichzeitige Verwendung des Suchbanners und der Header-Suche einige schlechte UX-Nebeneffekte hat.

Ich würde empfehlen, nur das eine oder das andere zu verwenden.

[RBoy]

Danke! Super hilfreich

@isaac

Ich muss sagen, dass die gleichzeitige Verwendung des Suchbalkens und der Header-Suche einige schlechte UX-Nebeneffekte hat.

Könnten Sie näher erläutern, welche UX-Nebeneffekte?

[isaac (Isaac Janzen)]

Das Video, das ich oben verlinkt habe, zeigt einige der Probleme

• überlappende Such-Dropdowns
• seltsame offene und geschlossene Zustände von Such-Dropdowns
• Suchsymbol ist ein Link zur erweiterten Suche in einem Suchfeld und nicht im anderen
• usw.

[RBoy]

Verstanden. Solange sie nicht auf derselben Seite zusammen sind, sollte es in Ordnung sein.

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

Kann mir jemand helfen? Ich habe dieses Theme auf meinem Discourse installiert, aber das Bild schneidet auf der rechten Seite ein Stück ab. Damit das Bild vollständig passt, muss ich die Schriftart der Website auf “Kleiner” stellen. Ich habe zwei verschiedene Installationen von Discourse und in einer davon hat das Bild normal funktioniert, in der anderen wird das Bild abgeschnitten?

[awesomerobot (Kris)]

Können Sie einen Screenshot einfügen? Dies wird das Verständnis des Problems erheblich erleichtern.

[ecki (Bernd)]

Ich habe das gleiche Problem, dass verschiedene Browser/Modi unterschiedliche Teile dieses Bildes anzeigen. Ich habe es gelöst, indem ich es extra breit gemacht habe, sodass die rechte Seite nur unter bestimmten Bedingungen angezeigt wird. Aber das ist bei symmetrischen Bildern nicht so einfach. Ich vermute, etwas mehr CSS (ohne nach einem thome-component-overwrite zu suchen) würde dabei helfen.

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

Ich habe es geschafft, einen Teil davon zu lösen. Ich habe die Theme-Komponente in den anderen Themes deaktiviert und sie nur auf 1 belassen. Unglaublich, wie es scheint, war das Bild nur wegen des Handys „normal“ mit der Schriftgröße „normal“, sodass nur eine Seite des Bildes erscheint. Gibt es etwas, das ich tun kann, damit es auch auf meinem Handy vollständig erscheint?

[Surbhi_Pal1 (Surbhi)]

Hallo,

Gibt es eine Möglichkeit, den Abstand zwischen dem Suchbanner und dem Header zu entfernen?

[Arkshine]

Hallo, Sie können dieses CSS in einer neuen Theme-Komponente verwenden:

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

[Surbhi_Pal1 (Surbhi)]

Funktionierte einwandfrei, danke!

[PT_LB (Paul)]

Es scheint, dass Discourse das gleiche Problem hat wie in meiner Community: Das Overlay braucht einige Zeit, um das abzudecken, was sich unter dem Such-Underlay (Discover) befindet:

In meiner Community ist es ausgeprägter:

Ich frage mich, ob jemand eine Lösung dafür gefunden hat, möglicherweise eine Verzögerung bei der Anzeige des Overlays? Könnte zu einer schlechten Erfahrung führen.