Barra de Discourse :cerveza: :cóctel: (un marco lateral)

merefield · 6 Marzo, 2024 16:17

Resumen

Un Componente Temático que te permite organizar Componentes^[1] en las barras superior y lateral.

Especifica un conjunto de “widgets” distintos para la Ruta y la Posición.
Admite configuraciones para cada uno de: descubrimiento^[2], tema, etiqueta^[3], categoría^[3:1], categorías^[3:2] O intersección de etiquetas^[4]
Las “Barras” pueden ser: superior, izquierda, derecha O ubicación alternativa derecha.
Cada barra se puede contraer o descartar (refresca el navegador para restablecer el descarte). Se pueden minimizar por defecto.
Maneja la Barra Lateral Oficial, pero si tienes la intención de usar una Barra Lateral Izquierda, se recomienda el modo Desplegable de la Barra Lateral Oficial.
Viene con configuraciones de ejemplo existentes que muestran algunas letras grandes, en parte como demostración y en parte para que puedas ver configuraciones de ejemplo. Elimina estas y reemplázalas con los nombres de tus propios Componentes.
Incluye un Componente: bars-custom-html (ver configuraciones de ejemplo prellenadas), pero los componentes de muchos Componentes Temáticos y Plugins existentes son compatibles.
El soporte móvil aún no está implementado.

Enlaces Rápidos


Obtener el código	`https://github.com/merefield/discourse-tc-bars`
Ver el código	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
Guía de Instalación	Installing a theme or theme component

¿Disfrutas de este Componente Temático? ¡Por favor, dale en GitHub !

Ejemplo gratuito:

Al cargar por primera vez:

¡Algunas cosas importantes a tener en cuenta sobre este TC!

Este Componente Temático está destinado principalmente a desarrolladores y administradores que tengan algún conocimiento técnico del desarrollo de Temas. Si no eres lo suficientemente técnico y necesitas ayuda para implementar barras laterales usando Barras, puedes contratarme a mí o a un desarrollador en Marketplace
Este Componente Temático está destinado a proporcionar un marco para admitir barras laterales. No proporciona ni pretende proporcionar un pulido visual final que deberás agregar en tu Tema con CSS adicional. Sin embargo, hace mucho trabajo por ti y te da menos cosas en las que pensar y quizás incluso te da la capacidad de hacer cosas que antes no podías…

Consideraciones del Componente

Debes especificar un nombre de Componente. El nombre del componente es, de hecho, el mismo que el nombre del archivo en el directorio del tema, tc o plugin component sin el sufijo.
- el nombre del componente no es el nombre del Componente Temático (que podría contener muchos Componentes Glimmer Ember), es el nombre del archivo real del Componente Ember , así que, por ejemplo:
image659×364 12.3 KB

así que layouts-tag-list
Pueden ser de un Componente Temático o Plugin existente. Los Componentes existentes pueden funcionar. Los ejemplos son:
- 🏷️ Bars Tag List Component
- Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
- Discourse AI Topic Summary 🤖 … y posiblemente incluso:
- El widget de Tabla de Clasificación: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (¡avísame si lo pruebas abajo!)
Se requiere cierta experiencia para construir Componentes
- Pero intenta construir tu propio Componente en otro Componente Temático y asegúrate de que ambos estén activos en el mismo Tema.
Los Componentes deben obtener sus propios datos (no pueden usar modelos de paso de salida de plugin desafortunadamente debido a las salidas de plugin específicas que se deben usar para organizar las cosas de esta manera)
- De fábrica, solo puedes usar datos de la API JSON existentes, por ejemplo, del núcleo de Discourse o los proporcionados por un Plugin existente. Si necesitas datos personalizados que no puedes obtener de las API actuales, puedes contratarme a mí o a alguien en Marketplace para que te ayude.
Es posible que necesites estilizar la barra lateral y los límites del componente a tu gusto. (nuevamente, si necesitas ayuda, considera contratar a un desarrollador).
- El uso estratégico de sombras de caja y bordes puede hacer que las cosas se vean muy bien. ¡Sé artístico!

Por qué

