Meta-Branded-Theme neu aufbauen: Neue Icons, eine benutzerdefinierte Startseite und ein erster Blick auf die Blocks API

Wir haben gerade eine zweite Iteration unseres Theme-Redesigns veröffentlicht. Während das erste Update ein visuelles Refresh war, das auf dem bisherigen Meta Branded Theme aufbaute, ist diese Version im Wesentlichen ein komplett neu erstelltes Theme. Die neue Marken-Sprache wurde bereits mit dem vorherigen Release eingeführt, daher gibt es in dieser Hinsicht nicht allzu viele sichtbare Änderungen. Was sich mit diesem Update erheblich geändert hat, ist die Implementierung des Themes selbst sowie der Eindruck, den sie davon vermittelt, wohin wir uns bei der Discourse-Anpassung im Allgemeinen bewegen.

Ich gehe nun auf einige Implementierungsdetails ein, beginnend mit den kleineren Punkten:

Lucide Icons

Lucide ist ein Open-Source-Set moderner Strich-Icons, das wir bereits in mehreren unserer Anpassungsprojekte eingeführt haben. Mit dieser Iteration haben wir es nun auch in das Meta Branded Theme integriert. Es sind keine Pläne vorhanden, Font Awesome im Discourse-Kern zu ersetzen, doch die kostenlose Stufe von Font Awesome bietet nur eine begrenzte Auswahl an Strich-Icons, die nicht ausreicht, um ein kohärentes Strich-Icon-System zu bilden. Das Theme-Komponenten-Modul ist unter Discourse Lucide Icons verfügbar.

Theme-Modifikator zur Einschränkung der Farbpaletten

Wir haben einen neuen Theme-Modifikator namens only_theme_color_schemes hinzugefügt, der festlegt, welche Farbpaletten für ein bestimmtes Theme verfügbar sind – sowohl für Administratoren als auch für Benutzer in ihren Interface-Einstellungen. Meta verfügt über mehrere benutzerwählbare Paletten, die mit der visuellen Identität des Meta Branded Themes kollidieren würden. Durch diesen Modifikator werden nur die mit dem Theme gebündelten Paletten als Optionen angeboten. :link: PR: FEATURE: add modifier to restrict theme color schemes

Layout in voller Breite

Wir testen zudem Anpassungen am Discourse Full-width component, um den Hauptinhalt der Seite besser zu zentrieren. Da im Header viele dynamische Elemente vorhanden sind, die die Einrichtung erschweren, ist dies bisher experimentell und nur in einem Branch der Komponente verfügbar.

Value Transformer zur Steuerung der Sichtbarkeit des Willkommensbanners

Wir haben einen neuen Value Transformer namens welcome-banner-display-for-route verwendet, um programmatisch festzulegen, auf welchen Routen das Kern-Willkommensbanner angezeigt wird. Damit stellen wir sicher, dass das Banner nur auf der standardmäßigen benutzerdefinierten Startseite erscheint und nicht auf Seiten, die ein Benutzer als persönliche Landeseite eingerichtet hat. :link: PR: DEV: Add welcome-banner-display-for-route value transformer

Damit kommen wir zu den beiden größeren Änderungen:

Benutzerdefinierte Startseite über einen Theme-Modifikator

Der Theme-Modifikator custom_homepage ist bereits seit fast zwei Jahren verfügbar, doch dies ist das erste Mal, dass wir ihn nutzen, um das Erlebnis der Startseite auf Meta selbst zu gestalten. Wir führen eine benutzerdefinierte Landeseite ein, die mit hervorgehobenen Komponenten gefüllt ist. Für den ersten Launch umfasst dies hervorgehobene Kategorien sowie eine Vorschau der neuesten Diskussionsbeiträge.

Diese hervorgehobenen Komponenten haben wir mit unserer neuen experimentellen Blocks-API erstellt, was uns zur größten Änderung führt:

