Este es un curso intensivo sobre los conceptos básicos de los temas de Discourse. El público objetivo es cualquier persona que no esté familiarizada con los temas de Discourse. Si ya has utilizado temas de Discourse o componentes de temas, probablemente esta guía no sea algo que necesites leer.
¿Qué son los temas y los componentes de temas?
Un tema o componente de tema es un conjunto de archivos empaquetados juntos diseñados para modificar visualmente Discourse o para agregar nuevas funciones.
Comencemos con los temas.
Temas
En general, los temas no se supone que sean compatibles entre sí porque son esencialmente diseños independientes diferentes. Piensa en los temas como en pieles, o como en lanzadores en Android. Puedes tener múltiples lanzadores instalados, pero no puedes usar dos de ellos al mismo tiempo. Tu instalación predeterminada de Discourse viene con dos temas: Foundation y Horizon.
Foundation es un aspecto limpio y clásico de Discourse, mientras que Horizon ofrece un diseño más moderno con múltiples paletas de colores para elegir (como Horizon, Royal, Clover, Lily, Violet y Marigold, cada uno con variantes claras y oscuras).
Foundation
y Horizon
Digamos que eso no es suficiente para ti y quieres MÁS. Bueno, puedes instalar temas adicionales bastante fácilmente. Aquí hay un par de ejemplos de temas gratuitos disponibles aquí en Meta.
Diseño personal “minimalista” de lista de temas de Sam
Como puedes ver, tu sitio puede verse dramáticamente diferente según el tema que selecciones; sin embargo, eso no es el final. Además de los temas, Discourse también admite componentes de temas.
Componentes de temas
Usamos la frase “componente de tema” para describir paquetes que están más orientados a personalizar un aspecto de Discourse. Debido a su enfoque estrecho, los componentes de temas casi siempre son compatibles entre sí. Esto significa que puedes tener múltiples componentes de temas ejecutándose al mismo tiempo bajo cualquier tema. Puedes pensar en los componentes de temas como en aplicaciones en tu teléfono.
Como siempre, los ejemplos son la mejor manera de describir algo, así que aquí hay algunos ejemplos de componentes de temas disponibles aquí en Meta.
Banners de categorías de Discourse
Este componente de tema toma los detalles existentes de tu categoría, incluyendo nombre, descripción y color, y genera un banner en la parte superior de las páginas de la categoría relevante.
Componente de tema de encabezado de marca
Este componente de tema agrega un encabezado superior adicional para la marca con tu logotipo, enlaces de navegación e iconos sociales para vistas móviles y 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 estrecho. Como tal, son compatibles entre sí en la mayoría de los casos. Ahora tienes una idea general de qué son los temas de Discourse y los componentes de temas. 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 como esto:
Esta es la interfaz de temas predeterminada en Discourse. Puedes hacer varias cosas aquí:
- Establecer el tema activo predeterminado
- Elegir qué temas hacer disponibles para tus usuarios
- Crear nuevos temas y componentes de temas
- Importar nuevos temas y componentes de temas
- Agregar componentes de temas a un tema
- Modificar esquemas de colores
- Cambiar configuraciones de temas
- Previsualizar un tema
Pasemos por estos uno por uno.
Establecer el tema activo predeterminado
Puedes ver una insignia que indica que un tema está establecido como predeterminado:
Ahora cambiemos el tema activo a Horizon. Puedes hacer esto desde el botón de menú … o haciendo clic en el nombre del tema y seleccionando la casilla de verificación en la página de configuración:
El tema activo en tu sitio se establecerá en Horizon. Esto significa que todos los que visiten tu sitio verán esto:
Elegir qué temas hacer disponibles para tus usuarios
Es agradable poder establecer un tema para tu sitio, pero ¿sabes qué es aún mejor? Permitir 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 se limita a su propia cuenta y no afectará tu elección de tema activo ni las elecciones de otros usuarios.
Por ejemplo, puedes establecer el tema activo en el tema predeterminado (Horizon) pero ofrecer el tema Foundation como una opción. Intentemos hacer eso ahora en la interfaz de temas.
Todo lo que necesitas hacer es hacer clic en el botón de menú … y luego seleccionar “Permitir que los usuarios seleccionen”.
¡Eso es todo! Ahora obtendrá una insignia de “selección por usuario”.
y tus usuarios podrán seleccionar cualquier 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 el botón “Instalar”.
Luego obtendrás un cuadro de diálogo. Selecciona la opción “Crear nuevo” en el menú. Necesitarás proporcionar un nombre para lo que quieras crear y decidir si es un tema o un componente de tema.
Hemos cubierto un poco los conceptos básicos de qué son los temas y los componentes de temas. Si te acuerdas, un componente de tema generalmente se enfoca en modificar un área de Discourse. Mientras que un tema generalmente cubre varias cosas. También debes notar que un tema puede tener cualquier número de componentes de tema bajo él, mientras que un componente de tema no puede. No te estreses 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 decidiste hacerlo un tema. Bueno, una vez que presiones el botón “Crear”, el tema se creará y luego podrás:
- Cambiar el nombre del tema / componente de tema
- Establecer o cambiar un esquema de colores para el tema
- Agregar componentes secundarios a tu tema
- Agregar html / css / js al tema / componente de tema
- Agregar archivos o cargas al 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 agregar html / css / js se ve así (una vez que haces clic en #4 arriba)
Importar nuevos temas y componentes de temas
Ya tenemos una guía sobre cómo importar temas, pero estoy incluyendo cómo hacer eso aquí ya que esta guía se supone que cubre todos los conceptos básicos.
Para importar un tema o componente de tema, haz clic en el botón “Instalar”.
La sección “Popular” 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 del tema. Una vez que importes un tema, todas las cosas que discutimos anteriormente se aplicarán a él. Puedes establecerlo como predeterminado, hacerlo seleccionable por el usuario, etc.
Si importas un componente de tema, también puedes agregarlo a cualquiera de tus temas. Esto se cubre en detalle en la siguiente sección.
Agregar componentes de temas a un tema
Digamos que te gusta el componente de tema de banners de categorías de Discourse y quieres usarlo. Procederías de la siguiente manera:
- importa el tema del repositorio como discutimos arriba
- agrégalo 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 quieras agregarlo y busca la sección “Componentes incluidos”.
Esta lista mostrará todos los componentes de temas instalados. Desde allí puedes agregar componentes de temas al tema. Agregar el componente Homepage Feature 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 agregar un componente a múltiples temas a la vez.
Eso es prácticamente todo. Homepage Feature ahora es un componente activo del tema predeterminado. Si también quieres que se agregue a otro tema, repetirías el proceso de agregar el componente de tema.
Si has establecido el tema Foundation como seleccionable por el usuario y has agregado el componente de tema Homepage Feature a él también, los usuarios que seleccionen el tema Foundation como su tema activo también obtendrán el componente de tema Homepage Feature, ya que es un “tema secundario” del tema Foundation.
Puedes tener un número ilimitado de componentes de tema bajo un tema y, como discutimos anteriormente, generalmente son compatibles entre sí. Así que puedes hacer algo como esto:
Y todos esos componentes estarían activos en el tema al mismo tiempo.
Modificar esquemas de colores
Un esquema de colores 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 esquemas de colores.
Navega a your.site.com/admin/config/colors y verás:
Desde aquí puedes editar esquemas de colores o crear nuevos. Para editar un esquema de colores, haz clic en él y cambia los colores a tu gusto.
Para crear un nuevo esquema de colores, haz clic aquí.
Una vez que termines de cambiar los colores, ahora es el momento de establecer el esquema de colores como activo en cualquiera de tus temas activos o seleccionables por el usuario. Para hacerlo, ve a la página del tema y busca aquí:
Configuraciones de temas
Los temas de Discourse pueden tener configuraciones. Estas configuraciones están diseñadas para ser una forma fácil de configurar un tema o componente de tema según tus necesidades. Por ejemplo, el componente de tema Homepage Feature tiene algunas configuraciones para permitir el control de qué temas se destacan:
No todos los temas / componentes de tema tienen configuraciones, pero para aquellos que las tienen, siempre aparecerán aquí. Las configuraciones generalmente incluirán instrucciones proporcionadas por el autor que te ayudan a determinar qué cambios necesitan hacerse.
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. Lo mejor de previsualizar un tema es que puedes probar cambios en vivo sin causar problemas 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
Luego verás:
Desde allí puedes deshabilitar el tema activo actual, navegar a la página del tema y either corregir el problema o deshabilitar el tema permanentemente.
Obtener nuevos temas
La forma más directa de encontrar nuevos temas y componentes de temas es verificar la categoría Customization > 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.