Canvas proporciona una plantilla flexible que te permite crear temas personalizados con menos código. Ajusta fácilmente las propiedades y los valores de configuración para adaptar un tema a tus necesidades.
Vistas de ejemplo
La plantilla base conserva los valores predeterminados y mantiene un diseño neutral.
Sincroniza el tema con tu instancia de Discourse utilizando la gema discourse_theme.
Ve al backend de administración y ajusta manualmente estas configuraciones del componente de tema: Banners de categoría
Salida del plugin → above-main-container Banners de etiquetas
Mostrar debajo del encabezado del sitio → desmarcar
Mostrar encima del contenedor principal → marcar
Edita scss/properties.scss para definir los valores de las propiedades personalizadas.
Edita about.json para añadir activos, esquemas de color y más componentes de tema.
Un vistazo más de cerca a la configuración
La plantilla Canvas Theme solo extiende el esqueleto del tema predeterminado, incluyendo algunos componentes de tema y añadiendo algunos archivos de estilo listos para usar. Las funcionalidades reales son manejadas por un componente de tema separado, Canvas Settings. Este componente cumple dos funciones:
Asigna propiedades personalizadas que se pueden usar con la plantilla. Una tabla que lista todas las propiedades se puede encontrar en el archivo Readme de la plantilla.
Esta configuración dividida te permite crear un tema utilizando la plantilla Canvas, mientras sigues beneficiándote de las correcciones y actualizaciones continuas proporcionadas a través del componente.
Temas de ejemplo
Puedes revisar el código de las vistas de ejemplo compartidas o instalarlas como tu tema de inicio desde estos repositorios:
La configuración está en el componente de tema instalado como Configuración de Canvas. Quizás sea un poco confuso que la configuración siempre se llame Configuración de Tema en la interfaz de usuario, incluso en los componentes de tema.
Probé la versión del Editor localmente, funciona muy bien en su mayor parte, pero noté algunos pequeños problemas.
En una instalación predeterminada, sin cambiar ninguna configuración, la etiqueta de la categoría en el componente de Banners Adicionales aparece en el lugar equivocado:
El banner de la categoría también se muestra en el mismo lugar, encima de la barra lateral. Los temas más recientes y los temas populares se muestran correctamente en la columna principal.
Supongo que no es un objetivo del tema cubrir completamente la interfaz de administración, sin embargo, las paletas de colores claro y oscuro del Editor hacen que la barra lateral de administración se vea bastante diferente. Tengo curiosidad si es posible armonizarla con la barra lateral no administrativa.
El tema está diseñado para mostrar banners junto a la barra lateral, utilizando el outlet above-main-container. El componente Extra-Banners utiliza ese outlet por defecto, pero los dos componentes para los banners de Categoría y Etiqueta se renderizan por defecto debajo de la cabecera. No querría hacer un fork de estos componentes solo para establecer un outlet por defecto diferente. Por eso puse estas instrucciones:
Pero si eso es fácil de pasar por alto, ¿quizás hay una mejor manera de decirlo?
Sí, eso es bastante fácil y parece un buen enfoque para este tema. ¡Acabo de añadir un commit!
Ah sí, veo cómo llegamos aquí. No queremos necesariamente cambiar los valores predeterminados en los componentes de banners de categorías/etiquetas, tampoco queremos bifurcarlos. Es complicado de arreglar, dejémoslo como está por ahora y veamos si otros se encuentran con el mismo problema.
El cambio en la barra lateral del administrador ya se ve bien, ¡gracias!
¿Se podrían detallar un poco estas instrucciones? ¿No es posible simplemente instalar desde la interfaz de administración? Gracias
EDITAR: Lo instalé a través de la interfaz de administración y parece estar funcionando, excepto que ahora no parece haber ningún lugar para editar scss.
EDITAR: Olvídalo, veo que probablemente se espera y estás mostrando editar los archivos del tema directamente. Me pregunto si esto podría estar en la hoja de ruta para que suceda a través de la interfaz de administración. Por ejemplo, tener un editor de variables igual que tienes un editor de configuración.
No sé cuál es el plan principal, pero una cosa que podrías hacer ahora mismo es crear un nuevo componente de tema directamente en la interfaz de administración:
Y luego declarar propiedades personalizadas en su archivo CSS. Podrías buscar propiedades en el archivo Readme. O copiar el contenido de properties.scss del repositorio del tema.
No veo un signo más en el móvil en GitHub. Es posible que necesite probar las líneas de comando cuando esté en casa.
Todo lo que veo en GitHub en el panel es la opción de crear un nuevo repositorio, pero no la opción de reclamar. Estoy en una cuenta gratuita, así que no estoy seguro de si eso podría tener algo que ver.
Es limitado en comparación con la declaración de variables personalizadas en la hoja de estilos. Pero te permite experimentar con algunas apariencias diferentes. ¡Tengo curiosidad por saber si eso funciona!
¡Estoy jugando con él ahora mismo y creo que está muy bien! ¿Hay alguna forma de reducir el espaciado entre líneas del menú, para hacerlo más compacto?
Además, no puedo desplazar la barra lateral sólida, ¿es un error?
¡Acabo de ajustar los estilos CSS para la barra lateral sólida, el desplazamiento debería funcionar de nuevo!
Sin embargo, la barra lateral sólida es solo una de las opciones en el componente de Estilos que mencioné en la publicación anterior. Si desea ajustar más estilos (como el espaciado del menú de la barra lateral), deberá seguir el enfoque explicado anteriormente en Uso y Una mirada más cercana a la Configuración: Use su propia hoja de estilos con propiedades CSS personalizadas; en este caso, sería -d-sidebar-row-height.
He reunido un nuevo tema de ejemplo basado en esta plantilla. Como su nombre indica, ¡este es un homenaje al tema Central original!
Me encantó el diseño y el estilo visual de Central y he estado empaquetando algunas de sus características en componentes independientes, como el Menú de Usuario Personalizado y varios bloques de la barra lateral.
Me di cuenta de que con la barra lateral y algunos estilos, esta plantilla en realidad te acerca bastante a la apariencia del tema original.
En cualquier caso, no planeo reconstruir completamente el tema Central… pero aún podría experimentar con un estilo de lista de temas dedicado en el futuro. Si tienes curiosidad y quieres echar un vistazo, el tema también está disponible aquí: https://central.kostka.studio
¡Gracias por compartir esta plantilla! La flexibilidad con los componentes y el diseño limpio hacen que sea realmente fácil de personalizar. Tengo muchas ganas de probarla en mi propia instancia.
| Resumen | Inicia rápidamente el diseño de tu tema con una plantilla preparada.
|Audiencia| Nuevos desarrolladores que quieran empezar a crear temas para Discourse. Desarrolladores experimentados que quieran usar una plantilla lista para usar. |
|Repositorio| Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
|Guía de instalación|Cómo instalar un tema o componente de tema|
|¿Nuevo en Temas de Discourse?| Guía para principiantes sobre el uso de Temas de Discourse|
¡Un enorme agradecimiento a Discourse por patrocinar el desarrollo de este proyecto!
!