Einführung beliebter Funktionen in Discourse: Kopfzeilensuche, Willkommensbanner und Kategorie-Icons / Emojis

[lindsey (Lindsey Fogle)]

Wir haben mehrere neue Funktionen zu Discourse hinzugefügt, die auf beliebten Theme-Komponenten basieren, um die Gestaltung Ihrer Community zu erleichtern. In diesem Thema werden wir mehr über diese neuen Kernfunktionen, deren Verwendung und die Unterschiede zu den Theme-Komponenten, die sie inspiriert haben, erläutern.

Header-Suche

Die Header-Suchfunktion verlagert die Suche vom Lupensymbol in der oberen rechten Ecke in ein prominenteres Eingabefeld im Website-Header.

Wenn mehr Platz im Header benötigt wird (z. B. beim Scrollen eines Themas), wird die Suche zur Platzersparnis wieder zur Lupe.

So aktivieren Sie die Header-Suche…

1. Gehen Sie im Admin-Bereich zu Themes & Komponenten.
2. Klicken Sie auf die Schaltfläche Bearbeiten für Ihr aktives Theme.
3. Suchen Sie die Einstellung Sucherlebnis.
4. Aktualisieren Sie diese Einstellung auf „Suchfeld im Website-Header“.
5. Klicken Sie auf das grüne Häkchen, um zu speichern.

Header-Suchfunktion vs. Advanced Header Search Komponente

Die Header-Suche wurde von der Header Search Theme-Komponente inspiriert, die wir in Advanced Header Search umbenannt haben, um sie von der Kernfunktion zu unterscheiden.

Sie sollten die Advanced Header Search Komponente verwenden, wenn Sie externe Suchen unterstützen müssen (d. h. Suchen außerhalb Ihrer Discourse-Community). Andernfalls können Sie die Header-Suchfunktion verwenden, die jetzt Teil des Discourse-Kerns ist.

Willkommensbanner

Das Willkommensbanner begrüßt Mitglieder und Besucher und fügt Ihren Themenlisten eine prominente Suchleiste hinzu.

Die Funktionen Willkommensbanner und Header-Suche sind miteinander kompatibel, sodass die Header-Suche ausgeblendet wird, während das Willkommensbanner sichtbar ist.

So aktivieren Sie das Willkommensbanner…

1. Gehen Sie im Admin-Bereich zu Themes & Komponenten.
2. Klicken Sie auf die Schaltfläche Bearbeiten für Ihr aktives Theme.
3. Suchen Sie die Einstellung Willkommensbanner aktivieren.
4. Aktivieren Sie diese Einstellung.
5. Klicken Sie auf das grüne Häkchen, um zu speichern.

Um die im Banner angezeigte Nachricht anzupassen, gehen Sie zum Bereich Website-Texte und suchen Sie nach „welcome_banner“. Sie können Textzeichenfolgen für die Begrüßung registrierter Mitglieder, die Begrüßung anonymer Benutzer und das Suchfeld ändern.

Willkommensbanner vs. Advanced Search Banner Komponente

Das Willkommensbanner wurde von der Search Banner Komponente inspiriert, die wir in Advanced Search Banner umbenannt haben, um sie von der Kernfunktion zu unterscheiden.

Sie sollten die Advanced Search Banner Komponente verwenden, wenn Sie benutzerdefinierte Hintergrundbilder für das Banner verwenden, mehrere Textzeilen im Banner eingeben oder ändern möchten, wer das Banner sehen kann (d. h. angemeldete Mitglieder, abgemeldete Benutzer oder beides). Andernfalls können Sie die Willkommensbannerfunktion verwenden, die jetzt Teil des Discourse-Kerns ist.

Kategorie-Icons und Emoji

Sie können jetzt Icons und Emoji verwenden, um Kategorien zu unterscheiden, anstelle des farbigen Quadrats.

So verwenden Sie Kategorie-Icons / Emoji…

1. Ändern Sie beim Erstellen oder Bearbeiten einer Kategorie die Einstellung Stil auf Icon oder Emoji.
2. Wählen Sie das Symbol oder Emoji aus, das Sie verwenden möchten. Die Farbe bestimmt die Farbe des Symbols (falls verwendet) und beeinflusst andere Bereiche, in denen eine Farbe mit der Kategorie verbunden ist, z. B. auf der Seite /categories.
3. Klicken Sie auf Kategorie speichern.

