Instale o aplicativo de console Theme CLI do Discourse para ajudar a criar temas

O discourse Discourse Theme CLI é um gem em Ruby que permite usar seu editor preferido ao desenvolver temas e componentes de tema para o Discourse. Conforme você salva os arquivos, o CLI atualiza o tema ou componente remoto e as alterações aparecerão em tempo real!

Instalação

Para experimentar, certifique-se de ter o Ruby 2.5 ou superior instalado.

Se você estiver no Windows, tem 2 opções:

Opção 1: Windows Subsystem for Linux.

O Windows 10 tem acesso a um ambiente Linux completo; você pode usá-lo para instalar o Ruby simplesmente com sudo apt-get install ruby, o que lhe dará o Ruby 2.3.

Opção 2: Versões antigas do Windows

Versões mais antigas do Windows não têm acesso ao WSL. Você pode instalar o Ruby facilmente com o Ruby Installer; escolha a versão recomendada e as configurações padrão para a instalação.

O Mac OS versão 10.13.3 vem com o Ruby 2.3 pré-instalado, não é necessário nada de especial. Se você estiver usando uma versão anterior do Mac OS, considere usar rvm, rbenv ou homebrew para instalar uma versão recente do Ruby.


Depois que o Ruby 2.2 ou posterior estiver em execução, abra um terminal ou shell de comandos e execute:

gem install discourse_theme

Depois de instalado, para saber mais sobre ele:

discourse_theme

Atualização

gem update discourse_theme

Recursos

O CLI fornece 3 funções principais:

discourse_theme new

Você pode usá-lo para criar rapidamente um novo tema com discourse_theme new SEU_NOME_DA_PASTA

discourse_theme watch

Você pode usá-lo para monitorar um tema e sincronizá-lo com um site do Discourse (com atualização em tempo real) usando discourse_theme watch SEU_NOME_DA_PASTA

Isso significa que você pode usar seu próprio editor para editar seu tema e o site será atualizado magicamente :unicorn: com as alterações!

discourse_theme download

Você pode baixar um tema existente do Discourse usando discourse_theme download SEU_NOME_DA_PASTA. Em seguida, você terá a opção de começar a “monitorar” imediatamente!

Credenciais

Você precisará gerar uma Chave de API. Vá para a área de administração e gere uma chave lá.

  • :exclamation: Selecione um “Nível de Usuário” de Single User ao gerar a chave, não All Users.
  • :exclamation: Certifique-se de marcar Global Key ou receberá erros 403 forbidden.

As credenciais são (opcionalmente) armazenadas em ~/.discourse_theme. As chaves de API são armazenadas por site, e a URL/theme_id para cada diretório também é rastreada. Se você precisar alterar suas configurações, basta adicionar --reset a qualquer comando e será solicitado a inserir todos os valores novamente.

Depoimentos

“Esta ferramenta é realmente um GEM!” @awole20
“Isso é muito, muito bom.” @awesomerobot
“Está funcionando :slight_smile: E é bem legal. Muito bom!” @angus
“OMG. É inacreditável.” @pfaffman


Este documento é controlado por versão - sugira alterações no github.

79 curtidas
Theme Creator, create and show themes without installing Discourse!
CSS Theme Contest (with Prizes!)
Customizing handlebars templates
Setting up a solid workflow for custom theme development
Theme Developer Quick Reference Guide
Structure of themes and theme components
Automating Discourse Plugin Setup with `create-discourse-plugin` gem
Developing Plugins Faster by separating the frontend into a theme component
Feedback on "on-discourse" javascript for setting up custom JS for each page?
Add settings to your Discourse theme
Get started with Theme Creator and the Theme CLI
Designer's Guide to getting started with themes in Discourse
Split up theme Javascript into multiple files
Updated Custom Header Icon: Post Data via URL
Theme Developer Tutorial: 2. Creating a remote theme
Developing Discourse Themes & Theme Components
Hiding GUI elements for new users (less overwhelming)
Add custom content that only appears on your homepage
Custom CSS/HTML
If you want to edit this theme, you must submit a change on its repository
Edit CSS/HTML editor cursor offset makes it unusable due to CSS font override
How "difficult" is modifying/extending Discourse for a backend dev
Exporting a Theme from Staging and Importing it to the Production portal
Using Plugin Outlet Connectors from a Theme or Plugin
Downloaded component installs fine, but does not once changed/re-zipped
What are the benefits of a dev environment?
3.2.0.beta2-dev (7019dbcfe1) does not load CSS from common.scss anymore
End-to-end system testing for themes and theme components
Different CSS changes for different color schemes
Need help integrating code wrote on Edittext to the Discourse
Need help integrating code wrote on Edittext to the Discourse
Remote themes not in database
How to easily edit my site remotely?
When to use a plugin vs theme component?
Discourse core is switching to pnpm for JS package management
Using the new custom-homepage feature
Focus the editor when title is pre-filled
Cannot put the template in the desired outlet
Is this the correct way to create a theme component?
Split up theme Javascript into multiple files
Canvas Theme Template
Getting error while uploading theme
[Zotero extension +] Firefox v116 on macOS broken Discourse?
Install Discourse for development using Docker
How to install plugins without using a third-party host?
How to add a custom button in user profile card?
Import site theme via console
How are theme setting fields created?
Customisability in discourse?
Discourse Theme CLI is the bomb
Discourse 2.0.0.beta5 Release Notes
How difficult would it be to make the Discourse UI more like Flarum?
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components
Import Error: about.json does not exist, or is invalid
How to Add Unique HTML Content Below Topic Body in discourse forum for Specific Topics
Reuse Discourse Hamburger Functionality
Themes - Add a description field
Create and share a font theme component
Customisability in discourse?
How to create a theme (if I am a pure end user)
Linting configuration
Linting configuration
Is it possible to use a local plugin directory with a docker install?
How to overrule a color variable for one theme only?
Can't customize text on custom button in template override using UI
Is it possible to use theme component from local folder (as plugin) - for local development?
Restrict editing of remote themes
When exporting a theme, I get a broken archive

