Kann dies mit CSS umgesetzt werden? Kategorien auf der Kategorien-Seite gruppieren

Entwickler
1

Was ich gerne tun möchte (da ich weiß, dass es keine eingebaute Einstellung oder Funktionsgruppe dafür gibt), ist die Verwendung von CSS, um Kategorien auf der Startseite zu gruppieren.

Ich möchte keine Kategorien verschachteln, sondern nur einige zusammenfassen und ihnen eventuell eine Überschrift geben. Ich weiß, dass sich einzelne Kategorien durch Abstand (Padding) „trennen" lassen und dass jede Kategorie über ihre ID oder ihren Namen gezielt angesprochen werden kann. Mein Ziel ist es also, etwas Ähnliches wie in diesem Bild darzustellen:

image
image480×480 81.3 KB

Mir ist klar, dass der Einfachheit halber die Kategorien in ihrer sortierten Reihenfolge stehen müssten und jede Kategorie über die category_id angesprochen werden müsste. Ich denke jedoch, dass es vielleicht CSS gibt, das nach einer Kategorie oder vor einer anderen Abstand erzeugt.

Die große Frage ist: Gibt es die Möglichkeit, im Abstand etwas Text einzufügen, um eine Überschrift zu erstellen?

Der Zweck davon ist es, zunächst die lange Liste der Kategorienansicht aufzulockern und zu trennen, zum Beispiel:

  • Kategorien 1–2 unter der Überschrift „Mitarbeiter"
  • Kategorien 3–4 unter „Community-Ressourcen"
  • Kategorien 5, 8, 11, 12, 13 unter „Allgemeine Diskussionskategorien"

Ich möchte daraus keine Unterkategorien machen; mir gefällt die Struktur und das Kategoriensystem genau so, wie es ist. Alles, was ich erreichen möchte, ist eine leicht abweichende Darstellung der Kategorien auf der Kategorienansichtsseite. Idealerweise handelt es sich dabei nur um ein visuelles Layout, ohne dass sich etwas an der Bibliotheksstruktur der Plattform ändert.

Haben Sie eine Idee, wie man das umsetzen kann?

Das wäre für das Layout meiner Website zur Zusammenarbeit ein echter Gamechanger.

Sam, codinghorror, glauben Sie, es gäbe eine Möglichkeit, im Menü zur Neuordnung der Kategorien einen Schritt zur Gruppierung nativ einzuführen, etwa als Option (Gruppierung ein/aus)? Man könnte die Kategorien einfach innerhalb der Hauptgruppierung auf der Hauptseite ordnen, und sie würden automatisch getrennt werden. Könnte das im Core, in einem Plugin oder als Theme-Komponente umgesetzt werden?

3 „Gefällt mir“
2

anyone? buehler.

feedback appreciated

3

This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.

4 „Gefällt mir“
4

Etwas spät :smile:, aber vielleicht braucht es jemand anderes. Ich muss erwähnen, dass:

  • Nicht der gesamte CSS-Code erforderlich ist, insbesondere die Rahmen und Hintergrundfarben für Tabellenzeilen. Passen Sie sie daher gerne nach Belieben an.
  • Ich das Layout von einer regulären Tabelle in Flex geändert habe, da man bei Tabellenzeilen keine negativen Ränder verwenden kann und es andere Layout-Probleme gibt. Außerdem ist es flexibler :smile:
  • Ersetzen Sie Category Group 1 und Category Group 2 durch die gewünschten Namen Ihrer Kategoriergruppen.
  • In meinem Beispiel habe ich die Kategorien-IDs 2 und 4 verwendet. Öffnen Sie also die Chrome-Entwicklertools, um zu inspizieren (siehe Bild unten), finden Sie die richtige Kategorien-ID und ersetzen Sie [data-category-id="2"] und [data-category-id="4"] in meinem Beispiel durch Ihre ID(s).

image
image829×290 17.9 KB

Fügen Sie dies im Reiter „Common“ ein:

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Fügen Sie dies im Reiter „Desktop“ ein:

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

Und dies im Reiter „Mobile“:

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

So sieht es auf Desktop- und Mobilgeräten aus:

desktop-category-group
desktop-category-group659×837 73.3 KB
mobile-category-group
mobile-category-group453×1061 52.3 KB

10 „Gefällt mir“
5

Hallo Cos,

sehr interessant, vielen Dank für das Teilen. Im selben Geiste (nämlich einer besseren Präsentation) versuchen wir, vor dem Diskurs eine WordPress-Seite mit einer spezifischen Darstellung zu platzieren. Wir möchten auf diese Seite beispielsweise Kategorienamen senden – etwa diejenigen, die eine Antwort erhalten haben, die vom Benutzer ausgewählt wurden, oder eine bestimmte Kategorie. Meinst du, das ist möglich, und wenn ja, wie?

1 „Gefällt mir“
6

Ich befürchte, dass Sie das allein mit CSS nicht erreichen können. Vielleicht ist das WordPress Discourse-Plugin das, was Sie benötigen. Zusätzlich dazu sind die wp-discourse-Shortcodes ebenfalls ein Muss.
Wir verwenden es bereits auf unserer WordPress-Website, und es funktioniert bisher hervorragend. So sieht das Plugin im Seitenleisten-Widget aus:

image
image454×664 52.5 KB

2 „Gefällt mir“
7

@sam, die Antwort von @cosdesign funktioniert. Gibt es eine Möglichkeit, dies in die Kernmenüs zu integrieren, sodass Benutzer es standardmäßig deaktiviert lassen können, aber dann die Überschriften im Admin-Bereich für Gruppentitel festlegen und auf der Attributseite jeder Kategorie aus einem Dropdown-Menü der im Admin-Bereich aktivierten Sektionsüberschriften auswählen können, damit die Kategorie einfach unter der Überschrift fällt?