Con la actualización del núcleo de Discourse a Ember 5, el truco que usaba el plugin Layouts de Pavilion para proporcionar una excelente manera de manipular el diseño de Discourse dejó de funcionar. Ahora no había una forma fácil de mostrar una barra lateral en una ruta de Tema a través de una interfaz de usuario relativamente fácil para el usuario final.
Además, Ember introdujo los Componentes Glimmer, que eran mucho más agradables de usar. (Layouts usaba la API de Widgets, que está obsoleta en favor de los Componentes Glimmer).
Finalmente, el equipo principal de Discourse proporcionó un nuevo editor JSON para la configuración de Componentes Temáticos, lo que hizo posible implementar una configuración más compleja
En lugar de arreglar el plugin Layouts (los TC no existían en la época de Layouts), tenía sentido reconstruirlo como un Componente Temático, porque podemos lograr la mayoría de las cosas que necesitamos solo en el front-end.
¡Entra “Barras” ¡Salud!

Problemas Conocidos

La barra superior no se fija (puede que elimine la configuración correspondiente si no puedo resolverlo).

Créditos

Sucesor espiritual del ahora roto Plugin Layouts creado por @angus (¡Gracias!) que nos sirvió bien durante muchos años.
Utiliza el sistema de parámetros de Bloques de Barra Lateral Derecha (¡gracias @pmusaraj!)

el término ‘descubrimiento’ (ruta) se refiere a las páginas principales de la Lista de Temas (por ejemplo, “Últimos”, “Nuevos”) que te permiten navegar por los Temas disponibles antes de hacer clic y profundizar en uno específico. ↩︎
técnicamente también es una ruta de “descubrimiento”, pero las separamos con nombres distintos para que puedas tratarlas de manera diferente si así lo deseas. ↩︎
Ver aquí para más detalles. Para que esto siga siendo opcional (no todos los instaladores de Barras querrán una página de inicio personalizada), Barras no agrega el modificador requerido en about.json, por lo que debes agregarlo en el Tema padre u otro TC para activarlo. ↩︎ ↩︎ ↩︎
Ver el Plugin de Intersección de Etiquetas ↩︎

Lilly · 6 Marzo, 2024 16:27

¡Guau, esto es genial! Buen trabajo, Robert. ¡Gracias por hacer esto y ponerlo a disposición!

¡Forkeado!

thoka · 6 Marzo, 2024 17:57

Estoy bastante al principio de aprender a añadir widgets personalizados, pero: me encantaría una opción para añadir widgets en un pie de página no desplazable en la vista móvil. ¿Sería esto posible con una futura versión de este componente?

merefield · 6 Marzo, 2024 18:00

En esta etapa no hay planes de añadir “barras” adicionales, pero quizás una vez que las cosas se asienten y la TC sea claramente estable…

…también se aceptan relaciones públicas o patrocinios

denvergeeks · 6 Marzo, 2024 18:56

¡Esto se ve increíble - Gracias! ¿Podrías proporcionar un ejemplo de cómo se ven la configuración para incluir el Widget de Lista de Etiquetas en una de las barras laterales?

Por ejemplo, según las instrucciones, esto parece que debería funcionar…

Pero la barra lateral izquierda todavía solo muestra la ‘a’ grande…

merefield · 6 Marzo, 2024 19:03

Dos cosas:

Primero, aquí hay configuraciones similares de StarZen:

El nombre del componente es, de hecho, el mismo que el nombre del archivo en el Componente (lo añadiré al OP)

https://starzen.space

En segundo lugar, es realmente tonto, pero tienes que presionar Guardar y hacer clic en la marca de verificación después de presionar Guardar.

¡Es un doble Guardado!

Esa es la naturaleza de la configuración de temas actual del núcleo, no de las barras. Podría añadir una nota al respecto en el OP.

denvergeeks · 6 Marzo, 2024 19:12

Sí, hice el doble Guardado

Aún así, debo estar perdiéndome algo porque el resultado es el mismo. ¿Hay algo más que pueda proporcionar para ayudar?

merefield · 6 Marzo, 2024 19:13

Comparte tu JSON de configuración (botón en la parte inferior de TC).

denvergeeks · 6 Marzo, 2024 19:14

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 6 Marzo, 2024 19:15

Tu component_name sigue siendo incorrecto, mira mi ejemplo y es posible que quieras eliminar el resto.

denvergeeks · 6 Marzo, 2024 19:22

Hmm… OK He eliminado todos excepto el primero, y he cambiado el nombre para que coincida con el tuyo (aunque el nombre del componente proviene de TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - ¿dónde encontraría que el nombre correcto del componente es layouts-tag-list?)

