Organizador de categorías de la barra lateral

[Drew-ART (Drew)]

He creado un organizador de barra lateral. Hubo muchas discusiones al respecto hace un tiempo y otros sintieron que no era necesario, pero yo siempre sentí que mis usuarios no son muy técnicos o no saben cómo funciona el foro lo suficientemente bien al principio, así que he creado este organizador desplegable para ayudar.

Instalar este componente de tema

Hay un pequeño interruptor en la parte superior para que los usuarios puedan cambiar entre el predeterminado y este, y elegir el que prefieran. Lo puse allí porque creo que muchos usuarios experimentados querrán personalizar su barra lateral de navegación, pero la mayoría de los usuarios nuevos no.

Organizador de Categorías de la Barra Lateral

Un componente de tema de Discourse que organiza las categorías de la barra lateral en secciones personalizables con código de color y funciones avanzadas.

Características

• 10 Secciones Desplegables: Agrupa categorías en hasta 10 secciones personalizadas
• Personalización de Color: Establece colores de fondo y de texto para el encabezado de cada sección
• Fondos Degradados: Efecto de desvanecimiento degradado opcional como en las fotos
• Insignias de Categoría: Las insignias de color predeterminadas de Discourse junto a las categorías se pueden activar y desactivar
• Soporte para Subcategorías: Interruptor por sección para mostrar/ocultar subcategorías (visualización con sangría)
• Ocultar Categorías: Oculta categorías específicas de todas las vistas
• Interruptor Bidireccional: Cambia entre las secciones personalizadas y la vista predeterminada de Discourse (el botón de alternancia aparece en ambas vistas)
• Estado Persistente: Recuerda qué secciones están abiertas/cerradas y la preferencia de vista del usuario
• Conciencia de Permisos: Solo muestra las categorías a las que los usuarios tienen acceso
• Categorías Sin Agrupar: Muestra automáticamente cualquier categoría sin categorizar en una sección separada
• Compatible con Móviles: Funciona en todos los tamaños de dispositivo

Instalación

1. Ve a Administrador → Personalizar → Temas en tu instancia de Discourse
2. Haz clic en Instalar → Desde un repositorio de Git
3. Introduce: https://github.com/focallocal/sidebar-categories-organizer
4. Haz clic en Instalar
5. Añade el componente a tu tema activo

Configuración

Ajustes Globales

• Habilitar Organizador de Barra Lateral: Activa/desactiva la vista personalizada
• Mostrar Botón de Alternancia: Muestra el icono para cambiar entre vistas (aparece en los encabezados de las vistas personalizada y predeterminada)
• Mostrar Insignias de Categoría: Muestra cuadrados de colores junto a los nombres de las categorías
• Usar Desvanecimiento Degradado: Habilita el efecto de fondo degradado en los encabezados de sección (50% color sólido, 50% desvanecimiento a transparente)
• Categorías a Ocultar: Etiquetas de categoría separadas por comas para ocultar de todas las vistas (ej: staff,private)
• Vista Predeterminada: Elige qué vista se carga por defecto (personalizada o predeterminada)

Ajustes de Sección (1-10)

Cada sección tiene:

• Habilitado: Activa/desactiva la sección
• Título: Texto del encabezado de la sección
• Color de Fondo: Selector de color para el fondo del encabezado de la sección
• Color de Texto: Selector de color para el texto del encabezado
• Categorías: Etiquetas de categoría separadas por comas (ej: general,support,feedback)
• Mostrar Subcategorías: Alternar para mostrar/ocultar subcategorías para esta sección
• Abierto por Defecto: Si la sección comienza expandida o contraída

Encontrar Etiquetas de Categoría

Las etiquetas de categoría están en la URL:

• tudominio.com/c/general/5 → la etiqueta es general
• tudominio.com/c/feature-requests/12 → la etiqueta es feature-requests

Uso

Una vez instalado y configurado:

1. Vista Personalizada: Las categorías se agrupan en tus secciones configuradas con encabezados de colores
2. Expandir/Contraer: Haz clic en los encabezados de las secciones para alternar la visibilidad del contenido
3. Alternar Vistas: Haz clic en el icono en el encabezado para cambiar entre las vistas personalizada y predeterminada
   • En la vista personalizada: El botón de alternancia aparece en el encabezado de la vista personalizada
   • En la vista predeterminada: El botón de alternancia aparece en el encabezado “Categorías” predeterminado
4. Subcategorías: Cuando se habilita por sección, las subcategorías aparecen con sangría debajo de las categorías principales
5. Insignias de Categoría: Pequeños cuadrados de colores (si están habilitados) muestran el color de cada categoría
6. Categorías Sin Agrupar: Cualquier categoría no asignada a secciones aparece en “Otras Categorías”
7. Preferencias: Tu elección de vista y el estado abierto/cerrado se guardan por navegador

