Menús de la barra lateral del grupo Discourse

:information_source: Resumen Crear menús de barra lateral personalizados para grupos seleccionados
:eyeglasses: Vista previa Únete a este grupo de Creador de temas y luego vuelve a ver la vista previa aquí
:hammer_and_wrench: Repositorio https://github.com/Lillinator/discourse-group-sidebar-menus
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas en Discourse

Instalar este componente de tema

:woman_technologist:t2: Descripción general

Este componente de tema para Discourse permite a los administradores del foro crear menús de barra lateral personalizados que solo son accesibles para los miembros de grupos seleccionados.

Características principales:

  • Visibilidad del menú basada en grupos: las secciones del menú solo se muestran en la barra lateral para usuarios autorizados.
  • Configuración basada en objetos: interfaz de configuración fácil de usar para crear menús.
  • Múltiples secciones: crea secciones de menú ilimitadas para diferentes grupos (dentro de lo razonable).
  • Enlace de edición rápida para administradores: el icono de lápiz en los encabezados del menú lleva directamente a los administradores a la configuración del componente.

:briefcase: Algunos casos de uso

  • Recursos y enlaces rápidos solo para el personal.
  • Atajos para moderadores de categorías.
  • Portales personalizados para grupos (equipos de proyecto, grupos de estudio, clubes de lectura, miembros VIP).
  • Enlaces a recursos de sitios web de padres o socios.

:gear: Configuración

Secciones del menú (menu_sections)

Abre el editor de configuración de objetos para configurar secciones de menú de grupo personalizadas.

Propiedades de la sección

Propiedad Descripción
Título del menú Título que se muestra como el encabezado de la sección de la barra lateral
Grupos permitidos Grupos autorizados para ver esta sección del menú (máximo: 20 grupos por sección)
Enlaces del menú Colección de enlaces a mostrar en esta sección (máximo: 20 enlaces por sección)

Propiedades del enlace

