Verbesserte Komponente zur Anzeige von Kategorie-Boxen

[oca]

discourse-theme-category-homepage

Ich habe viel an einer neuen category-box-Startseite für das Forum meiner Community gearbeitet. Sie ist sehr spezifisch auf unsere Bedürfnisse zugeschnitten und daher möglicherweise nicht für viele andere nützlich, aber man kann sich sicher davon inspirieren lassen.

Nach/Vorher

Unser spezifischer Anwendungsfall

Unsere Community beschäftigt sich mit einer Vielzahl breiter Themen. Wir vernetzen lokale NGOs, die eigene Mitglieder haben, und wir verfügen über autonome Gruppen, die jeweils eine oder mehrere Aktionen durchführen, die sie bewerben müssen, und die zudem einen privaten Raum benötigen, um darüber zu diskutieren.

Ein signifikanter Teil unserer Mitglieder sind ältere Personen, und jede Aktion, die mehr als drei Klicks erfordert, ist für sie sehr schwierig (daher ist das übliche Verwalten von Benachrichtigungsebenen für sie nicht machbar).

Die Community ist groß genug, dass wir ein starkes Sortiersystem benötigen, aber die digitalen Fähigkeiten und die Bereitschaft der Nutzer sind eher gering. Daher müssen wir alles so einfach und eindeutig wie möglich gestalten.

Organisation der Themen

Die Hauptkategorien dienen als Container für die Hauptziele der Community.
Jedes Thema, das sich nicht auf eine Gruppe bezieht, gehört zur nächstgelegenen Hauptkategorie, und ihre Hauptpunkte können mit Tags gekennzeichnet werden. Ein Tag ist meist, aber nicht zwingend, in einer Hauptkategorie enthalten.

Jede NGO und lokale Gruppe veröffentlicht ihre Ankündigungen in einer öffentlichen Unterkategorie der offensichtlichsten Hauptkategorie und arbeitet ruhig in einer privaten Unterkategorie.

Somit kann ein Nutzer leicht alle Inhalte zu einem unserer Hauptziele (Hauptkategorie), zu einem bestimmten Thema (ein Tag, das mehrere Ziele übergreifen kann), zu einer bestimmten Gruppe (eine öffentliche Unterkategorie) usw. finden.

Funktionen

• Jede Kategorie hervorheben, damit sie sich wie ein ganzer Abschnitt der Website anfühlt.
  • Fettgedruckte Schrift verwenden und ein Icon zu allem hinzufügen, auf das man klicken kann, damit es einfacher ist, sich auf das Wesentliche zu konzentrieren.
• Zusätzliche Elemente für jede Kategorie hinzufügen:
  • Die übliche Anzahl von Beiträgen
  • Der Auswahlschalter für das Benachrichtigungsniveau
  • Ein Link „Klicken Sie hier, um alle Beiträge zu diesem Bereich zu sehen", um besonders deutlich zu sein
• Tags hinzufügen, die mit dieser Kategorie verknüpft sind
  • Eine Überschrift hinzufügen, um sehr deutlich zu machen, dass dies die Hauptthemen sind, über die wir diskutieren
  • Diese Tags werden über eine Themeneinstellung ausgewählt
  • Die Anzeige der Tags ist so gestaltet, dass sie tatsächlich wie Tags aussehen, damit die Nutzer verstehen, was wir meinen, wenn wir das Wort „Tag" verwenden.
  • Hinweis: Die Anzeige wird durch die Tag-Icon-Komponente verbessert
• Eine Überschrift für Unterkategorien hinzufügen, um besonders deutlich zu machen, dass diese Kategorien für Ankündigungen gedacht sind, und eine weitere, um besonders deutlich zu machen, dass diese Unterkategorien privat sind (ja, es gibt ein Schloss, und jeder Nutzer mit mittlerem Kenntnisstand versteht das. Aber…)
  • Hinweis: Die Anzeige wird durch die Kategorie-Icon-Komponente verbessert
• Die meisten dieser Funktionen können ein- und ausgeschaltet werden.

Installation

Hinweis: Diese Komponente befindet sich noch im Entwurf (Work in Progress). Ich aktualisiere sie weiterhin, korrigiere CSS-Fehler, die ich an anderer Stelle verbreitet habe, usw. Bitte haben Sie Verständnis und lassen Sie mich wissen, wenn etwas seltsam aussieht.