Sin embargo, cambiar el nombre del componente en el modal no parece cambiarlo en el JSON de configuración, ni eliminar los demás elementos, incluso después de guardar dos veces…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 6 Marzo, 2024 19:25

Como expliqué anteriormente (y ahora he ampliado en el OP), el nombre del componente no es el nombre del Componente Temático (que podría contener muchos Componentes Ember Glimmer), es el nombre del Componente Ember real:

así que layouts-tag-list

Este es un malentendido útil, lo aclararé más en el OP, usando este ejemplo.

No estoy seguro de por qué tu configuración se queda pegada

Intenta eliminar el Componente Temático y volver a añadirlo y pasar por el mismo proceso.

¿O simplemente refresca tu navegador?

ckshen · 6 Marzo, 2024 19:34

¡Gracias por el trabajo @merefield!

¿En qué se diferencian funcionalmente las Barras de Discourse de los Bloques de Barra Lateral Derecha con HTML personalizado, además del hecho de que la ubicación no tiene que ser solo a la derecha?

merefield · 6 Marzo, 2024 19:35

Bars es el sucesor espiritual de Pavilions Layouts, que existió antes de RSB.

Pero en comparación con RSB, el soporte multi-ruta y multi-posición es principal (el objetivo de Bar es reproducir la utilidad y flexibilidad de Layouts), siendo la adición crítica el soporte de rutas de temas. Además, actualmente no soporto params… aún no he encontrado un caso de uso. Tampoco incluyo ningún componente aparte de las letras grandes de demostración; esto es deliberado y está pensado para ser más un framework para administradores/desarrolladores (muy parecido a como era Layouts).

El plan de desarrollo también podría ser más ambicioso: si obtengo financiación, puedo añadir la funcionalidad móvil que tenía Layouts; cualquiera es libre de contactarme para patrocinar ese trabajo.

denvergeeks · 6 Marzo, 2024 19:38

OK, he eliminado y reinstalado tanto los TC de barras como los TC de layouts-tag-list (intenté eliminarlos y volver a agregarlos individualmente y juntos), pero los resultados son todos los mismos. Y he actualizado cada vez como lo había hecho antes también. También borré la caché de mi navegador.

merefield · 6 Marzo, 2024 19:41

No puedo reproducir su problema de configuración atascada. Acabo de añadir y eliminar una barra lateral izquierda.

Me interesarían otros informes sobre lo mismo.

denvergeeks · 6 Marzo, 2024 19:49

Gracias por tu tiempo dedicado a intentarlo. Lo probaré en algunas de mis otras instancias de Discourse más tarde hoy y volveré a informar.

denvergeeks · 6 Marzo, 2024 20:17

También he eliminado todos los plugins, reconstruido (y no tengo otros TCs ni temas instalados), y es una instalación nueva de anoche.

Por si sirve de ayuda, descubrí que, con la misma configuración que la anterior, aunque la barra lateral izquierda no aparece en ningún otro lugar, sí se muestra en la ruta /latest (aunque solo el título “Tags”, sin mostrar ninguna etiqueta).

Y aquí está el JSON de configuración…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 6 Marzo, 2024 20:22

Tendrás que depurar eso tú mismo: revisa tu consola, CSS del tema, etc.

Me funciona:

No recuerdo si la Lista de Etiquetas de Diseños requiere Grupos de Etiquetas… ¡puede que sí!

denvergeeks · 6 Marzo, 2024 23:30

Sí, habilitar los grupos de etiquetas en la configuración (y luego crear algunos grupos de etiquetas) hizo que aparecieran las etiquetas.

Sin embargo, al establecer la ruta del elemento del componente en discovery, todavía solo se muestra la barra izquierda en las listas /latest, /new y /top.

¿Podría ser tan amable de indicarme una lista de todas las “rutas” disponibles que se pueden usar aquí?

¡Gracias de nuevo!

Tema		Respuestas	Vistas
Discourse Tab Bar for Mobile Theme component	78	21523	10 Noviembre 2025
Topic List Sidebars Theme component official , topic-list-sidebars	22	13799	6 Junio 2025
Right Sidebar Blocks Theme component official , desktop , right-sidebar-blocks	145	13838	10 Octubre 2025
Discourse Popular Tag Sidebar Theme component	26	7290	9 Enero 2023
Looking for the perfect theme Community	6	292	19 Septiembre 2024