Componente Nav Button Highlighter - ahora funciona

Drew-ART · 18 Noviembre, 2025 13:14

Tuve que reconstruirlo como un componente puramente CSS ya que tuve problemas para estabilizar la sección de administración de la versión de Javascript, lo que significa que tienes que editar los selectores CSS directamente para que funcione en tu sitio.

El objetivo del componente es ayudarte a resaltar una ruta que deseas específicamente que tomen los usuarios.

Enlace: https://github.com/focallocal/nav-buttons-highlighter

Aquí está instalado y resaltando el complemento del tablero Kanban que la mayoría de los usuarios de mi plataforma no sabrían dónde encontrar después de ser miembros durante meses, especialmente aquellos que usan principalmente dispositivos móviles.

Escritorio:

Móvil:

Resaltador de Botones de Navegación (Nav Buttons Highlighter)

Un componente de tema de Discourse que resalta los botones de navegación para guiar a los usuarios hacia rutas o funciones específicas que deseas que sigan, y hace que el menú desplegable móvil sea más claro y visible.

Propósito

Este componente te ayuda a:

Guiar a los usuarios resaltando enlaces de navegación importantes (por ejemplo, tu tablero de tareas, documentación o categorías clave)
Mejorar la experiencia de usuario (UX) móvil haciendo que el botón de navegación desplegable destaque
Crear jerarquía visual en tu barra de navegación

Características

Estilo de botón limpio con colores sólidos y efectos de pasar el ratón (hover)
Configurable por el administrador: no se requiere edición de CSS
Soporte para hasta 3 botones de navegación personalizados
Adaptable a dispositivos móviles: incluye resaltado del botón de menú desplegable móvil
Preconfigurado para el complemento Kanban de Discourse por defecto
Soporte para selector de color para una fácil personalización

Configuración Predeterminada

