Reordenar menú lateral

Personalización Componente temático
1
:information_source: Resumen Permite reordenar las secciones del menú lateral predeterminadas y personalizadas
:eyeglasses: Vista previa https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: Repositorio https://github.com/Lillinator/sidebar-menu-reorder
:question: Guía de instalación Cómo instalar un tema o componente de tema

Instalar este componente de tema

:bulb: Introducción

He visto numerosas solicitudes de administradores de Discourse que desean reordenar las secciones del menú lateral, incluidas las secciones personalizadas globales. Dado que actualmente no es muy intuitivo ni sencillo para la mayoría de las personas hacerlo con CSS, y que gestionar y modificar estos cambios puede ser difícil, creé un componente de tema que facilita mucho esta tarea desde la interfaz de administración.

:woman_technologist:t2: Descripción general

Este componente de tema de Discourse permite a los administradores reordenar las secciones del menú lateral de su foro en la interfaz de usuario de administración, incluidas todas las secciones predeterminadas, así como cualquier sección personalizada visible globalmente.

El componente funciona tanto para las vistas laterales de escritorio como móviles, así como para el modo desplegable del encabezado (aunque, idealmente, está diseñado para el modo lateral).

:wrench: Instalación y configuración

  • Instala este componente de tema según la Guía para principiantes sobre el uso de temas de Discourse.
  • La sección community se refiere a la sección superior predeterminada del menú lateral: el menú con el encabezado Temas que incluye el submenú desplegable Más; se recomienda que no se muevan más de una o dos secciones (predeterminadas o personalizadas) por encima de la sección community.
  • No elimines ninguna de las secciones predeterminadas en la configuración, o se desordenarán (siempre puedes volver a añadirlas o restablecer la configuración).
  • La mejor forma de configurar este componente es tener la pantalla de administración del componente con la configuración de la lista de reordenación en una ventana del navegador, y la vista lateral del foro como usuario de prueba en otra ventana junto a ella; recarga la página después de cada cambio en el orden de las secciones del menú en la lista.
  • En la configuración de administración del componente, asegúrate de utilizar el formato de nombre de slug para las secciones personalizadas, o se ignorarán (es decir: usa custom-menu-name para “Nombre del menú personalizado”, useful-links para “Enlaces útiles”, etc.).

:gear: Configuración

Ajuste Descripción
Sidebar menu order Un ajuste de lista que contiene las secciones de menú predeterminadas. (community es la sección superior predeterminada en el menú lateral e incluye el submenú desplegable More.) Reordena las secciones del menú con las flechas hacia arriba y hacia abajo del lateral. También se pueden añadir secciones personalizadas visibles globalmente: utiliza el slug del nombre del menú (por ejemplo, para un menú personalizado titulado Test Menu, añade test-menu en el ajuste).

El componente de tema tiene inicialmente la configuración predeterminada. Los administradores deben añadir cualquier sección de menú personalizada global que deseen incluir en la lista de ordenación y, a continuación, reordenarlas junto con las secciones predeterminadas.

captura de pantalla de la configuración predeterminada del componente

image
image1632×2188 262 KB

:camera_flash: Capturas de pantalla

Las capturas de pantalla a continuación muestran la sección community, y dos secciones de menú personalizadas de ejemplo llamadas “Dev Links” (dev-links) y “Toolbox” (toolbox) tal como aparecen en el panel de administración del componente a la izquierda, y para un usuario normal a la derecha. Las flechas para mover una sección de menú hacia arriba y hacia abajo en la configuración de administración del componente se muestran en el pequeño recuadro rojo.

image
image1709×1200 222 KB

Aquí, la configuración está ajustada para mostrar la sección predeterminada categories por encima de la sección community (modos contraído y expandido):

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

A continuación se muestra un ejemplo que utiliza dos secciones personalizadas: una llamada dev-links que está por encima de la sección predeterminada community, y otra llamada toolbox que se sitúa por debajo de la sección predeterminada tags.

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

También, observa la sección llamada inbox-section en la captura de pantalla de administración anterior: esta es la sección Messages que el componente Sección de mensajes para el menú lateral inserta en el menú lateral (debajo del menú personalizado toolbox anterior), lo que demuestra que este componente también se puede utilizar para moverla.

Además, este componente de tema se puede utilizar junto con los componentes Menús laterales por grupo y Subcategorías sangradas (véase la captura de pantalla anterior).

:backhand_index_pointing_right: Notas

  • Después de añadir nuevas secciones personalizadas globales al ajuste sidebar_menu_order, los usuarios del foro verán el nuevo orden correcto del menú cuando recarguen su navegador o contraigan/expandan el menú lateral.
  • Crear nuevas secciones de menú personalizadas globales mientras este componente está habilitado puede provocar la aparición temporal de secciones duplicadas para el administrador hasta que se vuelva a representar el menú lateral, ya sea mediante una actualización de la página o contraigiendo y expandiendo.
  • Las secciones de menú personalizadas creadas por los usuarios aparecerán siempre al final del menú lateral para ese usuario, pero no se ven afectadas de otra manera.
  • Si el ajuste Admin -> All Site Settings -> Chat Separate Sidebar Mode está configurado en Always, el botón de chat aparecerá como de costumbre en la parte inferior, y el componente ignorará las secciones de menú de chat predeterminadas (chat-dms, chat-channels y chat-search).