Blocks-API: Erste Produktionseinsatz

Die Blocks-API ist ein neues Framework zum Erstellen modularer, zusammensetzbarer Layouts in Discourse. Es ermöglicht Theme-Entwicklern, Seiten aus eigenständigen, wiederverwendbaren Komponenten zusammenzustellen, die in definierte Layoutbereiche eingefügt werden können. Das Meta-Theme ist unsere erste Produktionseinsatz dieser API.

Das Framework bietet eine umfangreiche Palette an Entwickler-Tools: Aktivieren Sie die Entwickler-Tools, und Sie können die Block-Struktur jeder Seite mit einer integrierten Overlay-Ansicht inspizieren, die alle aktiven Layoutbereiche und ihre Komponenten visualisiert.

Über die Startseite hinaus nutzen wir Blocks auch, um benutzerdefinierte Kategorie-Banner zu rendern, die die Unterkategorien jeder Kategorie anzeigen:

Dies ist noch eine frühe Vorschau des Systems im Produktionskontext. Wir planen, in Kürze Dokumentation und weitere Beispiele zu veröffentlichen. :link: PR: DEV: Add Block API for declarative, validated UI extension points

19 „Gefällt mir“

Das ist eine gute Wahl. Diese Icon-Sammlung ist mir aufgefallen, als ich nach verfügbaren Icon-Sets für Discourse gesucht habe. Sie wirkt verfeinert und elegant.

Das vollständige Fehlen gefüllter Icons hat jedoch einige Probleme verursacht. So war zum Beispiel der Indikator für ungelesene Beiträge als farbiger Kreis kaum sichtbar, oder der Umschaltknopf für Dunkel-/Hellmodus ließe sich ohne gefüllten Teil nur schwer korrekt darstellen.

Ich sehe, dass du diese Probleme im Meta-Branded-Theme gelöst hast. Hast du dafür benutzerdefinierte Icons hinzugefügt?


Übrigens ist das Discourse-Logo oben links im Meta-Branded-Theme nicht klickbar (das ist meines Wissens seit Monaten so) :grimacing:

1 „Gefällt mir“

Nein, wir haben einfach einige Symbole wie circle und square nicht auf die Lucide-Version abgebildet. Oder genauer gesagt, wir haben für diese Symbole nur die Strichversion von Fontawesome abgebildet (far-circle, …). Es könnte weitere Fälle geben, in denen wir die Abbildung weiter verbessern müssen.

Zum Beispiel ist das Herz-Symbol schwierig. Ich denke, eine gefüllte Version wäre besser, wenn es geliked wurde, aber bisher bin ich mir nicht sicher, wie man das am besten umsetzt..

[quote=“Canapin, Beitrag:5, Thema:400013”]
Übrigens ist das Discourse-Logo oben links im meta-markierten Theme nicht klickbar (das ist meiner Meinung nach seit Monaten der Fall)
[/quote] Ich kann das nicht reproduzieren. Hast du weitere Details?

3 „Gefällt mir“

Ich bin neugierig, welchen Unterschied Blocks im Vergleich zu Plugin Outlets mit sich bringt?

2 „Gefällt mir“

Nur auf Chrome und Edge getestet, und das Problem tritt nur auf dem Desktop auf:

Das Div für den Seitenleisten-Umschalter überdeckt das Logo, wodurch es nicht anklickbar ist.

(und ja, das umrandete Herz für „Gefällt mir“ sieht schlecht aus :broken_heart: )

1 „Gefällt mir“

Ich mag das aktuelle Symbol für „beantwortet

3 „Gefällt mir“

Ich hätte nicht erwartet, dass etwas wie Lucide in ein offizielles Theme so integriert wird. Sieht großartig aus! Ich wünschte nur, das Herz wäre ausgefüllt. Abgesehen von diesem kleinen Mangel sieht das Theme auf dem Mobilgerät meiner Meinung nach fantastisch aus.