Por defecto, este componente está configurado para resaltar el complemento Discourse Kanban (enlace) en AZUL (#4285F4).

Instalación

En la consola de administración de Discourse, ve a Personalizar → Temas → Componentes y haz clic en Instalar

Copia el enlace del repositorio Git y pégalo:

https://github.com/focallocal/nav-buttons-highlighter

Una vez instalado, añade el componente a tu tema activo.

Cómo Personalizar

Panel de Configuración del Administrador

Toda la configuración se realiza a través de sencillos ajustes de administrador: ¡no se requiere edición de CSS!

Para configurar:

Ve a Administrador → Personalizar → Temas
Haz clic en tu tema activo
Busca Nav Buttons Highlighter en la sección Componentes Incluidos
Haz clic en Configuración

Configuraciones Disponibles:

Botón 1 - Kanban (Predeterminado):

Resaltar Kanban: Activar/desactivar (predeterminado: activado)
Color Kanban: Selector de color (predeterminado: azul #4285F4)
Selector Kanban: Selector CSS (predeterminado: a.kanban-nav)

Botón 2 - Personalizado:

Resaltar Botón 2: Habilitar el segundo botón (predeterminado: desactivado)
Color Botón 2: Selector de color (predeterminado: verde #4CAF50)
Selector Botón 2: Introduce tu selector CSS (ejemplo: a[href='/page'])

Botón 3 - Personalizado:

Resaltar Botón 3: Habilitar el tercer botón (predeterminado: desactivado)
Color Botón 3: Selector de color (predeterminado: naranja #FF5722)
Selector Botón 3: Introduce tu selector CSS

Móvil:

Resaltar Desplegable Móvil: Activar/desactivar el desplegable “Más Reciente” móvil (predeterminado: activado)
Color Desplegable Móvil: Selector de color (predeterminado: azul #4285F4)

Encontrar Selectores CSS:

Para resaltar diferentes enlaces de navegación, necesitas su selector CSS:

Abre tu foro en un navegador
Haz clic derecho en el enlace que deseas resaltar
Selecciona “Inspeccionar Elemento”
Busca la etiqueta <a> y anota:
- Nombres de clase: class="kanban-nav" → usa: a.kanban-nav
- Valor de Href: href="/c/support" → usa: a[href="/c/support"]

Ejemplos Comunes:

Complemento Kanban: a.kanban-nav
Categoría de Soporte: a[href="/c/support"]
Etiqueta de Documentación: a[href="/tags/documentation"]
Página personalizada: a[href="/my-page"]
Segundo botón de navegación: #navigation-bar > li:nth-child(2) > a

Selección de Color:

Usa códigos de color hexadecimales (ejemplo: #4285F4 para azul). El componente genera automáticamente:

Tono más claro para la parte superior del degradado
Tono más oscuro para la parte inferior/sombra
Colores de estado al pasar el ratón y activo

Colores Populares:

Azul: #4285F4 (predeterminado)
Verde: #4CAF50
Rojo: #F44336
Naranja: #FF9800
Púrpura: #9C27B0

Versión CSS-Solo Estable

Si prefieres la edición directa de CSS, la versión anterior (2.0.1) está disponible:

Instalar la versión solo CSS:

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

Consulta el README de esa rama para obtener instrucciones de edición de CSS.

Desarrollo

Este repositorio contiene:

common/common.scss — Todo el estilo de los botones y guía de personalización detallada
assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — Inicializador mínimo (requerido para Discourse)
about.json — Metadatos del componente

Solución de Problemas

P: Los cambios no aparecen
R: Después de editar, haz clic en “Guardar” y actualiza forzadamente la página de tu foro (Ctrl+F5 o Cmd+Shift+R).

P: Quiero resaltar varios botones
R: Copia todo el bloque CSS del botón y pégalo debajo de la regla CSS existente, luego cambia el selector y opcionalmente los colores.

Licencia

MIT — Movimiento de Felicidad Pública

merefield · 18 Noviembre, 2025 13:25

¿qué pasa con todo ese markdown extraño?

¿lo has marcado para moverlo a Theme component?

Drew-ART · 18 Noviembre, 2025 13:33

Gracias. Lo copié y pegué directamente del archivo Léame de Github. Lo he estado actualizando desde que hice clic en publicar.

¿Lo has marcado para moverlo a Componente temático?

No, quería recibir comentarios y asegurarme de que todo estuviera bien primero.

Drew-ART · 18 Noviembre, 2025 13:47

Tuve un problema extraño en el que Discourse almacenó en caché un archivo, creo que fue el archivo about.json, y cada edición que hice en él no se actualizó ni se reinstaló. Me llevó mucho tiempo averiguar por qué no podía hacer que ningún cambio se compilara en absoluto.

¿Hay una mejor manera de probar un componente que no sea en un sitio en vivo?

NateDhaliwal · 19 Noviembre, 2025 02:44

@Drew-ART ¿Has mirado Objects type for theme setting? Quizás entonces se pueda usar para añadir muchas reglas CSS, quizás usando anidamiento para añadir cosas como el color de fondo y el relleno a cada regla. SCSS tiene un bucle each que podrías ser capaz de usar.

¿Quizás esto pueda ayudar?

github.com/Arkshine/discourse-banner-featured-links

scss/functions.scss

ce190f66a


      
            @return $result;
          }
          
          /**
           * Parses a string of ruby-like key-value pairs into a map.
           * Format: [{"key1"=>"value1", "key2"=>"value2"}, {"key1"=>"value1","key2"=>"value2"}]
           *
           * @param {String} $string - The string of key-value pairs.
           * @return {Map} - The map of key-value pairs.
           */
          @function parseObjectSettings($string) {
            $string: str-slice($string, 2, -2);
            $items: str-split($string, "}, {");
          
            $parsedItems: ();
          
            @each $item in $items {
              $item: str-replace($item, "{", "");
              $item: str-replace($item, "}", "");
              $item: str-trim($item);

Drew-ART · 19 Noviembre, 2025 12:47

Gracias @NateDhaliwal. Ese fue mi enfoque original, pero me encontré con el error 500 anterior y no pude superarlo durante mucho tiempo, así que volví a un enfoque solo con CSS.

Creo que podría volver a ese intento abandonado y ver si carga ahora que creo tener controlado el error 500. Lo intentaré.

Drew-ART · 19 Noviembre, 2025 13:28

No, no puedo hacer que eso funcione en absoluto.

Lo configuré con la configuración de administrador y recurriendo a CSS si no se cargan correctamente, pero algo que no puedo atrapar impide que funcione por completo.

Drew-ART · 20 Noviembre, 2025 00:36

De acuerdo, logré que la sección de administración funcionara usando configuraciones simples de texto/booleano.

Me resultó difícil hacer funcionar el tipo de Objeto con el análisis SCSS y me gustaría saber si alguien puede explicar por qué la rama anterior no funcionó, pero cualquiera que quiera usarlo ahora puede personalizar su configuración en la sección de administración del componente.

Drew-ART · 20 Noviembre, 2025 20:54

Ok, creo que encontré el problema de SCSS.

Encontré esto en el componente de carrusel de @NateDhaliwal:
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

Configuración (settings.yml):


pagination_button_color:
  type: string
  default: ""

Para cualquiera que esté luchando:

inyectar en las propiedades personalizadas de CSS usando la sintaxis #{$var}
Luego usar esas variables CSS en otros lugares para que la biblioteca Swiper las lea

Esto funciona porque:

Las variables de configuración se pueden interpolar con #{}
Las propiedades personalizadas de CSS aceptan valores de cadena
El estilo real utiliza las variables CSS, no las funciones SCSS

Actualizaré este complemento con la versión más moderna pronto.

Tema		Respuestas	Vistas
First component attempt. I've had a go at creating a Nav Button Highlighter. Not working as yet Dev	1	45	11 Noviembre 2025
Highlighter Composer Button Theme component	22	1301	5 Septiembre 2023
Fast Highlight Dev	49	2304	30 Septiembre 2023
MD Composer extras Theme component	70	8697	8 Julio 2025
Discourse Button Styles Theme component	40	10498	18 Septiembre 2025