Propiedad Descripción
Icono Nombre del icono de FontAwesome (por ejemplo, circle-info, star, user-group). Es posible que deba agregarse a Admin > Todas las configuraciones del sitio > subconjunto de iconos svg
Texto Etiqueta de visualización para el enlace
URL Destino del enlace: admite rutas relativas (/faq, /my/preferences) y URLs absolutas (https://example.com)

:wrench: Instalación y configuración

  1. Instala el componente de tema según lo indicado en Installing a theme or theme component.
  2. Ve al Editor de configuración de objetos.
  3. Haz clic en el botón + new_menu_section para configurar la primera sección de menú personalizada.
  4. Asigna un título al nuevo menú en el campo Título del menú y luego selecciona los grupos que deseas que tengan acceso a él.
  5. Haz clic en + new_menu_section para agregar otra sección o guarda los cambios.
Capturas de pantalla de configuración de administrador con ejemplo

Instalación nueva: ve al Editor de configuración de objetos.

Escenario de ejemplo con 2 menús personalizados y 3 usuarios, uno de los cuales es administrador:

  • @Catra ama a los gatos y es miembro del grupo pink, que tendrá acceso al Menú de gatos :grinning_cat:
  • @HelloKitty le gustan los perros y es miembro del grupo purple, que tendrá acceso al Menú de perros :dog_face:
  • @Lilly es miembro de purple porque tiene un perro y los perros son mejores. Sin embargo, también es administradora del foro, y los administradores tendrán acceso al Menú de gatos porque los gatos necesitan más supervisión :dog_face: :cat_with_wry_smile:

Crea un nuevo menú personalizado: para nuestro ejemplo, crea Menú de gatos y agrega los grupos autorizados para tener acceso a él: pink y admins. Luego, haz clic en el botón + menu_link para configurar los enlaces del nuevo menú.

Agrega los enlaces del menú: 1. Nombre del icono de FontAwesome, 2. texto a mostrar para el enlace y 3. la URL, relativa o absoluta. Haz clic en el botón + menu_link para agregar otro enlace a este menú.

Crea otra sección de menú personalizada llamada Menú de perros, otorga acceso solo al grupo purple y configura los enlaces:

Capturas de pantalla del acceso resultante al menú de la barra lateral

El usuario @Catra tiene el menú de gatos! :grinning_cat:

El usuario @HelloKitty tiene el menú de perros! :dog_face:

El usuario administrador @Lilly tiene ambos menús y puede editarlos! :smiling_cat_with_heart_eyes:

Ejemplo de configuración

Título del menú: "Cosas de gatos"
Grupos permitidos: team-cat
Enlaces:
  - Icono: link
    Texto: Videos y fotos de gatos
    URL: /t/cat-videos-and-photos/123
  - Icono: magnifying-glass
    Texto: Wiki de gatos
    URL: https://en.wikipedia.org/wiki/Cat

:light_bulb: Notas importantes

Acceso de administrador

Los administradores deben agregarse a los grupos para ver los menús configurados para esos grupos. El estatus de administrador por sí solo no otorga acceso a todos los menús personalizados. ¡Esto es intencional! Además, los administradores que pertenecen a los grupos permitidos de un menú verán un icono de lápiz en el encabezado de la sección que los llevará a la configuración del componente.

Configuración de grupos

  • El grupo everyone no es compatible: utiliza la interfaz de usuario nativa del pie de página de la barra lateral para crear menús personalizados globales para todos los usuarios, incluidos los visitantes anónimos.
  • Máximo de 20 grupos por sección de menú. Si necesitas más, crea secciones duplicadas con asignaciones de grupo diferentes.
  • Los usuarios que pertenecen a varios grupos verán todas las secciones del menú a las que tengan acceso.

Pruebas y organización

Utiliza cuentas de prueba para verificar el acceso correcto para diferentes combinaciones de grupos. Mantén un registro de tus configuraciones de menú para evitar confusiones a medida que aumenta la complejidad; se recomienda una matriz de acceso o documentación similar para foros más grandes con muchos grupos.

Consideraciones de seguridad

Este componente proporciona control de acceso a nivel de interfaz de usuario. Controla la visibilidad del menú, no el acceso a los recursos: este componente solo controla lo que se muestra en la barra lateral, no quién puede acceder a los recursos reales.

Confía siempre en el sistema de permisos integrado de Discourse para asegurar los recursos reales:

  • Configura correctamente los permisos de categoría.
  • Establece restricciones de visibilidad de temas.
  • Utiliza controles de acceso basados en grupos para el contenido.
  • Asegúrate de que los recursos privados requieran autenticación.

Mejores prácticas para administradores:
Configura por separado los permisos de seguridad de las categorías vinculadas y la pertenencia a grupos; por ejemplo: un enlace de menú a una categoría privada debe tener configurados correctamente los permisos de esa categoría. Los administradores son responsables de asegurar que los enlaces a recursos externos estén autorizados adecuadamente para los grupos seleccionados.


Este fue un proyecto colaborativo con @Moin; su aporte, inspiración y retroalimentación fueron invaluables.


Echa un vistazo a mi otro material de Discourse
12 Me gusta

Parece que estoy obteniendo un 404 en el repositorio.

EDIT: ¡Todo bien ahora!

2 Me gusta

jaja inténtalo de nuevo. ¡olvidé hacerlo público! :laughing:

6 Me gusta

¡Fabuloso! Llevaba tiempo queriendo esto. He creado una buena colección de menús laterales personalizados útiles para mí: enlaces para moderación, para tareas y referencias de administradores, para la documentación de Discourse, para contenido externo al que hacemos referencia frecuentemente en el foro, etc. Un menú tiene enlaces para las diversas reuniones periódicas que simplemente utiliza el enlace de etiqueta (tag), por ejemplo, /tag/comm-mgt-monthly que me ayuda a acceder rápidamente a las agendas y actas actuales y anteriores.

Muchas veces he deseado una forma de exportar mis configuraciones de menú lateral personalizado para que otros miembros de mi equipo pudieran importarlas; ¡esta es una configuración muy superior!

¡Y los iconos! ¡Viva! Hasta donde sé, la única forma de hacer esto era añadir CSS personalizado. Esta nueva solución es elegante.

¡Y sostenible! Todos los administradores podrán editar los archivos de configuración, por lo que no dependerán solo de mí. ¡Gracias @Lilly y @Moin!

1 me gusta

Hola @Lilly y @Moin,

Gracias por crear este componente.

Estaba usando Group sidebar menu sections - deprecated en mi sitio autoalojado y en mi última actualización se me advirtió que el componente de tema anterior había sido obsoleto y que instalara este, en su lugar.

He instalado el componente y creado mi menú de grupo personalizado, pero no veo cómo mover el menú de grupo. (Debo estar pasando por alto algo obvio. :see_no_evil_monkey:) En sus capturas de pantalla, su Cat Menu y Dog Menu están en la navegación de la barra lateral por encima de la sección Topics, pero mi menú de grupo personalizado aparece al final de mi navegación de la barra lateral. ¿Cómo lo muevo por encima de Topics?

1 me gusta

No es obvio. Lilly usó Discourse Sidebar Menu Reorder para poner cat-menu en la parte superior

3 Me gusta

¡Muchas gracias! Fue muy fácil de configurar.

3 Me gusta