Erweitertes Suchbanner

[Discourse]

Dieses Theme-Komponente ist veraltet und sollte nicht mehr verwendet werden. Seine Funktionen sind jetzt im Discourse Core enthalten – siehe unsere Dokumentation für Details zur Einrichtung eines Willkommensbanners:

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

	Zusammenfassung	Advanced Search Banner platziert eine Suchleiste zusammen mit optionalem Titel- und Untertiteltext in einem Banner über der Haupt-Themenlisten-Navigation.
	Vorschau	Vorschau im Discourse Theme Creator
	Repository-Link	https://github.com/discourse/discourse-search-banner
	Neu bei Discourse Themes?	Einsteigerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Komponente installieren

Da dies ein von dem Discourse-Team gewartetes official Theme-Komponente ist, können Support, Bug, UX und #feature-requests in den entsprechenden Kategorien hier auf Meta eingereicht und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen Link unten, um einen zu erstellen.

Support Bug UX Feature

Funktionen

Standardmäßig wird dieses Banner auf allen Top-Level-Themenseiten angezeigt (neueste/neu/ungelesen/beste/Kategorien… alles in der Site-Einstellung top menu), es kann aber auch so eingestellt werden, dass es nur auf der Homepage einer Community angezeigt wird.

Einstellungen

Name	Beschreibung
show on	Bestimmt, auf welchen Seiten das Banner angezeigt wird
plugin outlet	Wo auf der Seite das Banner erscheinen soll
background image light	Hintergrundbild für das Banner bei hellen Farbpaletten
background image dark	Hintergrundbild für das Banner bei dunklen Farbpaletten
tile background image	Das Hintergrundbild wiederholen
show for	Wer das Suchbanner sehen kann (angemeldet, abgemeldet oder beide)
special style	Optionale Variationen, die das Aussehen des Suchbanners ändern

Übersetzung	Standard
search_banner.headline	Willkommen in unserer Community
search_banner.subhead	Wir freuen uns, Sie hier zu haben. Wenn Sie Hilfe benötigen, suchen Sie bitte, bevor Sie posten.
search_banner.search_button_text

Um eines von der Anzeige auszuschließen, lassen Sie das Feld leer.

Benutzerdefiniertes Styling

Das HTML-Element erhält überall dort, wo dieses Banner angezeigt wird, eine Klasse namens .display-search-banner, und das Banner selbst ist mit der Klasse .custom-search-banner umschlossen. Mit etwas CSS sollten Sie in der Lage sein, das Aussehen dieses Banners nach Belieben anzupassen.

Zukünftige Erweiterungen

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

Credits

Dies leiht sich sehr stark von @angus’ https://meta.discourse.org/t/header-search-theme/67959

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

[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)]

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.