Esta es una introducción rápida a los conceptos básicos de los temas de Discourse. Está dirigida a todos aquellos que no estén familiarizados con los temas de Discourse. Si ya has utilizado temas o componentes de temas de Discourse, es probable que esta guía no sea necesaria para ti.
¿Qué son los temas y los componentes de temas?
Un tema o un componente de tema es un conjunto de archivos empaquetados juntos diseñados para modificar visualmente Discourse o para añadir nuevas funcionalidades.
Comencemos con los temas.
Temas
En general, los temas no deberían ser compatibles entre sí porque son esencialmente diseños independientes diferentes. Piensa en los temas como si fueran skins o lanzadores en Android. Puedes tener varios lanzadores instalados, pero no puedes usar dos al mismo tiempo. Tu instalación predeterminada de Discourse viene con dos temas: Foundation y Horizon.
Foundation es un aspecto clásico y limpio de Discourse, mientras que Horizon ofrece un diseño más moderno con múltiples paletas de colores entre las que elegir (como Horizon, Royal, Clover, Lily, Violet y Marigold, cada una con variantes claras y oscuras).
Predeterminado
y Oscuro
Digamos que eso no es suficiente para ti y quieres MÁS. Bueno, puedes instalar temas adicionales bastante fácilmente. Aquí tienes algunos ejemplos de temas gratuitos disponibles aquí en Meta.
Diseño de lista de temas “minimalista” personal de Sam
Como puedes ver, tu sitio puede tener un aspecto drásticamente diferente según el tema que selecciones; sin embargo, eso no es todo. Además de los temas, Discourse también admite componentes de temas.
Componentes de temas
Utilizamos la frase “componente de tema” para describir paquetes que están más orientados a personalizar un aspecto específico de Discourse. Debido a su enfoque limitado, los componentes de temas son casi siempre compatibles entre sí. Esto significa que puedes tener varios componentes de temas funcionando al mismo tiempo bajo cualquier tema. Puedes pensar en los componentes de temas como aplicaciones en tu teléfono.
Como siempre, los ejemplos son la mejor manera de describir algo, así que aquí tienes algunos ejemplos de componentes de temas disponibles aquí en Meta:
Banners de categoría de Discourse
Este componente de tema toma los detalles existentes de tus categorías, incluido el nombre, la descripción y el color, y genera un banner en la parte superior de las páginas de categoría relevantes.
Componente de tema de encabezado de marca
Este componente de tema añade un encabezado superior adicional para la marca con tu logotipo, enlaces de navegación e iconos de redes sociales tanto para vistas móviles como de escritorio. El logotipo de la marca puede ser una imagen o texto.
Como puedes ver, los componentes de temas tienen un enfoque mucho más limitado. Por lo tanto, en la mayoría de los casos son compatibles entre sí. Ahora tienes una idea general de lo que son los temas y los componentes de temas de Discourse. Profundicemos un poco más.
Interfaz de temas de Discourse
Veamos la interfaz para los temas. Ve a your.site.com/admin/customize/themes y deberías ver algo así:
Esta es la interfaz de tema predeterminada en Discourse. Puedes hacer varias cosas aquí:
- Establecer el tema activo predeterminado
- Elegir qué temas están disponibles para tus usuarios
- Crear nuevos temas y componentes de temas
- Importar nuevos temas y componentes de temas
- Añadir componentes de temas a un tema
- Modificar esquemas de color
- Cambiar la configuración del tema
- Previsualizar un tema
Repasemos esto uno por uno.
Establecer el tema activo predeterminado
La pequeña marca de verificación junto al nombre del tema predeterminado indica que este es el tema activo en tu sitio.
Ahora cambiemos el tema activo a Oscuro. Haz clic en el tema Oscuro y deberías ver esto:
El tema activo en tu sitio se establecerá en Oscuro. Esto significa que todos los que visiten tu sitio verán esto:
Y la marca de verificación se moverá entonces para estar junto al nombre del tema Oscuro, indicando que es el tema activo.
Elegir qué temas están disponibles para tus usuarios
Es agradable poder establecer un tema para tu sitio, pero ¿sabes qué es mejor? Dejar que tus usuarios decidan. Discourse te permite ofrecer diferentes temas a tus usuarios, permitiéndoles establecer el tema según sus preferencias. Su elección está limitada a su propia cuenta y no afectará a tu elección de tema activo ni a las elecciones de los demás usuarios.
Por ejemplo, puedes establecer el tema activo como el tema predeterminado (claro) pero ofrecer el tema oscuro como una opción. Intentémoslo ahora. En la interfaz de temas.
Todos los temas activos que tengas, ya sea el tema predeterminado establecido en tu sitio o cualquier tema que hayas marcado como seleccionable por el usuario, se mostrarán aquí:
Sin embargo, solo el tema predeterminado tendrá la marca de verificación verde.
Ahora, intentemos hacer que el tema Rojo sea seleccionable por el usuario, por ejemplo.
Todo lo que necesitas hacer es hacer clic en él y luego marcar la casilla que dice “Los usuarios pueden seleccionar el tema”.
¡Eso es todo! Notarás que automáticamente se mueve de la lista de temas inactivos a la lista de temas activos.
Y tus usuarios podrán seleccionar el tema que prefieran yendo a
your.site.com/my/preferences/interface
Crear nuevos temas y componentes de temas
Para crear un nuevo tema o componente de tema, haz clic en cualquiera de los dos botones “Instalar”.
Luego aparecerá un cuadro de diálogo. Selecciona la opción “Crear nuevo” en el menú de la izquierda. Deberás proporcionar un nombre para lo que quieres crear y decidir si es un tema o un componente de tema.
Hemos cubierto en parte los conceptos básicos de lo que son los temas y los componentes de temas. Si lo recuerdas, un componente de tema suele estar enfocado en modificar un área de Discourse. Mientras que un tema generalmente cubre varias cosas. También debes tener en cuenta que un tema puede tener cualquier número de componentes de temas bajo él, mientras que un componente de tema no puede. No te preocupes por esto por ahora, una explicación más detallada de esta relación seguirá más adelante.
Ahora, digamos que has decidido el nombre y has decidido hacerlo un tema. Bueno, una vez que pulses el botón “Crear”, el tema se creará y podrás:
- Cambiar el nombre del tema / componente de tema
- Establecer o cambiar un esquema de color para el tema
- Añadir html / css / js al tema / componente de tema
- Añadir archivos o subidas al tema
- Añadir componentes hijos a tu tema
Las personalizaciones específicas están fuera del alcance de esta guía, así que me detendré aquí en este punto.
La interfaz para añadir html / css / js se ve así (una vez que haces clic en el punto #3 anterior):
Importar nuevos temas y componentes de temas
Ya tenemos una guía sobre cómo importar temas, pero la incluyo aquí ya que esta guía pretende cubrir todos los conceptos básicos.
Para importar un tema o componente de tema, haz clic en cualquiera de los dos botones “Instalar”.
La sección “Populares” te permitirá previsualizar/instalar desde una lista de nuestros temas y componentes más populares.
También puedes importar archivos de tema desde tu dispositivo o a través del enlace del repositorio de temas. El enlace del repositorio para cada tema es proporcionado por el autor en el tema correspondiente. Una vez que importes un tema, todo lo que discutimos anteriormente se aplicará a él. Puedes establecerlo como predeterminado, hacerlo seleccionable por el usuario, etc.
Si importas un componente de tema, también puedes añadirlo a cualquiera de tus temas. Esto se cubre en detalle en la siguiente sección.
Añadir componentes de temas a un tema
Digamos que te gusta el componente de tema Banners de categoría de Discourse y quieres usarlo. Procederías de la siguiente manera:
- importar el tema desde el repositorio como discutimos anteriormente
- añadirlo como un componente de tema a tus temas activos / seleccionables por el usuario
Puedes hacerlo así:
Después de importar el componente, ve al tema al que quieres añadirlo y busca la sección “Componentes incluidos”.
Esta lista mostrará todos los componentes de temas instalados. Desde allí puedes añadir componentes de temas al tema. Añadir el componente de tema Versatile Banner se vería así:
Existe una opción similar, “Incluir componente en estos temas”, desde la página de un componente individual. Esto te permite añadir un componente a varios temas a la vez.
Básicamente eso es todo. Los banners de categoría de Discourse ahora son un componente activo del tema predeterminado. Si también quieres que se añada al tema Oscuro, repetirías el proceso de añadir el componente de tema para el tema Oscuro.
Si has establecido el tema Oscuro como seleccionable por el usuario y también has añadido el componente de tema Banners de categoría de Discourse a él, los usuarios que seleccionen el tema Oscuro como su tema activo también obtendrán el componente de tema Banners de categoría de Discourse, ya que es un “tema hijo” del tema Oscuro.
Puedes tener un número ilimitado de componentes de temas bajo un tema y, como discutimos anteriormente, suelen ser compatibles entre sí. Así que puedes hacer algo como esto:
Y todos esos componentes estarían activos en el tema predeterminado al mismo tiempo.
Modificar esquemas de color
Un esquema de color es una paleta de colores que eliges para generar el color de los elementos en un tema. No entraré en muchos detalles aquí, pero te mostraré cómo usar los esquemas de color.
Navega a your.site.com/admin/customize/colors y verás:
Desde aquí puedes editar esquemas de color o crear nuevos. Para editar un esquema de color, haz clic en él y cambia los colores a tu gusto.
Para crear un nuevo esquema de color, haz clic aquí.
Una vez que hayas terminado de cambiar los colores, es hora de establecer el esquema de color como activo en tus temas activos o seleccionables por el usuario. Para hacerlo, ve a la página del tema y busca aquí.
Configuración del tema
Los temas de Discourse pueden tener configuración. Esta configuración está diseñada para ser una forma fácil de configurar un tema o componente de tema según tus necesidades. Por ejemplo, el tema Estilos de botones de Discourse tiene algunas configuraciones para permitir una personalización fácil de cómo se ven los botones simplemente cambiando algunos valores a tu gusto.
No todos los temas / componentes de temas tienen configuración, pero para aquellos que la tienen, siempre aparecerán aquí. La configuración generalmente incluirá instrucciones proporcionadas por el autor que te ayudarán a determinar qué cambios deben realizarse.
Previsualizar un tema
A veces necesitas ver cómo se ve un tema en tu sitio antes de aplicarlo. Discourse ofrece una forma fácil de previsualizar temas sin establecerlos como activos.
Mientras estés en la página de un tema, haz clic aquí.
y se abrirá una nueva pestaña con una vista previa en vivo de cómo se vería el tema en tu sitio. Puedes navegar a diferentes páginas y ver cómo se ve todo.
La mejor parte de previsualizar un tema es que puedes probar cambios en vivo sin causar ningún problema en tu sitio en caso de que algo salga mal.
Información adicional
Modo seguro
Discourse tiene una forma integrada de omitir el tema activo actual en caso de que algo salga mal. Por ejemplo, un error de JavaScript en el código de un componente puede hacer que tu sitio no funcione correctamente. Para omitir el tema activo actual, simplemente visita:
your.site.com/safe-mode
Verás entonces:
Desde allí puedes desactivar el tema activo actual, navegar a la página del tema y solucionar el problema o desactivar el tema permanentemente.
Obtener nuevos temas
La forma más directa de encontrar nuevos temas y componentes de temas es revisar la categoría #theme aquí en Meta.
Lectura adicional
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
Si tienes alguna pregunta, no dudes en preguntar.