| | | |
|:information_source: | Resumen | Inicie rápidamente el diseño de su tema con una plantilla de tema preparada. |
|:busts_in_silhouette: | Audiencia | Nuevos desarrolladores que desean comenzar a crear temas para Discourse. Desarrolladores experimentados que desean utilizar una plantilla lista para usar. |
|:hammer_and_wrench: | Repositorio | Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
|:open_book: | ¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Canvas proporciona una plantilla flexible que le permite crear temas personalizados con menos codificación. Ajuste fácilmente las propiedades y los valores de configuración para adaptar un tema a sus necesidades.
Vistas de ejemplo
La plantilla base conserva los valores predeterminados y se mantiene neutral en el diseño.
Sincronice el tema con su instancia de Discourse usando la gema discourse_theme.
Vaya al backend de administración y ajuste manualmente esta configuración del componente de tema: Pancartas de Categoría
Salida de complemento → above-main-container Pancartas de Etiqueta
Mostrar debajo del encabezado del sitio → desmarcar
Mostrar encima del contenedor principal → marcar
Edite scss/properties.scss para definir valores para las propiedades personalizadas
Edite about.json para agregar activos, esquemas de color y más componentes de tema
Un vistazo más de cerca a la configuración
La plantilla Tema Canvas solo extiende el esqueleto de tema predeterminado incluyendo algunos componentes de tema y agregando algunos archivos de estilo listos para usar. Las características reales son manejadas por un componente de tema separado Configuración de Canvas. Este componente sirve dos funciones:
Asigna propiedades personalizadas que se pueden usar con la plantilla. Una tabla que enumera todas las propiedades se puede encontrar en el archivo Readme de la plantilla.
Esta configuración dividida le permite crear un tema usando la plantilla Canvas, mientras sigue beneficiándose de las correcciones y actualizaciones continuas proporcionadas a través del componente.
Temas de ejemplo
Puede previsualizar temas compartidos en https://canvas.kostka.studio. Hay un interruptor de tema en la parte inferior de la barra lateral para cambiar el tema.
Revise el código de las vistas de ejemplo compartidas o instálelas como su tema inicial 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 preparado 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 barra lateral.
Me di cuenta de que con la barra lateral y algunos estilos, esta plantilla en realidad te acerca bastante al aspecto y la sensación del tema original.
En cualquier caso, no tengo planes de reconstruir completamente el tema Central… pero podría experimentar con un estilo dedicado para la lista de temas más adelante. Si tienes curiosidad y quieres echar un vistazo, el tema también está activo aquí, selecciónalo usando el interruptor de tema de la barra lateral: https://canvas.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.
¡Un enorme agradecimiento a Discourse por patrocinar el desarrollo de este proyecto!
!