Este é um curso intensivo sobre os fundamentos dos temas do Discourse. O público-alvo são todos que não estão familiarizados com os temas do Discourse. Se você já utilizou temas ou componentes de tema do Discourse, provavelmente não precisa ler este guia.
O que são temas e componentes de tema?
Um tema ou componente de tema é um conjunto de arquivos agrupados, projetados para modificar visualmente o Discourse ou adicionar novos recursos.
Vamos começar com os temas.
Temas
De modo geral, os temas não são compatíveis entre si, pois são essencialmente designs independentes e diferentes. Pense nos temas como skins ou como lançadores (launchers) no Android. Você pode ter vários lançadores instalados, mas não pode usar dois deles ao mesmo tempo. Sua instalação padrão do Discourse vem com dois temas: Foundation e Horizon.
O Foundation oferece uma aparência clássica e limpa do Discourse, enquanto o Horizon apresenta um design mais moderno com várias paletas de cores para escolha (como Horizon, Royal, Clover, Lily, Violet e Marigold — cada uma com variantes clara e escura).
Padrão
e Escuro
Digamos que isso não seja suficiente para você e você queira MAIS. Bem, você pode instalar temas adicionais de forma bastante simples. Aqui estão alguns exemplos de temas gratuitos disponíveis aqui no Meta.
Design personalizado de “lista minimalista” de tópicos do Sam
Como você pode ver, o visual do seu site pode mudar drasticamente com base no tema selecionado; no entanto, isso não é tudo. Além dos temas, o Discourse também oferece suporte a componentes de tema.
Componentes de Tema
Usamos a expressão “componente de tema” para descrever pacotes mais voltados para a personalização de um aspecto específico do Discourse. Devido ao seu foco mais restrito, os componentes de tema são quase sempre compatíveis entre si. Isso significa que você pode ter vários componentes de tema em execução simultaneamente sob qualquer tema. Você pode pensar nos componentes de tema como aplicativos no seu celular.
Como sempre, os exemplos são a melhor maneira de descrever algo, então aqui estão alguns exemplos de componentes de tema disponíveis aqui no Meta.
Este componente de tema pega os detalhes existentes da sua categoria, incluindo nome, descrição e cor, e gera um banner no topo das páginas de categoria relevantes.
Este componente de tema adiciona um cabeçalho superior extra para branding com seu logotipo, links de navegação e ícones sociais, tanto para visualizações em dispositivos móveis quanto em desktop. O logotipo da marca pode ser uma imagem ou texto.
Como você pode ver, os componentes de tema têm um foco muito mais restrito. Por isso, eles são compatíveis entre si na maioria dos casos. Agora você tem uma ideia geral do que são os temas e componentes de tema do Discourse. Vamos aprofundar um pouco mais.
Interface do Tema do Discourse
Vamos observar a interface dos temas. Acesse seusite.com/admin/customize/themes e você deverá ver algo parecido com isto:
Esta é a interface padrão de temas no Discourse. Você pode fazer várias coisas aqui:
- Definir o tema ativo padrão
- Escolher quais temas disponibilizar para seus usuários
- Criar novos temas e componentes de tema
- Importar novos temas e componentes de tema
- Adicionar componentes de tema a um tema
- Modificar esquemas de cores
- Alterar configurações do tema
- Visualizar um tema
Vamos passar por cada um desses itens.
Definir o tema ativo padrão
A pequena marca de verificação ao lado do nome do tema padrão indica que este é o tema ativo no seu site.
Agora, vamos alterar o tema ativo para Escuro. Clique no tema Escuro e você deverá ver o seguinte:
O tema ativo do seu site será definido como Escuro. Isso significa que todos que visitarem o seu site verão o seguinte:
E a marca de verificação passará a ficar ao lado do nome do tema Escuro, indicando que ele é o tema ativo.
Escolher quais temas disponibilizar para seus usuários
É bom poder definir um tema para o seu site, mas sabe o que é melhor? Permitir que seus usuários decidam. O Discourse permite que você ofereça diferentes temas aos seus usuários, permitindo que eles configurem o tema de acordo com suas preferências. A escolha deles se limita à própria conta e não afetará sua escolha de tema ativo nem as escolhas dos outros usuários.
Por exemplo, você pode definir o tema ativo como o tema padrão (claro), mas oferecer o tema escuro como uma opção. Vamos tentar fazer isso agora. Na interface de temas.
Todos os temas ativos que você possui, seja o tema padrão definido no seu site ou qualquer tema que você tenha marcado como selecionável pelo usuário, aparecerão aqui:
No entanto, apenas o tema padrão terá a marca de verificação verde.
Agora, vamos tentar tornar o tema Vermelho selecionável pelo usuário, por exemplo.
Tudo o que você precisa fazer é clicar nele e depois marcar a caixa que diz “O tema pode ser selecionado pelos usuários”.
Pronto! Você notará que ele será movido automaticamente da lista de temas inativos para a lista de temas ativos.
e seus usuários poderão selecionar qualquer tema de sua preferência acessando
seusite.com/my/preferences/interface
Criar novos temas e componentes de tema
Para criar um novo tema ou componente de tema, clique em um dos dois botões “Instalar”.
Em seguida, uma caixa de diálogo será exibida. Selecione a opção “Criar novo” no menu à esquerda. Você precisará fornecer um nome para o que deseja criar e decidir se será um tema ou um componente de tema.
Já cobrimos um pouco do básico sobre o que são temas e componentes de tema. Se você se lembra, um componente de tema geralmente é focado na modificação de uma área do Discourse. Enquanto um tema geralmente abrange várias coisas. Você também deve notar que um tema pode ter qualquer número de componentes de tema sob ele, enquanto um componente de tema não pode. Não se preocupe com isso agora; uma explicação mais detalhada sobre esse relacionamento será apresentada mais tarde.
Agora, digamos que você tenha decidido o nome e optado por criar um tema. Bem, assim que você clicar no botão “Criar”, o tema será criado e você poderá então:
- Alterar o nome do tema / componente de tema
- Definir ou alterar um esquema de cores para o tema
- Adicionar html / css / js ao tema / componente de tema
- Adicionar arquivos ou uploads ao tema
- Adicionar componentes filhos ao seu tema
Personalizações específicas estão fora do escopo deste guia, então vou parar por aqui neste ponto.
A interface para adicionar html / css / js se parece com esta (após clicar no item 3 acima)
Importar novos temas e componentes de tema
Já temos um guia sobre como importar temas, mas estou incluindo como fazer isso aqui, já que este guia deve cobrir todos os fundamentos.
Para importar um tema ou componente de tema, clique em um dos dois botões “Instalar”.
A seção “Populares” permitirá que você visualize/instale a partir de uma lista dos nossos temas e componentes mais populares.
Você também pode importar arquivos de tema do seu dispositivo ou por meio do link do repositório de temas. O link do repositório para cada tema é fornecido pelo autor no tópico do tema. Depois de importar um tema, todas as coisas que discutimos anteriormente se aplicarão a ele. Você pode defini-lo como padrão, torná-lo selecionável pelo usuário, etc.
Se você importar um componente de tema, também poderá adicioná-lo a qualquer um dos seus temas. Isso é coberto em detalhes na próxima seção.
Adicionar componentes de tema a um tema
Digamos que você goste do componente de tema “Discourse Category Banners” e queira usá-lo. Você procederia da seguinte forma:
- Importe o tema do repositório, como discutimos acima
- Adicione-o como componente de tema aos seus temas ativos / selecionáveis pelo usuário
Você pode fazer isso assim:
Depois de importar o componente, vá para o tema ao qual deseja adicioná-lo e procure a seção “Componentes incluídos”.
Esta lista mostrará todos os componentes de tema instalados. A partir daí, você pode adicionar componentes de tema ao tema. Adicionar o componente de tema Versatile Banner seria assim:
Uma opção semelhante, “Incluir componente nestes temas”, existe na página de um componente individual. Isso permite que você adicione um componente a vários temas de uma vez.
É basicamente isso. O Discourse Category Banners agora é um componente ativo do tema padrão. Se você também quiser que ele seja adicionado ao tema Escuro, você repetiria o processo de adição do componente de tema para o tema Escuro.
Se você tiver definido o tema Escuro como selecionável pelo usuário e adicionado o componente de tema Discourse Category Banners a ele também, os usuários que selecionarem o tema Escuro como seu tema ativo também receberão o componente de tema Discourse Category Banners, já que ele é um “tema filho” do tema Escuro.
Você pode ter um número ilimitado de componentes de tema sob um tema e, como discutimos anteriormente, eles são geralmente compatíveis entre si. Então você pode fazer algo assim:
E todos esses componentes estariam ativos no tema padrão ao mesmo tempo.
Modificar esquemas de cores
Um esquema de cores é uma paleta de cores que você escolhe para gerar as cores dos elementos em um tema. Não entrarei em muitos detalhes aqui, mas mostrarei como usar esquemas de cores.
Navegue até seusite.com/admin/customize/colors e você verá:
A partir daqui, você pode editar esquemas de cores ou criar novos. Para editar um esquema de cores, clique nele e altere as cores do seu gosto.
Para criar um novo esquema de cores, clique aqui.
Depois de terminar de alterar as cores, é hora de definir o esquema de cores como ativo nos seus temas ativos ou selecionáveis pelo usuário. Para fazer isso, vá para a página do tema e procure aqui:
Configurações do tema
Os temas do Discourse podem ter configurações. Essas configurações são projetadas para ser uma maneira fácil de você configurar um tema ou componente de tema de acordo com suas necessidades. Por exemplo, o tema Discourse Button Styles possui algumas configurações para permitir uma personalização fácil da aparência dos botões, simplesmente alterando alguns valores do seu gosto.
Nem todos os temas / componentes de tema têm configurações, mas para aqueles que têm, elas sempre aparecerão aqui. As configurações geralmente incluem instruções fornecidas pelo autor que ajudam você a determinar quais alterações precisam ser feitas.
Visualização de um tema
Às vezes, você precisa ver como um tema fica no seu site antes de aplicá-lo. O Discourse oferece uma maneira fácil de visualizar temas sem defini-los como ativos.
Enquanto estiver na página de um tema, clique aqui:
e uma nova aba será aberta com uma visualização ao vivo de como o tema ficaria no seu site. Você pode navegar por diferentes páginas e ver como tudo fica.
A melhor parte sobre a visualização de um tema é que você pode testar alterações ao vivo sem causar nenhum problema no seu site, caso algo dê errado.
Informações adicionais
Modo seguro
O Discourse possui um recurso integrado para ignorar o tema ativo atual caso algo dê errado. Por exemplo, um erro de javascript no código de um componente pode fazer com que seu site não funcione corretamente. Para ignorar o tema ativo atual, simplesmente acesse:
seusite.com/safe-mode
Você então verá:
A partir daí, você pode desativar o tema ativo atual, navegar até a página do tema e corrigir o problema ou desativar o tema permanentemente.
Obter novos temas
A maneira mais direta de encontrar novos temas e componentes de tema é verificar a categoria Customization > Theme aqui no Meta.
Leitura 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!
Se você tiver alguma dúvida, não hesite em perguntar.