Installieren Sie die Komponente wie üblich. Wie installiere ich ein Theme oder eine Theme-Komponente?
Repository: https://framagit.org/oca/discourse-theme-category-homepage.git

Roadmap für zukünftige Verbesserungen

Die sehr große Anzahl von CSS-Fehlern beheben.
Das Problem beheben, das die Anzeige von Trennzeichen/Überschriften für Unterkategorien erzwingt, auch wenn es keine öffentlichen oder privaten Unterkategorien gibt.
Eine so schöne Kategorie-Seite erstellen, die Unterkategorie-Boxen und Themen anzeigt.
Alles aktualisieren, sobald das Discourse-Team entscheidet, dass Unter-Unterkategorien eine Sache sein könnten (ich weiß, lassen Sie mich hoffen…)

Ich bin offen für Vorschläge neuer Funktionen, werde sie jedoch nur dann in diese Komponente aufnehmen, wenn sie meinem sehr spezifischen Anwendungsfall dienen oder sehr einfach umzusetzen sind. Jede hinzugefügte neue Funktion kann ein- und ausgeschaltet werden.

[HAWK]

@oca

Kann jemand einen Wiki-Modus hinzufügen, damit ich den Eröffnungspost bei Bedarf aktualisieren und das Theme-Component-Tag hinzufügen kann?

Kein Problem, das ist erledigt.

[torstensson (Per Torstensson)]

Vielen Dank, dass Sie diese großartige Komponente erstellt haben, sie ist fantastisch!

Eine Frage: Ist es möglich, sie mit der Kategorieeinstellung „Boxen mit hervorgehobenen Themen

[oca]

@torstensson

Eine Frage: Ist es möglich, dies mit der Kategorie-Einstellung „Boxen mit hervorgehobenen Themen“ aktiv zu haben? Wenn nicht, wäre das eine Funktion, die sich umsetzen ließe, oder sehen Sie dabei potenzielle Probleme?

Hallo, danke.
Momentan ist das nicht möglich (es ist nicht dieselbe Box, die angepasst wird), aber es ist definitiv etwas, das sich leicht umsetzen lässt. Wenn du möchtest, kann ich dir dabei helfen – schreib mir einfach eine PN. Alternativ könnte ich mir das auch ansehen, wenn ich etwas Zeit habe. Dafür bräuchte ich jedoch von dir eine Skizze dessen, was du dir vorstellst (und wie die Inhalte angezeigt werden sollen).

[torstensson (Per Torstensson)]

Alles klar verstanden.

Für mich ist die Killer-Funktion Ihrer Komponente die Hinzufügung der Benachrichtigungsstatus-Glocke für jede Unterkategorie sowie die einfache, aber leistungsstarke Möglichkeit, die Spaltenbreite frei anzupassen. Für meinen Anwendungsfall wäre es hervorragend, wenn diese Funktionen auch mit aktivierten „Boxen mit hervorgehobenen Themen

[oca]

Ich hatte Schwierigkeiten, das zu tun I’ve had trouble, aber es ist schließlich gar nicht so schwer.

In einer Theme-Komponente ändern Sie Ihre Handlebars-Komponente so, dass sie diesen Code enthält:

