Barra lateral de etiquetas populares de Discourse

Este componente del tema muestra las etiquetas más populares de una categoría en una barra lateral fija en pantallas más anchas que 767 px (la mayoría de las tabletas y dispositivos de escritorio).

:warning: Debes habilitar la configuración «Mostrar filtro por etiqueta» en tu sitio para que este componente del tema funcione.

¿Qué puedo hacer con este componente del tema?

  • Mostrar de 3 a 30 etiquetas populares en una barra lateral para cada categoría.

  • Configurar el lado de la barra lateral a izquierda o derecha.

  • Evitar que la barra lateral aparezca en ciertas categorías.

  • Cambiar el texto del encabezado «Etiquetas populares».

CSS personalizado

Cada barra lateral está envuelta en una clase que contiene el nombre de la categoría; por ejemplo, para la categoría UX sería .ux-sidebar. Puedes usar estas clases para dar estilo a barras laterales individuales.

La etiqueta HTML en las páginas con barras laterales también tiene una clase añadida, por lo que puedes usar html.custom-sidebar para aplicar estilos en todas las páginas que tengan una barra lateral.

Instalar este componente del tema

43 Me gusta

this would make an incredibly powerful navigation tool if it showed the most common in each category and tag-page and it was positioned in a banner, or other item at the top of the page.

3 Me gusta

Very nice work.

I can see the sidebar only on the page of first category in the list of categories.

How do I enable it for all categories?

1 me gusta

The tags sidebar that appear on the parent category include both parent category tags and child category tags. To enable it for all categories and subcategories you need to change the code here discourse-popular-tag-sidebar/desktop/header.html at master · awesomerobot/discourse-popular-tag-sidebar · GitHub.

2 Me gusta

Right now, it shows only for the first category on categories page

So, which part of code i need to edit and how can i get it for all page.

Please help with details. Sorry and thanks

Can you help with that change? I do not understand the coding that much. Please help

It appears only on first category in category list. Not in any other one. Please help

2 Me gusta

¿Hay alguna manera de mostrarlo encima de la lista de temas?

En caso de que no lo supieras, ya existe un menú desplegable de etiquetas opcional en Discourse estándar (mostrado en la imagen de arriba) que aparece encima de la lista de temas.

image

3 Me gusta

Lo entiendo, pero para mi propósito quiero mostrar una lista o algo así como una nube de etiquetas.

3 Me gusta

Sí, yo también tengo ese problema. ¿Existe una solución?

Veo que ahora funciona en las páginas de categorías. Pero ¿hay alguna forma de que funcione también en el hilo más reciente?

¿Podrías describir un poco más este problema? ¿La barra lateral solo aparece para una categoría y no para las demás?

¿Todas las categorías que estás intentando tienen temas con más de 3 etiquetas? La barra lateral no se mostrará si hay menos de 3 etiquetas dentro de una categoría específica.

Sí, creo que puedo agregar soporte para otras páginas.

1 me gusta

Solo una pregunta… cuando hago clic en Etiquetas desde la barra lateral de Etiquetas, la URL es https://www.example.id/tags/c/sub-categoriy/Tags-name

No hay ningún problema cuando hago clic directamente (en la misma página), pero cuando hago clic derecho y abro en una nueva pestaña, aparece el mensaje “¡Ups! Esa página no existe o es privada.”

¿Por qué el formato de la URL no es como el de las etiquetas normales, https://www.example.id/tags/tag-name?

Otra pregunta: ¿cómo agrego espacio entre el texto (etiqueta)? No 1 ni 1,5 (no estoy seguro), sino 2.

Muchas gracias.

1 me gusta

He añadido una función para mostrar opcionalmente la barra lateral de etiquetas en las páginas del menú superior (últimos, mejores, nuevos, etc.). Está desactivada de forma predeterminada; puedes activarla en la configuración del componente del tema.

Fue mi error; no consideré las subcategorías y reestructuré la URL para que se ajustara. Ya está solucionado.

Esa URL muestra todas las etiquetas de todas las categorías. Cuando estás dentro de una categoría y haces clic en una etiqueta de la barra lateral, quería que se mostrara esa etiqueta en el contexto de la categoría actual.

No estoy seguro de qué quieres decir exactamente. ¿Podrías darme un ejemplo concreto?

1 me gusta

¡Guau… ahora funciona cuando lo abro en una nueva pestaña! Muchas gracias…

Perdona por mi mal inglés :grinning:

“Añadir espacio” significa cambiar el interlineado (como en MS Word) a 2, que actualmente parece ser 1 o 1.5, de modo que haya más espacio entre las etiquetas.

También, ¿puedo cambiar el color del texto de las etiquetas? De azul a gris.

Otra pregunta: ¿se pueden ver siempre las etiquetas populares?

Cuando hago scroll hacia abajo, las palabras “Etiquetas populares” no son visibles, solo se ve la lista de etiquetas.

image

Una vez más… muchísimas gracias por tu ayuda.

Ah, vale. Puedes añadir algo de CSS a tu tema (admin > personalizar > temas) así:

.tag-sidebar a:nth-of-type(2) {
    margin-top: 5px;
}

De forma similar para el color del texto:

.tag-sidebar a {
    color: red;
}

Esto probablemente sea un problema con tu tema actual. Puedes ajustar la posición superior de la barra lateral así:

.topic-list.with-sidebar > .tag-sidebar {
  top: 120px;
}

Todos estos son cambios generales de CSS… si quieres hacer más cambios de estilo como estos, te sugiero seguir algunos tutoriales de CSS. CSS styling basics - Learn web development | MDN es una buena opción gratuita.

5 Me gusta

Hola, tengo problemas en la línea 31: discourse-popular-tag-sidebar/desktop/header.html at master · awesomerobot/discourse-popular-tag-sidebar · GitHub

¿Puedes ayudarme a revisar este error?

¿Cuál es la razón del límite de 30 etiquetas?

¡Hola Kris!
Me pregunto si la opción number_of_tags se perdió con este commit. :thinking:

2 Me gusta

Sería genial si el número máximo de etiquetas se aumentara a 100 y se mostrara en una nube de texto de burbujas con altura ajustable de forma responsiva, ordenada alfabéticamente. Es decir, cuanto más popular sea una etiqueta, mayor será su tamaño de fuente. Las “100 etiquetas principales”.

También sería bueno que se posicionara horizontalmente encima de las listas de categorías en dispositivos móviles. Esto es algo que realmente necesito para móviles. :star_struck:

Hola,

¿Cómo puedo mostrar la lista de etiquetas populares debajo del encabezado? Por favor, dame sugerencias.

Gracias

1 me gusta

Desafortunadamente, este componente entra en conflicto con Discourse Tag Sidebars. Cuando habilito ambos, todas las etiquetas se agrupan en una sola línea, así:

Y las barras laterales de etiquetas no aparecen en absoluto.

Esto es desafortunado, porque deberían ser complementarios: la lista de etiquetas para la vista “todas las etiquetas” (y posiblemente también “sin etiquetas”), y la barra lateral para etiquetas específicas. De hecho, ¿quizás podrían combinarse en un solo componente?

1 me gusta