Uploads via Admin >> Personalizar >> Temas desaparecem após a gravação de um tema observado.

Como incluímos ativos de imagem no tema para que eles não sejam eliminados após a gravação?

2 curtidas

Olá, bem-vindo!

Você precisa incluir os assets diretamente no seu componente de tema.
Na raiz, você cria um diretório assets.
Em seguida, você os declara em about.json

"assets": {
  "<seu_identificador>": "assets/<seu_nome_de_arquivo_de_asset>",
}

Você pode ver um exemplo aqui GitHub - MeghnaAJ/discourse-christmas-decorations.

3 curtidas

Um aviso rápido para desenvolvedores que usam esta ferramenta para gerar componentes de tema:
Você é encorajado a atualizá-la! :+1:

Um PR recente tornou o repositório discourse-theme-skeleton o modelo padrão. Ele fornecerá os arquivos de configuração mais recentes!

9 curtidas

Obrigado!

Seria ótimo adicionar uma seção de Atualização ao tópico…

É um --reset ou uma atualização do rubygem?

4 curtidas

Boa ideia! Adicionei uma seção de ‘atualização’ ao OP

gem update discourse_theme
5 curtidas

Para instalar a gem no WSL, tive que executar ambos os comandos:
sudo apt-get install ruby e sudo apt-get install ruby-dev.
Talvez isso possa ser adicionado às instruções de instalação.

Se você não instalar ruby-dev, você recebe um erro? Não deve ser necessário instalar ruby-dev, pois o ruby em si é suficiente.

4 curtidas

Tenho quase certeza de que recebi um erro que me instruiu a instalar ruby-dev, caso contrário, eu não saberia que o pacote existia.
Mas não consigo reproduzi-lo ao tentar reinstalar. Talvez eu tenha feito algo estranho da primeira vez.

2 curtidas

Hmm, isso é realmente estranho. Sinta-se à vontade para me informar se conseguir reproduzir o problema novamente.

2 curtidas

Atualizei meu servidor ontem para 3.5.0.beta9-dev e não consigo mais recarregar em tempo real com o gem do tema discourse desde então. O gem é a versão 2.1.6.

Não vejo nenhum erro ou nada do tipo, então queria perguntar primeiro se mais alguém tem o mesmo problema?

2 curtidas

Recarregamentos em tempo real de folhas de estilo foram desativados para instâncias de produção, pois estavam causando problemas ao atualizar temas e/ou o core do Discourse.

Fundamentalmente: alterações de folhas de estilo frequentemente estão ligadas a alterações em JS/HTML, então o carregamento em tempo real apenas para folhas de estilo é arriscado. Usuários acabam executando folhas de estilo ‘novas’ contra HTML ‘antigo’, o que pode levar a experiências muito estranhas.

O carregamento em tempo real ainda está habilitado para instâncias do Discourse em modo de desenvolvimento. Idealmente, você usaria isso para desenvolvimento em vez de um site de produção. Além do recarregamento da folha de estilo, o Ember em modo de desenvolvimento oferece mensagens de erro muito mais amigáveis do que o Ember em modo de produção.

4 curtidas

Essa é uma grande mudança. Fico surpreso que não tenha havido um anúncio. Eu estava desenvolvendo temas principalmente em sites de produção.

Uma configuração de site para obter o comportamento antigo seria legal.

6 curtidas

Concordo, isso me surpreendeu e não consegui encontrar este tópico atual, apesar de ter pesquisado, ou talvez eu tenha visto a data mais antiga do OP e o ignorado.

1 curtida

Uma postagem foi dividida em um novo tópico: Como recupero um tema anterior

Alguém pode enviar um print da seção de Apps nas preferências? Não consigo encontrá-la.

Para revogar o acesso desta chave, acesse a seção “Apps” nas suas preferências de usuário.

2 curtidas

Está em Segurança, na parte inferior (em Preferências)

Esse texto pode ser melhorado, por exemplo:

Para revogar o acesso desta chave, acesse a seção “Segurança” nas suas preferências de usuário, em “Aplicativos”.

1 curtida

Agora consigo ver. Talvez seja necessário atualizar a página para que apareça.

1 curtida