Kategorie-Icons und Emoji vs. Category Icons Komponente

Kategorie-Icons und Emoji wurden von der Category Icons Komponente inspiriert, die wir bald zugunsten dieser Kernfunktion einstellen werden, da sie mehr Anpassungsmöglichkeiten (d. h. Emojis) unterstützt und eine viel einfachere Einrichtung bietet.

Für diejenigen, die derzeit Kategorie-Icons verwenden, empfehlen wir, Ihre Icon-Anpassungen von Category Icons zu den Kernkategorieeinstellungen zu verschieben, um langfristigen Support und zukünftige Funktionsverbesserungen zu gewährleisten. In unseren Tests überschreiben die Komponenteneinstellungen die Kernfunktionseinstellungen, aber diese waren nicht dafür ausgelegt, zusammen verwendet zu werden.

[AquaL1te]

Ich wollte zu der nativen Kategorie-Icon-Methode wechseln. Aber ich habe festgestellt, dass die Theme-Komponente viel mehr Icons hat. Von allen Icons, die ich verwendet habe, funktioniert jetzt nur noch eine kleine Teilmenge mit den nativen Kategorie-Icons. Ich nehme an, der Unterschied besteht darin, dass die eine FontAwesome und die andere Emojis verwendet? Ich benutze zwar die Option „Icons“, aber wenn ich danach suche, werden sie nicht angezeigt (nachdem die Theme-Komponente für Kategorie-Icons deaktiviert wurde).

Ein Beispiel dafür, was ich jetzt benutze:

[Arkshine]

Sie können die fehlenden Symbole zur Website-Einstellung SVG-Symbol-Teilmenge hinzufügen.

[krystal (Krystal S)]

@lindsey

Sie sollten die Komponente „Erweiterte Kopfzeilensuche“ verwenden, wenn Sie externe Suchen unterstützen müssen (d. h. Suchen außerhalb Ihrer Discourse-Community).

Wie funktioniert das? Bedeutet das, dass Sie externe Quellen durchsuchen können, während Sie sich in Discourse befinden? Oder bedeutet dies nur, dass Sie Discourse von einer externen Quelle aus durchsuchen?

[Heliosurge (Dan DeMontmorency)]

@lindsey

Kategorie-Symbole und Emoji

Sie können jetzt Symbole und Emoji verwenden, um Kategorien zu unterscheiden, anstelle des farbigen Quadrats.

Das ist eine ziemlich tolle Ergänzung! Danke! In Kombination mit benutzerdefinierten Emoji bietet dies beeindruckende Anpassungsmöglichkeiten!

[AquaL1te]

@lindsey

Kategorie-Symbole und Emoji

Es gibt jedoch immer noch einen Unterschied: Mit der Theme-Komponente erhalten die Unterkategorien diesen schönen Touch:

Dies ist bei der nativen Option für Kategorie-Symbole nicht sichtbar. Das obere Symbol fehlt dann.

[tomtjes (Thomas Reintjes)]

Ich verwende Kategorie-Symbole, um anzuzeigen, ob eine Kategorie öffentlich, für angemeldete Mitglieder sichtbar oder auf bestimmte Gruppen beschränkt ist. Wäre dies mit der neuen Einstellung nachzubilden? Ich mag es, dass die Symbole grau sind, möchte aber nicht alle Kategoriefarben auf Grau setzen.

[Arkshine]

@AquaL1te

Dies ist mit der nativen Option für Kategorie-Symbole nicht sichtbar. Das obere Symbol fehlt dann.

Ich denke, dies wird unterstützt, sobald dieser PR zusammengeführt wurde:

FIX: add category badge style to category list

@tomtjes

Ich verwende Kategorie-Symbole, um anzuzeigen, ob eine Kategorie öffentlich ist, für angemeldete Mitglieder sichtbar ist oder auf bestimmte Gruppen beschränkt ist. Wäre dies mit der neuen Einstellung nachzubilden? Ich mag es, dass die Symbole grau sind, möchte aber nicht, dass alle Kategorie-Farben auf Grau gesetzt werden.