Consulta mi otro material de Discourse
28 Me gusta
Configuring the default sidebar for your users
Group Sidebar Menus
Messages section for sidebar
2

Es genial. Realmente me gusta usar la configuración de categorías (1) y luego chat (2). Muchas gracias por tu buen trabajo, Lilly.

4 Me gusta
3

¿Esto todavía es compatible? Intenté instalarlo y obtuve el siguiente error. Intenté desde aquí y también usando las instrucciones manuales.

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

Sí lo es. El enlace en el botón “instalar este componente de tema” está desactualizado, pero el enlace en la parte superior sigue siendo correcto y puedes usarlo para instalar el componente manualmente.

O prueba este botón:

Instalar este componente de tema

2 Me gusta
5

Acabo de arreglar el enlace en el botón de instalación en el OP, así que todo bien ahora.

4 Me gusta
6

He encontrado un pequeño error, donde el orden especificado no funciona cuando tengo una pantalla de escritorio inusualmente estrecha.

Así es como quiero que se vea:

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

Cuando tengo una pantalla de tamaño extraño (es decir, mi teléfono plegable, parece ser un ancho de 640-820 más o menos), pierdo el orden:

image
image670×862 60.9 KB

Pero en el in

1 me gusta
7

Dios mío, el regreso de la barra lateral de 2 columnas. ¿Pensé que esa cosa se había ido? Voy a echar un vistazo…

4 Me gusta
8

¡En efecto, fui yo siendo un poco tonto! Estaba usando el componente antiguo y ni siquiera me di cuenta.

Sin embargo, he notado una cosa: lo que se llamaba community ahora se llama the-forum. Aquí hay un PR para arreglar eso en los valores predeterminados:

1 me gusta
9

En mi foro todavía se llama community y aquí en Meta también.

image
image1258×159 35.2 KB

Me pregunto cómo lo cambiaste.

2 Me gusta
10

¡Eso es realmente extraño! Recuerdo haber cambiado el texto en algún momento ahora que lo pienso. ¡Pero no estoy seguro de cómo terminó eso en el HTML!

Retiraré ese PR y me romperé un poco más la cabeza. ¡Podría tener que seguir siendo una ‘peculiaridad’ de mi sitio!

1 me gusta
11

deberías poder ejecutar algunos comandos de rails para cambiarle el nombre de vuelta. si tu sección se llama realmente the-forum, entonces creo que esto debería funcionar desde la consola de rails:

cd /var/discourse
./launcher enter app
rails c

section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "Hecho: renombrado a 'community'."
else
  puts "Sección no encontrada."
end

definitivamente haz una copia de seguridad primero.

3 Me gusta
12

Acabo de (por fin) probar esto. Sin embargo, no encontró la sección:

image
image1147×245 29.6 KB

Creo que esto simplemente tendrá que permanecer como una peculiaridad del sitio, ¿verdad?

1 me gusta
13

(publicación eliminada por el autor)

2 Me gusta
14

Nota: acabo de implementar algunas correcciones móviles para este componente: había comenzado a renderizar las líneas horizontales entre las secciones de la barra lateral, las cuales solo deben mostrarse en vistas de escritorio o tableta.

2 Me gusta
15

Estoy utilizando este encantador componente de tema junto con el igualmente encantador componente de Lilly: Discourse Group Sidebar Menus. Mi caso de uso consiste en crear menús personalizados para clientes, de modo que todos en una organización tengan enlaces rápidos relevantes específicamente para ellos, justo en la parte superior, después de la sección de comunidad.

Quería mencionar para futuros viajeros (incluido yo mismo) que el nombre de la sección de la barra lateral es muy sensible y debe coincidir exactamente, con los espacios en el nombre convertidos en guiones. Así, “Doing business” se convierte en “doing-business”.

Todo esto está muy bien, pero cuando creé la sección de la barra lateral del grupo, añadí accidentalmente un espacio al final del nombre del grupo, lo que resultó en “doing-business-”. Me tomó algo de tiempo solucionar esto utilizando las herramientas de desarrollador.

Estas funciones son tan importantes para mí que agradecería mucho que se considerara su incorporación al núcleo, para que estén más fácilmente disponibles y sean fáciles de usar en cualquier sitio de Discourse. :folded_hands:

2 Me gusta
16

Gracias, Tobias. De hecho, mencioné usar los identificadores (slugs) de los nombres de sección en la descripción de la configuración, y también se indica en los ejemplos de capturas de pantalla (véase «dev-links» = DEV LINKS).

Quizás debería añadirlo en otro lugar además de las descripciones de la configuración. :thinking:

edición: hecho

6 Me gusta