O Canvas fornece um modelo flexível que permite criar temas personalizados com menos código. Ajuste facilmente propriedades e valores de configuração para adaptar um tema às suas necessidades.
Exemplos de visualizações
O modelo base mantém os valores padrão e permanece neutro no design.
Sincronize o tema com sua instância do Discourse usando o gem discourse_theme.
Vá para o backend de administração e ajuste manualmente estas configurações do componente de tema: Banners de Categoria
Plugin outlet → above-main-container Banners de Tag
Mostrar abaixo do cabeçalho do site → desmarcar
Mostrar acima do contêiner principal → marcar
Edite scss/properties.scss para definir valores para propriedades personalizadas
Edite about.json para adicionar ativos, esquemas de cores e mais componentes de tema
Uma olhada mais de perto na configuração
O modelo Canvas Theme apenas estende o esqueleto do tema padrão, agrupando alguns componentes de tema e adicionando alguns arquivos de estilo prontos. As funcionalidades reais são tratadas por um componente de tema separado, Canvas Settings. Este componente serve duas funções:
Ele atribui propriedades personalizadas que podem ser usadas com o modelo. Uma tabela listando todas as propriedades pode ser encontrada no arquivo Readme do modelo.
Essa configuração dividida permite que você crie um tema usando o modelo Canvas, enquanto ainda se beneficia das correções e atualizações contínuas fornecidas por meio do componente.
Exemplos de temas
Você pode revisar o código das visualizações de exemplo compartilhadas ou instalá-las como seu tema inicial nestes repositórios:
As configurações estão no componente de tema instalado como Configurações do Canvas. Talvez seja um pouco confuso que as configurações sempre sejam chamadas de Configurações do Tema na interface, também nos componentes de tema.
O banner da categoria também é exibido no mesmo lugar, acima da barra lateral. Os tópicos mais recentes e os tópicos em alta são exibidos corretamente na coluna principal.
Imagino que não seja um objetivo do tema cobrir totalmente a interface de administração, no entanto, as paletas de cores clara e escura do Editor fazem com que a barra lateral de administração pareça bem diferente. Fiquei curioso se é possível harmonizar com a barra lateral não administrativa.
O tema destina-se a mostrar banners ao lado da barra lateral, usando o outletabove-main-container. O componente Extra-Banners usa esse outlet por padrão, mas os dois componentes para banners de Categoria e Tag são renderizados por padrão abaixo do cabeçalho. Eu não gostaria de fazer um fork desses componentes apenas para definir um outlet padrão diferente. É por isso que coloquei estas instruções:
Mas se isso for fácil de perder, talvez haja uma maneira melhor de colocar?
Sim, isso é fácil o suficiente e parece uma boa abordagem para este tema. Acabei de adicionar um commit!
Ah sim, vejo como chegamos aqui. Não queremos necessariamente alterar os padrões nos componentes de banners de categoria/tag, nem queremos criar forks deles. Difícil de consertar, vamos deixar como está por enquanto e ver se outros encontram o mesmo problema.
A alteração na barra lateral do administrador já parece boa, obrigado!
Essas instruções poderiam ser um pouco mais detalhadas? Não é possível simplesmente instalar pela interface de administração? Obrigado
EDIT: Instalei pela interface de administração e parece estar funcionando, exceto que não parece haver lugar para editar scss agora.
EDIT: Deixe pra lá, vejo que isso provavelmente é esperado e você está mostrando para editar os arquivos do tema diretamente. Gostaria de saber se isso poderia estar no roteiro para acontecer pela interface de administração? Por exemplo, ter um editor de variáveis assim como você tem um editor de configurações.
Não sei qual é o roteiro principal, mas uma coisa que você poderia fazer agora mesmo é criar um novo componente de tema diretamente na interface do administrador:
E então declarar propriedades personalizadas no arquivo CSS dele. Você pode procurar propriedades no arquivo Readme. Ou copiar o conteúdo de properties.scss do repositório do tema.
No entanto, se você quiser ser capaz de sincronizar alterações, acredito que você precisaria fazer um pull para um clone local e, em seguida, fazer um push a partir dele. Algo como isto:
Não vejo um sinal de mais no celular no GitHub. Talvez precise tentar as linhas de comando quando estiver em casa.
Tudo o que vejo no GitHub no painel é a opção de criar um novo repositório, mas nenhuma opção de reivindicar. Estou em uma conta gratuita, então não tenho certeza se isso pode ter algo a ver com isso.
É limitado em comparação com a declaração de variáveis personalizadas na folha de estilos. Mas permite que você experimente alguns visuais diferentes. Curioso para saber se isso funciona!
Ajustei os estilos CSS para a barra lateral sólida, a rolagem deve funcionar novamente!
No entanto, a barra lateral sólida é apenas uma das opções no componente Estilos que mencionei na postagem acima. Se você quiser ajustar mais estilos (como espaçar o menu da barra lateral), você precisará seguir a abordagem explicada acima em Uso e Uma olhada mais de perto na Configuração: Use sua própria folha de estilos com propriedades CSS personalizadas – neste caso, seria -d-sidebar-row-height.
Montei um novo tema de exemplo baseado neste template. Como o nome sugere, este é uma homenagem ao tema Central original!
Eu adorei o layout e o estilo visual do Central e tenho empacotado algumas de suas funcionalidades em componentes independentes, como o Menu Personalizado do Usuário e vários blocos na barra lateral.
Percebi que com a barra lateral e alguns estilos, este template na verdade te leva um bom caminho em direção ao visual e à sensação do tema original.
De qualquer forma, não pretendo reconstruir totalmente o tema Central… mas ainda posso experimentar um estilo dedicado de lista de tópicos no futuro. Se você estiver curioso e quiser dar uma olhada, o tema também está ativo aqui: https://central.kostka.studio
Obrigado por compartilhar este modelo! A flexibilidade com os componentes e o design limpo tornam muito fácil de personalizar. Ansioso para experimentá-lo na minha própria instância.
| Resumo | Inicie rapidamente o design do seu tema com um modelo de tema preparado.
|Público| Novos desenvolvedores que desejam começar a criar temas para o Discourse. Desenvolvedores experientes que desejam usar um modelo pronto. |
|Repositório| Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
|Guia de Instalação|Como instalar um tema ou componente de tema|
|Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse|
Um enorme agradecimento ao Discourse por patrocinar o desenvolvimento deste projeto!
!