Das sollte mit CSS möglich sein.
Sie könnten die Standardfarbe für alle Symbole festlegen und dann basierend auf der Klasse .anon (für nicht angemeldete Benutzer) und dem Gruppennamen des Benutzers (siehe CSS Classes for Current User's Groups) das Symbol entweder ausblenden oder es grau ändern.

Wenn Sie nur Symbole verwenden und die Option für angemeldete Benutzer benötigt wird, ist es in Ordnung, auch TC weiterhin zu verwenden.

[mcwumbly (Dave McClure)]

@tomtjes

Ich verwende Kategorie-Symbole, um anzuzeigen, ob eine Kategorie öffentlich ist, für angemeldete Mitglieder sichtbar ist oder auf bestimmte Gruppen beschränkt ist.

Das gefällt mir. Ich frage mich, ob wir dies als Signal für etwas grundlegend Fehlendes betrachten sollten, anstatt diese Last auf die Administratoren zu legen, die es mit Anpassungen lösen müssen.

Auch damit zusammenhängend: Allow users with access to a restricted category to see who else has access

[gooseegg]

Hallo zusammen,

wir haben kürzlich unser Discourse-Forum (tw.forumosa.com) aktualisiert, und mit dem neuesten Update wurden der neue „Willkommen zurück“-Header und die integrierte Suchleiste zur Homepage hinzugefügt. Obwohl es konzeptionell gut aussieht, haben wir einige Benutzerfreundlichkeitsprobleme festgestellt – insbesondere auf Mobilgeräten:

1. Such-Dropdown kann aufgrund von Transparenz unleserlich sein

Wenn Sie auf das Suchsymbol in der oberen Navigationsleiste tippen (z. B. unter Android), erscheint das Dropdown, hat aber einen transparenten Hintergrund, wodurch die Suchergebnisse über dem darunter liegenden Inhalt fast unlesbar sind. Ein solider Hintergrund sollte dies beheben. Unten habe ich Screenshots gepostet, die zeigen, was ich meine.

2. Header ist hoch – wie können wir den vertikalen Abstand anpassen?

Die neue Willkommensnachricht und die Suchleiste nehmen auf Mobilgeräten viel Platz ein. Da wir das Suchsymbol bereits in der Navigationsleiste haben, wirkt die zusätzliche Suchleiste redundant. Wir möchten die Höhe dieses Headers verringern oder die zusätzliche Suchleiste/Willkommensnachricht auf kleineren Bildschirmen ganz ausblenden.

Dies kann auch Desktops betreffen, ist aber derzeit besonders problematisch auf Mobilgeräten.

Ist jemandem das schon aufgefallen und hat eine saubere Möglichkeit gefunden, dies über CSS oder Theme-Komponenten zu überschreiben?

Viele Grüße!

[Arkshine]

Erwähnenswert ist, dass das Update-Banner auch oben gestapelt wird:

Es scheint, dass der z-index von .welcome-banner (derzeit 1) mindestens >= 3 sein sollte (der Hauptlink und die Metadaten verwenden z-index: 2).

[davidkingham]

@Arkshine

Ich denke, dies wird unterstützt, sobald dieser PR zusammengeführt wurde:

Ich fürchte, es ist immer noch kaputt

[David_Ghost]

Sie müssen die Symbole im SVG-Icon-Subset hinzufügen, falls dies noch nicht geschehen ist.

[davidkingham]

Vielen Dank, aber ich tue:

[lindsey (Lindsey Fogle)]

Welche Seite ist das?

Es sieht so aus, als ob die Symbole auf /categories wie erwartet angezeigt werden, aber ich bin mir nicht sicher, ob das daran liegt, dass du noch das Theme-Komponente verwendest, oder ob die Probleme, die du hast, auf einer anderen Seite auftreten, die wir reparieren müssen.

[maiki]

Ich hatte gerade eine tolle Erfahrung: Ich habe für meine persönliche Website zum Horizon-Theme gewechselt und Symbole für meine Kategorien festgelegt… von meinem Mobilgerät aus!

Das ist verrückt, und ich schätze die Bemühungen, die in die reibungslose Administration gesteckt werden.