Anscheinend gibt es keinen Abstand zum Body in privaten Nachrichten:

2 „Gefällt mir“

[quote=“Canapin, Beitrag:9, Thema:400013”]
Mir gefällt das aktuelle Symbol für „beantwortet

2 „Gefällt mir“

Hmm… eine Sache, die ich ändern würde, ist das Chat-Symbol von message-square-text zu message-square? Die Linien wirken etwas ablenkend.

1 „Gefällt mir“

Danke für all das Feedback zu den Icons! Ich habe gerade ein eigenes Thema für das Set erstellt: Discourse Lucide Icons.

Idealerweise würden wir dort weiteres Feedback sammeln und das Set schrittweise weiter verfeinern.

Ich stimme zu, die Symbole sind bei der aktuellen Größe von 0,74 em fast nicht lesbar. Sie benötigen etwa 1 em.

1 „Gefällt mir“

Bilde ich mir das ein oder hat der vertikale Abstand in der Themenliste heute zugenommen? Entweder ist sie weniger dicht gepackt, oder ich bin es.

1 „Gefällt mir“

Ich habe das auch bemerkt und es manuell rückgängig gemacht (weil ich Informationsdichte dem Aussehen vorziehe), aber leider ohne Erfolg :frowning:

Der Hauptunterschied aus Sicht des Designs ist, dass ein PluginOutlet ein Einfügungspunkt ist. Sie injizieren Ihre Komponente direkt in eine Kernvorlage. Jede Anpassung verändert tatsächlich die App-Struktur.

Ein BlockOutlet ist ein Layout-Rahmen. Sie registrieren eine oder mehrere Komponenten mit dem Rahmen. Anschließend finden Anpassungen innerhalb dieses Rahmens statt und nicht in den App-Vorlagen. So erhalten wir vorhersehbarere und stabilere Layouts.

Ein weiterer großer Unterschied besteht darin, dass die Blocks-API das gesamte Spektrum der bedingten Renderlogik verarbeiten kann. Sie müssen diese nicht zu Ihrer Komponente hinzufügen. Eine Blockkomponente kann sich rein auf Inhalt und Vorlage konzentrieren, und wir haben viel weniger wiederholte Logik.

1 „Gefällt mir“

Wenn jemand eine kompaktere Themenliste wünscht, hat bei mir folgendes funktioniert:

.topic-list .topic-list-data {
  padding: 8px 0px;
  line-height: 0px;
}

Das neue, von Meta gebrandete Theme hat meiner Meinung nach auf mobilen Geräten zu viel Abstand.

    1. Abstand zwischen dem Bildschirmrand und dem Container des Inhalts
    1. Abstand zwischen dem Container der Seite und dem eigentlichen Inhalt

Andere Themes haben diese erste Lücke zwischen Bildschirmrand und Inhalts-Container nicht.

Dadurch wirkt der Inhalt horizontal etwas „zusammengedrückt“; es ist sehr wenig Platz vorhanden. Dies ist auf der Seite „Mein Beitrag“ im Vergleich zu Horizon deutlich sichtbar:

Horizon kann deutlich mehr Inhalt anzeigen, ohne die Lesbarkeit zu beeinträchtigen.

Ich verstehe die Absicht des lila „Umriss“-Hintergrunds, damit der Markencharakter des Themes auf einer Vollinhaltsseite sichtbar bleibt, aber meiner Meinung gehen auf diesen schmalen Bildschirmen zu viel Platz verloren.

Noch ein paar kleine Kritikpunkte:

Das Symbol oben links ist nicht perfekt rund. Es ist minimal abgeflacht.
image image

Beim Popup für Kategorien/Tags läuft das Textfeld leicht über (ich bin mir nicht sicher, ob dies mit diesem Theme zusammenhängt):

. Es wäre besser, wenn es es vollständig überdecken würde.

1 „Gefällt mir“