Este é um curso intensivo sobre os conceitos básicos de temas do Discourse. O público-alvo é qualquer pessoa que não esteja familiarizada com temas do Discourse. Se você já utilizou temas ou componentes de tema do Discourse, provavelmente este guia não é algo que você precise ler.
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 pelos temas.
Temas
Em geral, os temas não são compatíveis entre si, pois são essencialmente designs independentes 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 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 oferece um design mais moderno com várias paletas de cores para escolher (como Horizon, Royal, Clover, Lily, Violet e Marigold — cada um com variantes claras e escuras).
Foundation
e Horizon
Digamos que isso não seja suficiente para você e você queira MAIS. Bem, você pode instalar temas adicionais com relativa facilidade. Aqui estão alguns exemplos de temas gratuitos disponíveis aqui no Meta.
Design pessoal “minimalista” de lista de tópicos do Sam
Como você pode ver, seu site pode parecer drasticamente diferente dependendo do tema que você selecionar; no entanto, essa não é a única opção. Além dos temas, o Discourse também suporta componentes de tema.
Componentes de Tema
Usamos a expressão “componente de tema” para descrever pacotes que são mais voltados para personalizar um aspecto específico do Discourse. Devido ao seu foco restrito, os componentes de tema são quase sempre compatíveis entre si. Isso significa que você pode ter vários componentes de tema ativos ao mesmo tempo sob qualquer tema. Você pode pensar nos componentes de tema como aplicativos no seu celular.
Como sempre, 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:
Banners de Categoria do Discourse
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 relevantes da categoria.
Componente de tema de cabeçalho de marca
Este componente de tema adiciona um cabeçalho extra no topo para branding com seu logotipo, links de navegação e ícones sociais para visualizações móveis e 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. Como tal, eles são compatíveis entre si na maioria dos casos. Agora você tem uma ideia geral do que são temas e componentes de tema do Discourse. Vamos aprofundar um pouco mais.
Interface de Temas do Discourse
Vamos olhar a interface para temas. Acesse your.site.com/admin/customize/themes e você deve ver algo como isso:
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 deles.
Definir o tema ativo padrão
Você pode ver um indicador mostrando que um tema está definido como padrão:
Agora vamos alterar o tema ativo para Horizon. Você pode fazer isso pelo botão de menu … ou clicando no nome do tema e selecionando a caixa de seleção na página de configurações:
O tema ativo no seu site será definido como Horizon. Isso significa que todos que visitarem seu site verão isso:
Escolher quais temas disponibilizar para seus usuários
É legal poder definir um tema para seu site, mas você sabe o que é ainda 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. Sua escolha é limitada à sua própria conta e não afetará sua escolha de tema ativo ou as escolhas dos outros usuários.
Por exemplo, você pode definir o tema ativo como o tema padrão (Horizon), mas oferecer o tema Foundation como uma opção. Vamos tentar fazer isso agora na interface de temas.
Tudo o que você precisa fazer é clicar no botão de menu … e, em seguida, selecionar “Permitir que os usuários selecionem”
É isso! Ele agora receberá um indicador “selecionável pelo usuário”
e seus usuários poderão selecionar o tema que preferirem acessando
your.site.com/my/preferences/interface
Criar novos temas e componentes de tema
Para criar um novo tema ou componente de tema, clique no botão “Instalar”
Você verá uma caixa de diálogo. Selecione a opção “Criar novo” no menu. Você precisará fornecer um nome para o que deseja criar e decidir se é um tema ou um componente de tema.
Cobrimos parcialmente os conceitos básicos do que são temas e componentes de tema. Se você se lembrar, um componente de tema geralmente se concentra em modificar uma área específica do Discourse. Já um tema geralmente abrange várias coisas. Você também deve observar que um tema pode ter qualquer número de componentes de tema associados a ele, enquanto um componente de tema não pode. Não se preocupe com isso agora; uma explicação mais detalhada dessa relação será fornecida mais tarde.
Agora, digamos que você decidiu o nome e optou 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 componentes filhos ao seu tema
- Adicionar html / css / js ao tema / componente de tema
- Adicionar arquivos ou uploads ao tema
Personalizações específicas estão fora do escopo deste guia, então pararei aqui neste ponto.
A interface para adicionar html / css / js parece com isso (após clicar em #4 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 conceitos básicos.
Para importar um tema ou componente de tema, clique no botão “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 de um link do repositório de temas. O link do repositório para cada tema é fornecido pelo autor no tópico do tema. Assim que você 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, e assim por diante.
Se você importar um componente de tema, também poderá adicioná-lo a qualquer um dos seus temas. Isso é abordado em detalhes na próxima seção.
Adicionar componentes de tema a um tema
Digamos que você goste do componente de tema de banners de categoria do Discourse e queira usá-lo. Você procederia da seguinte forma:
- importe o tema do repositório, como discutimos acima
- adicione-o como um componente de tema aos seus temas ativos / selecionáveis pelo usuário
Você pode fazer isso da seguinte forma:
Após 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 Homepage Feature 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 só vez.
É basicamente isso. O Homepage Feature agora é um componente ativo do tema padrão. Se você também quiser que ele seja adicionado a outro tema, repetiria o processo de adição do componente de tema.
Se você definiu o tema Foundation como selecionável pelo usuário e adicionou o componente de tema Homepage Feature a ele também, os usuários que selecionarem o tema Foundation como seu tema ativo também receberão o componente de tema Homepage Feature, já que ele é um “subtema” do tema Foundation.
Você pode ter um número ilimitado de componentes de tema sob um tema e, como discutimos anteriormente, eles geralmente são compatíveis entre si. Então, você pode fazer algo como isso:
E todos aqueles componentes estariam ativos no tema 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é your.site.com/admin/config/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 ao seu gosto.
Para criar um novo esquema de cores, clique aqui.
Assim que terminar de alterar as cores, é hora de definir o esquema de cores como ativo em seus temas ativos ou selecionáveis pelo usuário. Para 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 componente de tema Homepage Feature tem algumas configurações para permitir o controle de quais tópicos são em destaque:
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 incluirão instruções fornecidas pelo autor que ajudam a determinar quais alterações precisam ser feitas.
Visualizar 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.
Uma nova aba será aberta com uma pré-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 de visualizar um tema é que você pode testar alterações ao vivo sem causar problemas no seu site, caso algo dê errado.
Informações adicionais
Modo seguro
O Discourse possui uma maneira integrada de 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, basta visitar
your.site.com/safe-mode
Você verá então:
a partir daí, você pode desativar o tema ativo atual, navegar para a página do tema e corrigir o problema ou desativar o tema permanentemente.
Obtendo 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.