Introducción al Theme Creator y la CLI de temas

En este tema te guiaremos paso a paso sobre cómo utilizar la Theme CLI junto con nuestro sitio Theme Creator para desarrollar un tema y previsualizar tus cambios en un sitio Discourse en vivo.

  1. Regístrate aquí en Meta si aún no lo has hecho

  2. Inicia sesión en Theme Creator

  3. Instala la Theme CLI siguiendo las instrucciones aquí

  4. Crea un nuevo tema en Theme Creator:

  5. Haz clic en avanzado, luego en editar localmente y en obtener clave de API.

    Copia la clave de API generada.

  1. Vuelve a tu línea de comandos y escribe discourse_theme download example-folder, donde example-folder es la carpeta donde se almacenará tu tema localmente. Sigue las indicaciones.

    • Introduce https://discourse.theme-creator.io como URL raíz de tu sitio Discourse.

    • Introduce tu clave de API del paso anterior cuando se te solicite.

    • Continúa siguiendo las indicaciones y selecciona el tema que creaste en el paso 4.

    • Escribe sí cuando se te pregunte si deseas comenzar a observar tu tema.

  2. Ahora la carpeta local de tu tema se está observando en busca de cambios, los cuales se cargarán automáticamente en Theme Creator. Puedes abrir una previsualización de tu tema haciendo clic en previsualizar en la configuración de tu tema en Theme Creator.

  3. Para dejar de observar los cambios, presiona ctrl + c en tu ventana de línea de comandos. Para volver a observar los cambios, escribe discourse_theme watch example-theme.

:tada: ¡Ahora tienes un directorio de tema local que puedes editar y ver tus cambios en vivo!

Para una mirada detallada sobre cómo están estructurados los temas y lo que puedes hacer, revisa nuestra Developing Discourse Themes & Theme Components


Este documento está bajo control de versiones - sugiere cambios en github.

42 Me gusta

Hola. Estoy intentando seguir estas instrucciones pero sigo chocando contra un muro. Después de añadir la clave API veo lo siguiente:

/usr/local/lib/ruby/gems/3.2.0/gems/discourse_theme-0.7.3/lib/discourse_theme/cli.rb:100:in `run': undefined method `exists?' for Dir:Class (NoMethodError)

        FileUtils.mkdir_p dir unless Dir.exists?(dir)
                                        ^^^^^^^
Did you mean?  exist?
        from /usr/local/lib/ruby/gems/3.2.0/gems/discourse_theme-0.7.3/bin/discourse_theme:6:in `<top (required)>'
        from /usr/local/lib/ruby/gems/3.2.0/bin/discourse_theme:25:in `load'
        from /usr/local/lib/ruby/gems/3.2.0/bin/discourse_theme:25:in `<main>'

¿Alguna idea de por qué?
Gracias de antemano.

1 me gusta

¡Hola!
Esta herramienta aún no es compatible con Ruby 3.2 debido a cambios en el lenguaje. Tenemos una solución en proceso, pero Ruby 3.1.x funciona mientras tanto.

6 Me gusta

Ah, eso explica las cosas.
Gracias :slight_smile:

1 me gusta

Esto ahora está arreglado: discourse_theme debería funcionar en Ruby 3.2.x a partir de la versión 0.7.4 de la gema en adelante :slight_smile:

3 Me gusta

Vaya, eso fue rápido :open_mouth:
Gracias. Logré que funcionara con la ayuda de mi jefe de línea, quien sugirió:

rbenv install 3.1.3
rbenv shell 3.1.3
gem install discourse_theme

Lo que en realidad no funcionó hasta que cerré la pestaña del terminal y la volví a abrir.

¿discourse_theme watch ya no recarga en vivo? Solía actualizar mi tema cuando lo guardaba, pero ahora tengo que actualizar mi pestaña manualmente. Nada en la consola que apunte a la razón.

1 me gusta

Hubo un cambio hace un tiempo

Quizás te interese Live Reload in Production

4 Me gusta

Estoy intentando entender cómo previsualizar correctamente mi tema en https://discourse.theme-creator.io/.

discourse_theme watch está funcionando y sincronizando mis cambios con la URL de previsualización. He creado la estructura básica de un tema donde he agregado color_schemes a about.json. Estos aparecen en el menú desplegable del tema en /me/theme. Sin embargo, no puedo seleccionar un esquema o paleta para verlo; en su lugar, me quedo atrapado con uno predeterminado llamado “Light” que no he especificado yo mismo.

Mis esquemas de color nombrados de mi about.json tampoco aparecen en /me/preferences/interface.

¿Qué estoy haciendo mal?

¡Gracias!