Dies sollte nicht allzu schwierig sein, der Plattform hinzuzufügen, und würde Installationen mit vielen Benutzerrollen und Gruppen sowie vielen Kategorien wirklich verbessern.

1 „Gefällt mir“
9

Diese Art von Gruppierung wird jetzt im Discourse-Kern unterstützt:

Wählen Sie „Unterkategorien mit hervorgehobenen Themen“ als „Desktop-Kategorie-Seitenstil“:

Screenshot 2022-03-07 um 10.25.34
Screenshot 2022-03-07 um 10.25.341346×654 53.9 KB

Und dann wird Ihre Kategorieseite ungefähr so aussehen:

Bild
Bild2440×1758 306 KB

5 „Gefällt mir“
10

Ist es mit RTL möglich? Ich habe es versucht, aber ich bin gescheitert :broken_heart:

11

Das ergibt Sinn. Die Kern-Discourse-Stylesheets werden hier gespiegelt, um eine RTL-Version zu erstellen: discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. Ich glaube nicht, dass CSS-Dateien, die von Themes hinzugefügt werden, kompiliert werden, um eine RTL-Version zu erstellen. Wenn das stimmt, würde das die Probleme erklären, auf die Sie bei Themes gestoßen sind, wenn ein RTL-Layout verwendet wird.

Sie könnten dies bestätigen, indem Sie einige CSS-Regeln mit einer Richtung zu Ihrem Website-Theme hinzufügen, dann die Website mit einem RTL-Locale besuchen und sehen, ob die Richtung gespiegelt wurde. Ich glaube nicht, dass sie gespiegelt wird.

Wenn Sie beispielsweise dies zu Ihrem Theme hinzufügen:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: right;
}

Ich glaube nicht, dass es in Folgendes umgewandelt wird:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: left;
}
12

Ich stimme Ihnen zu, ich bin immer noch verwirrt, den obigen Code zu verwenden :confused:

Irgendwelche Vorschläge?

13

Kennen Sie ein Beispiel für ein Theme, das nicht mit RTL funktioniert? Wenn ja, posten Sie hier einen Link zum Theme und ich werde meine Theorie testen und erklären, was schief läuft, nachdem ich es getestet habe.

Bearbeiten: Hier ist eine Erklärung des Problems:

Für die CSS-Dateien im Haupt-Discourse-Codebase wird das RTL-CSS erstellt, indem die meisten CSS-Regeln, die von der Ausrichtung des Layouts der Website abhängen, “gespiegelt” werden. Zum Beispiel wird padding-left zu padding-right gespiegelt. Dies geschieht mit dem RTLcss-Gem: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

Das Problem ist, dass Discourse-Themes ihre CSS-Regeln nicht spiegeln. Das bedeutet, dass, wenn ein Theme CSS-Regeln hat, die eine Richtung angeben, die Richtung dieselbe ist, wenn eine RTL-Sprache verwendet wird, wie wenn eine LTR-Sprache verwendet wird. Hier ist ein kleines Beispiel dafür:

Wenn das Theme mit einer RTL-Oberfläche verwendet wird, wird padding-left: 8px; nicht zu padding-right: 8px; gespiegelt. Dies verursacht ein kleines Problem mit der Ausrichtung. Ich bin sicher, dass es Beispiele für größere Probleme gibt, wenn Themes mit einer RTL-Sprache verwendet werden.

Dasselbe gilt für jedes CSS, das Sie im Theme-Editor zu einem Standard-Discourse-Theme hinzufügen. Hier ist ein Beispiel, das den Code aus diesem Thema verwendet: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Hier ist eine Regel aus diesem CSS, die eine Richtung festlegt:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // this needs to be changed
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Mit einem RTL-Locale ist dies das Problem:

image
image863×676 57.5 KB

Wenn diese Regel in einer Kern-Discourse-CSS-Datei wäre, würde left: 0; automatisch in right: 0; konvertiert werden, wenn eine RTL-Sprache ausgewählt wird. Da das CSS zu einem Theme hinzugefügt wird, müssen Sie es manuell wie folgt bearbeiten:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // changed to the proper position for RTL layouts
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse fügt dem html-Tag eine rtl-Klasse hinzu, wenn ein RTL-Layout verwendet wird. Theme-Entwickler könnten diese Klasse verwenden, um ihre Themes sowohl für LTR- als auch für RTL-Layouts funktionsfähig zu machen. Dies funktioniert, und ich denke, es ist richtig, aber möglicherweise muss die Deklaration left: auto nicht vorhanden sein.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Fix positioning for rtl layouts */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Ich bin mir nicht sicher, ob Entwickler diesen Ansatz mit ihren Themes verfolgen sollten. Es ist zeitaufwendig und könnte zu Fehlern und Wartungsproblemen führen. Vielleicht könnte Discourse einige Themes kompilieren, die eine RTL-Version anbieten könnten. Es könnte sich lohnen, diesen Ansatz mit einigen davon zu testen:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Das sollte eine kurze Antwort sein :slight_smile: Wenn das, was ich geschrieben habe, korrekt ist und in einem anderen Thema noch nicht behandelt wurde, sollte es vielleicht in ein neues Thema verschoben werden.

14

Diese Theme component tun vielleicht, was Sie wollen. Oder sie sind eine gute Grundlage, um sich den Code anzusehen und Ideen zu sammeln.

“Modern Category + Group boxes”, wie sie im Air Theme verwendet werden, funktionieren gut.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB