Cómo ocultar etiquetas después de N y mostrar “+X más” como las categorías

Hola a todos,

Estoy trabajando con temas que a veces reciben muchas etiquetas (muchas de ellas generadas automáticamente a partir de una fuente ICS). En la interfaz de Discourse, las etiquetas simplemente se van apilando, lo que hace que las listas de temas sean muy largas y más difíciles de hojear.

Me gustaría hacer algo similar a cómo se muestran las categorías en las listas de temas:
• Mostrar las primeras (digamos 5)
• Luego colapsar el resto detrás de un indicador “+X más”

Lo que he intentado:
• CSS puede ocultar etiquetas después de un cierto número, e incluso añadir un marcador estático “…”, por ejemplo:

/* Ocultar todas las etiquetas después de la 5ª */
.topic-list .discourse-tags a:nth-of-type(n+6) {
  display: none;
}

/* Añadir … después de la 5ª */
.topic-list .discourse-tags a:nth-of-type(5)::after {
  content: " …";
}

Eso funciona para ocultar, pero CSS no puede contar dinámicamente cuántas se ocultaron, por lo que no puedo obtener “+3 más”.

Mi pregunta:
• ¿Hay alguna forma integrada de limitar las etiquetas por visualización de tema?
• Si no es así, ¿hay algún fragmento de ejemplo (quizás de la representación de categorías) que pueda adaptar en un componente de tema para añadir la lógica “+X más” para las etiquetas?

¡Gracias de antemano!

1 me gusta

¿Pudiste resolver esto? No es compatible en el núcleo de Discourse, aunque probablemente puedas hacerlo con un componente de tema.

Hay una configuración predeterminada de etiquetas máximas por tema que tiene un valor predeterminado de 20, lo que creo que es un valor predeterminado sensato y no conduce a demasiados saltos de línea. Supongo que es raro querer tantas etiquetas de todos modos.

:eyes:
¿20?

¡Sí, tienes razón! Lo había aumentado a 20 en mi sitio. El valor predeterminado es 5, lo cual es perfectamente sensato.

Tu ojo de águila nunca deja de asombrarme.

1 me gusta

sí, mi script de importación en realidad tiene deshabilitada la creación de etiquetas UID acortadas, ya que crea el marcador UID oculto de HTML

Este tema se cerró automáticamente 14 días después de la última respuesta. Ya no se permiten nuevas respuestas.