Este componente de tema te permite resaltar una categoría (o categorías) en tu Discourse. Puedes:
- Asignar un estilo de fondo especial a categorías específicas
- Agregar un enlace a la categoría en el encabezado con el mismo estilo especial
Un caso de uso típico es para una categoría con contenido “Premium”.
Cómo instalar
Obtener el códigoNavegación por categorías y etiqueta del encabezado
|Lista de temas | Menú del sitio |
|--------- | -----\n|
Página de categorías
Configuración
El componente de tema Category Highlighter tiene una configuración principal: “resaltar categorías”. Encontrarás esta configuración en el panel de configuración del componente de tema Category Highlighter.
Cada categoría que quieras resaltar tiene su propio elemento de lista en esta configuración. El formato de cada elemento es:
category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link
Un ejemplo de este formato es:
premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star: Premium~:star:
Hay seis valores posibles, cada uno separado por ~ (una “tilde”). Veamos cada valor por separado.
Slug de la categoría
Este es el “slug” de la categoría que deseas resaltar. Puedes encontrarlo en la configuración de tu categoría.
Si necesitas resaltar una subcategoría, debes usar el slug de la categoría “Padre”, seguido del slug de la subcategoría separado por una /.
Por ejemplo, si hubiera una subcategoría de premium con el slug videos que quisiera resaltar, usaría:
premium/videos
Permisos
Ten en cuenta que solo los usuarios que tengan permisos de lectura para la categoría resaltada verán los resaltados, incluida la etiqueta del encabezado. Puedes cambiar los permisos de tu categoría en la configuración de “Seguridad” de la categoría.
Fondo
Este es un valor que se asignará a la propiedad CSS background del distintivo de la categoría. Puedes usar cualquier entrada aquí que esa propiedad admita.
background - CSS: Cascading Style Sheets | MDN
La propiedad CSS abreviada background establece todas las propiedades de estilo de fondo a la vez, como color, imagen, origen y tamaño, o método de repetición.
Por ejemplo linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).
Color del texto
Este es un valor que se asignará a la propiedad CSS color del distintivo de la categoría. Esto afecta el color del texto. Puedes usar cualquier entrada aquí que esa propiedad admita.
color - CSS: Cascading Style Sheets | MDN
La propiedad CSS color establece el valor del color de primer plano del texto de un elemento y sus decoraciones de texto, y establece el valor currentcolor. currentcolor puede usarse como un valor indirecto en otras propiedades y es el valor predeterminado para otras propiedades de color, como…
En nuestro caso de ejemplo, esto es #88562e.
Etiqueta del encabezado
Este valor cumple dos funciones. Determina:
- si la categoría resaltada obtendrá una etiqueta en el encabezado; y
- el contenido de esa etiqueta.
Si no deseas una etiqueta en el encabezado, no incluyas este valor en absoluto.
Este valor admite texto, entidades HTML y emojis.
El valor de la etiqueta del encabezado aquí es: :star: Premium. Esto es:
- El shortcode del emoji de estrella:
:star: - Dos entidades HTML de espacio no separable (cada una agrega un espacio en blanco):
- Nuestro texto de etiqueta:
Premium
Puedes encontrar la lista completa de shortcodes de emojis aquí y la lista completa de entidades HTML aquí.
Etiqueta del encabezado móvil
Este valor también cumple dos funciones. Determina:
- si la categoría resaltada obtendrá una etiqueta de encabezado móvil; y
- el contenido de la etiqueta del encabezado móvil.
El uso y el formato son los mismos que los de la etiqueta del encabezado. Una cosa a tener en cuenta aquí es que tienes menos espacio en dispositivos móviles, por lo que podría ser prudente usar solo un emoji o una palabra corta para ahorrar espacio.
Categoría padre
Puedes crear un menú desplegable en el encabezado estableciendo el “padre” de un elemento. Inserta un slug de categoría como el sexto elemento y el elemento relevante se convertirá en un elemento de submenú de esa categoría en el encabezado. Al igual que con el primer elemento, asegúrate de usar el slug de la categoría aquí, que puedes recuperar del modal de configuración de la categoría.
Enlace alternativo
Por defecto, cada elemento de categoría enlaza a la categoría a la que corresponde. Puedes cambiar el enlace agregando una URL como el sexto elemento en el bloque de configuración.
preeemium