Características Avanzadas

Fondos Degradados

Cuando están habilitados, los encabezados de sección utilizan un degradado suave:

• 50% color sólido (el color de fondo elegido)
• 50% desvanecimiento a transparente
• Crea una apariencia moderna y elegante

Ocultar Categorías

Especifica etiquetas de categoría para ocultarlas completamente de la barra lateral:

• Útil para categorías solo para personal o categorías obsoletas
• Se aplica tanto a las vistas personalizadas como a las predeterminadas
• Lista separada por comas (ej: staff,private,archived)

Subcategorías

• Alternar por sección (no global)
• Visualización con sangría con fuente ligeramente más pequeña
• Opacidad reducida para la jerarquía visual
• Mantiene los colores de las insignias de categoría

Versión

• Actual: 1.0.1
• Discourse Mínimo: 3.3.0
• Autor: Andy@Focallocal

Licencia

Licencia MIT - Ver archivo LICENSE

Soporte

Reportar problemas: GitHub · Where software is built

[Lilly]

¡Buen trabajo!

Consejo de configuración de categoría

En lugar de hacer que los administradores introduzcan slugs de categoría, puedes usar esto en tu archivo settings.yml, por ejemplo:

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

lo que te dará una configuración como esta:

También puedes hacer lo mismo con los grupos si alguna vez quieres un menú desplegable de grupos:

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

lo que dará algo como esto:

[jenmck (jen)]

¡Realmente me gusta esto y definitivamente es algo que se me ha pasado por la cabeza, así que gracias!

Pregunta: si un usuario no tiene acceso a ninguna categoría en una sección determinada, ¿sigue apareciendo la sección al usuario?

[NateDhaliwal]

Sí, lo hace:

javascripts%2Fdiscourse%2Fapi-initializers%2Fsidebar-organizer.js

[Drew-ART (Drew)]

No, la categoría/subcategoría está oculta si no tienen acceso a ella. También puedes ocultar manualmente cualquiera que elijas desde la configuración.

[Drew-ART (Drew)]

Gracias Lilly. Actualizaré ese y mis otros componentes recientes para mejorarlos.

[Drew-ART (Drew)]

El complemento se actualiza ahora con adorables selectores desplegables.

[jenmck (jen)]

De acuerdo, entendí esa parte, pero me refiero a la sección real, no solo a la categoría.

Por ejemplo, si tengo esta configuración:

Animales

• Gatos
• Perros

Nubes

• Nimbus
• Cúmulo

Días

• Sábado
• Domingo

Supongamos que un usuario no tiene acceso ni a las categorías Nimbus ni a Cúmulo. ¿Aparecería la sección Nubes para el usuario pero sin categorías, así?

Animales

• Gatos
• Perros

Nubes

Días

• Sábado
• Domingo

¿O la sección Nubes no aparecería en absoluto, así?

Animales

• Gatos
• Perros

Días

• Sábado
• Domingo

[Drew-ART (Drew)]

si un usuario no tiene permiso para ver ninguna categoría en una sección, toda la sección (pestaña) se ocultará

[Heliosurge (Dan DeMontmorency)]

¡Esto es genial!

Me hace replantearme ideas, jajaja.

He estado jugueteando con la idea de usar el complemento Doc Categories para diseñar secciones personalizadas con menús enfocados. Pero necesito un arreglo para permitir color e iconos.

Hay un markdown para añadir el “Install component” a Op.

¿Algo cambió en Meta? No parece que pueda resaltar algo para citar en Android aquí. - ok, parece haberse resuelto.

[Heliosurge (Dan DeMontmorency)]

Hola Lily, ¿podríamos tener el Markdown para “Instalar Componente”?

[NateDhaliwal]

Aquí tienes uno para este componente:

Instalar este componente de tema

Formato Markdown (reemplace repoName y repoUrl):

[wrap=theme-install-button repoName="Nombre del componente" repoUrl="Enlace al repositorio de GitHub"]
Instalar este componente de tema
[/wrap]

[Heliosurge (Dan DeMontmorency)]

Gracias Nate. Intenté hacer una búsqueda pero quizás usé términos demasiado generales.

[NateDhaliwal]

Oh, no estoy seguro de si se menciona en alguna parte. Lo quité de la plantilla de tema del tema Theme component .

[Heliosurge (Dan DeMontmorency)]

Eso es genial, sin duda. Meta podría considerar el otro TC de zOp, ya que puede preinsertar una plantilla al crear un tema.