{{#each categories as |c|}}
  
  ...einige Inhalte vor der Glocke...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...einige Inhalte nach der Glocke...

{{/each}}

Wenn Sie nicht wissen, wie das geht, ist Johanis Tutorial ein perfekter „erster Anlaufpunkt".

Und wenn Sie herausfinden, wie man das Gleiche mit Tags macht, sagen Sie mir bitte Bescheid! Ich habe keinen Weg gefunden, das zu tun.

[pmusaraj (Penar Musaraj)]

@oca Ich habe kürzlich eine Änderung im Core vorgenommen, die dazu führt, dass die SCSS-Kompilierung dieser Theme-Komponente fehlschlägt. Die Lösung ist recht einfach: Diese beiden Zeilen müssen aus der Stylesheet-Datei entfernt werden:

@import "common/foundation/variables";
@import "theme_variables";

(Die zweite Zeile verursacht einen SCSS-Kompilierungsfehler, da diese Datei nicht mehr existiert. Beide Zeilen sind jedoch überflüssig, da die Core- und Theme-Variablen nun vor der Kompilierung jeder SCSS-Datei injiziert werden.)

[oca]

Danke für die Erklärungen.

Das wurde entfernt.

[Fma965]

Gute Arbeit! Funktioniert das nicht auf Mobilgeräten?

CyanLabs Official Community

Mobil

Desktop

[Fma965]

Ich wünschte, ich könnte herausfinden, wie das auf Mobilgeräten funktioniert. Auf dem Desktop sieht es cool aus, aber wenn es auf Mobilgeräten nicht nutzbar ist, ist es irgendwie sinnlos. Ich bin sicher, es gibt eine einfache Lösung, aber ich bin mir nicht sicher, wie. Hat jemand Vorschläge?

[Fma965]

Entschuldigung für den Mehrfachpost
Ich habe es geschafft, Categories Layout Override so anzupassen, dass es nur für Mobilgeräte funktioniert
dann durch die Verwendung meiner modifizierten Version GitHub - cyanlabs/discourse-categories-layout-override
kann ich nun das Override als categories_boxes angeben

was dann die mobile Ansicht in die Ansicht zwingt, die für dieses Plugin erforderlich ist, um zu funktionieren
Tablet

Mobil

Offensichtlich keine ideale Lösung, aber sie funktioniert. Solange also niemand eine bessere Lösung hat, hier ist ein Workaround

[hoangphuctran93 (Hoàng Phúc Trần)]

Vielen Dank für die Anpassung der Theme-Komponente „Categories Layout Override“, aber können Sie mir bitte die Anpassung der Theme-Komponente „Enhanced category-box display component“ mitteilen? Ich habe Ihre Website besucht und schätze Ihre Verwendung von „background-color“ für die Klasse „category-logo“.

[hoangphuctran93 (Hoàng Phúc Trần)]

Vielen Dank für die kürzlichen Anpassungen, aber mit dem letzten Upgrade auf Version 3.2.0.beta 4-dev funktionierte die Theme-Komponente nicht. Ich hoffe auch, dass die Anpassung der mobilen Anzeige in den Kern von Discourse integriert wird. Denn ich möchte eine synchrone Erfahrung vom Desktop bis zum Mobilgerät.

[Fma965]

Leider keine Ahnung, wie man das beheben kann.

[hoangphuctran93 (Hoàng Phúc Trần)]

Kürzlich, als ich auf die neueste Version aktualisiert habe, funktioniert die Theme-Komponente „discourse theme category homepage“ auf Mobilgeräten nicht mehr und ich erhalte ständig die folgende Meldung

Dies ist meine Website https://businesslab.vn/categories

[david (David Taylor)]

Hallo @hoangphuctran93, ich habe deinen Beitrag in das relevante Thema der Themenkomponente verschoben (cc @oca)

[stephtara (Stephanie Booth)]

Oh, das klingt nach etwas, das für mich super nützlich wäre! Aktive Support-Community mit einer großen Vielfalt an Themen, aber Leute, die wahrscheinlich in einem kleinen Unterabschnitt des riesigen Gartens bleiben werden, digitale Kompetenz für viele eher gering. Schade, dass es anscheinend kaputt ist, werde es trotzdem ausprobieren. @oca nutzt du es bei dir noch aktiv?

[hellekin]

Seien Sie vorsichtig mit dem Tag #broken, er wird wirklich kaputt gehen.

@stephtara

people who will probably stay in a little sub-plot of the huge garden, digital literacy rather low for many

Ich würde in Erwägung ziehen, alle Kategorien standardmäßig stummzuschalten und Themen mit dem Tag #welcome vorzubereiten, um einen Überblick über die verfügbaren Kategorien zu geben. Wenn Sie eine Gruppe mit dem Beobachten einer Kategorie verknüpfen, können Sie ein fortschreitendes Erlebnis schaffen, bei dem die Leute Gruppen beitreten können, um Kategorien stummzuschalten/zu entdecken. Mit sehr wenigen Willkommens-Themen können Sie den Lesern einen Überblick über das Gebotene geben und ihnen die Wahl lassen, wo sie teilnehmen möchten. Die Dokumentation von Benachrichtigungen ist ebenfalls wichtig, um eine Informationsüberflutung zu vermeiden.

[stephtara (Stephanie Booth)]

@hellekin

Sei vorsichtig mit dem Tag #broken::tag, er wird fehlschlagen.

Danke für den Hinweis, sollte ich mich dann wohl besser fernhalten…

@hellekin

Die Dokumentation von Benachrichtigungen ist auch wichtig, um eine Informationsüberflutung zu vermeiden.

Auf jeden Fall!

[hellekin]

Sie könnten versuchen, die Theme-Komponente zu installieren… aber nicht auf Ihrem Produktionssystem