Wie man Tags nach N ausblendet und „+X mehr“ wie Kategorien anzeigt

Unterstützung
1

Hallo zusammen,

ich arbeite mit Themen, die manchmal viele Tags haben (viele davon werden maschinell aus einem ICS-Feed generiert). In der Discourse-Benutzeroberfläche werden Tags einfach weiter umgebrochen, was Themenlisten sehr hoch und schwerer zu überfliegen macht.

Ich würde gerne etwas Ähnliches tun, wie Kategorien in Themenlisten angezeigt werden:
• Die ersten paar (sagen wir 5) anzeigen
• Dann den Rest hinter einem „+X mehr“-Indikator einklappen

Was ich versucht habe:
• CSS kann Tags nach einer bestimmten Anzahl ausblenden und sogar ein statisches „…“-Zeichen hinzufügen, z. B.

/* Alle Tags nach dem 5. ausblenden */
.topic-list .discourse-tags a:nth-of-type(n+6) {
  display: none;
}

/* … nach dem 5. hinzufügen */
.topic-list .discourse-tags a:nth-of-type(5)::after {
  content: " …";
}

Das funktioniert zum Ausblenden, aber CSS kann nicht dynamisch zählen, wie viele ausgeblendet wurden, daher kann ich kein „+3 mehr“ erhalten.

Meine Frage:
• Gibt es eine eingebaute Möglichkeit, die Anzahl der Tags pro Themenanzeige zu begrenzen?
• Wenn nicht, gibt es einen Beispiel-Snippet (vielleicht von der Kategorie-Darstellung), das ich in eine Theme-Komponente anpassen könnte, um die „+X mehr“-Logik für Tags hinzuzufügen?

Vielen Dank im Voraus!

1 „Gefällt mir“
2

Konnten Sie das herausfinden? Es wird in der Kernversion von Discourse nicht unterstützt, aber Sie können es wahrscheinlich mit einer Theme-Komponente realisieren.

Es gibt eine Standardeinstellung max tags per topic (maximale Tags pro Thema), die standardmäßig auf 20 gesetzt ist. Ich halte das für eine sinnvolle Standardeinstellung, die nicht zu viel Umbruch verursacht. Ich gehe davon aus, dass es ohnehin selten vorkommt, dass man so viele Tags haben möchte.

3

:eyes:
20?

4

Ja, Sie haben Recht! Ich hatte es auf meiner Website auf 20 erhöht. Der Standardwert ist 5, was völlig vernünftig ist.

Ihr scharfes Auge erstaunt mich immer wieder.

1 „Gefällt mir“
5

Ja, mein Import-Skript hat die Erstellung von kurzen UID-Tags deaktiviert, da es den versteckten HTML-UID-Marker erstellt.

6

Dieses Thema wurde 14 Tage nach der letzten Antwort automatisch geschlossen. Neue Antworten sind nicht mehr möglich.