Reordenar menú lateral de Discourse

[Lilly (Lillian)]

	Resumen	Permite reordenar las secciones predeterminadas y personalizadas del menú de la barra lateral
	Vista previa	https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
	Repositorio	https://github.com/Lillinator/discourse-sidebar-menu-reorder
	Guía de instalación	Cómo instalar un tema o un componente de tema

Instalar este componente de tema

Introducción

He visto varias solicitudes de administradores de Discourse que desean reordenar las secciones del menú de la barra 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 hacerlo puede ser difícil de gestionar y modificar, he creado un componente de tema que lo hace mucho más fácil en la interfaz de administración.

Visión general

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

El componente funciona tanto para las vistas de la barra lateral en escritorio como en móvil, así como para el modo de menú desplegable en la cabecera (aunque idealmente está diseñado para el modo de barra lateral).

---

Instalación y configuración

• Instale este componente de tema siguiendo la guía para principiantes sobre el uso de temas de Discourse.
• La sección community se refiere a la sección superior predeterminada de la barra lateral: el menú con el encabezado Temas e incluye el submenú desplegable Más; se recomienda no mover más de una o dos secciones (predeterminadas o personalizadas) por encima de la sección community.
• No elimine ninguna de las secciones predeterminadas en la configuración, ya que quedarán desordenadas (siempre puede volver a añadirlas o restablecer la configuración).
• La mejor manera 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 de la barra lateral del foro como usuario de prueba en otra ventana al lado; recargue 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úrese de utilizar el formato de nombre de slug para las secciones personalizadas, de lo contrario se ignorarán (es decir, use custom-menu-name para “Custom Menu Name”, useful-links para “Useful Links”, etc.).

---

Configuración

Configuración

Descripción

Sidebar menu order

Una configuración de lista que contiene las secciones predeterminadas del menú. (community es la sección superior predeterminada en la barra lateral e incluye el submenú desplegable More. ) Reordene las secciones del menú con las flechas arriba y abajo en el lateral. También se pueden añadir secciones personalizadas visibles globalmente: utilice el slug del nombre del menú (por ejemplo, para un menú personalizado titulado Test Menu, añada test-menu en la configuración).

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

captura de pantalla de la configuración predeterminada del componente

---

Capturas de pantalla

Las capturas de pantalla siguientes 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 del menú hacia arriba y hacia abajo en la configuración de administración del componente se muestran en el pequeño recuadro rojo.

---

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

Aquí hay un ejemplo con dos secciones personalizadas: una llamada dev-links que está por encima de la sección predeterminada community, y otra llamada toolbox que se encuentra por debajo de la sección predeterminada tags.

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

Además, este componente de tema puede utilizarse junto con los componentes Menús de barra lateral por grupos y Subcategorías con sangría (véase en la captura de pantalla anterior).

---

Notas

• Después de añadir nuevas secciones personalizadas globales a la configuración sidebar_menu_order, los usuarios del foro verán el nuevo orden correcto del menú cuando recarguen su navegador o contraigan/expandan la barra lateral.
• Crear nuevas secciones de menú personalizadas globales mientras este componente está habilitado puede resultar en secciones duplicadas temporales para el administrador hasta que la barra lateral se vuelva a renderizar, ya sea con una actualización de la página o contraendo y expandiendo.
• Las secciones de menú personalizadas creadas por el usuario siempre aparecerán en la parte inferior de la barra lateral para ese usuario, pero de lo contrario no se verán afectadas.
• Si la configuración Admin -> All Site Settings -> Chat Separate Sidebar Mode está establecida en Always, el botón de chat aparecerá como de costumbre en la parte inferior y el componente ignorará las secciones predeterminadas del menú de chat (chat-dms, chat-channels y chat-search).

---

Consulta mi otro material de Discourse

[David_Ghost]

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

[R23D_Printing]

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

[Moin]

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

[nathank (Nathan Kershaw)]

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

[nathank (Nathan Kershaw)]

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:

   

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:

Pero en el in

[Lilly (Lillian)]

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…

[nathank (Nathan Kershaw)]

¡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:

Update settings.yml (#3)

[Moin]

@nathank

lo que se llamaba community ahora se llama the-forum en su lugar

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

Me pregunto cómo lo cambiaste.

[nathank (Nathan Kershaw)]

¡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!

[Lilly (Lillian)]

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.

[nathank (Nathan Kershaw)]

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

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

[Lilly (Lillian)]

(publicación eliminada por el autor)

[Lilly (Lillian)]

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.

[tobiaseigen]

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.

[Lilly (Lillian)]

@tobiaseigen

Quería comentar para futuros viajeros (incluyéndome a mí) 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í que «Doing business» se convierte en «doing-business».

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).

@Lilly

También se pueden agregar secciones personalizadas visibles globalmente: usa el identificador del nombre del menú (por ejemplo, para un menú personalizado titulado «Test Menu», añade test-menu en la configuración).

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

edición: hecho

@Lilly

• En la configuración de administración del componente, asegúrate de usar el formato de nombres tipo slug para las secciones personalizadas, de lo contrario se ignorarán (es decir, usa custom-menu-name para «Custom Menu Name», useful-links para «Useful Links», etc.).