Às vezes, você pode querer personalizar um tema do Discourse, mas descobre que não há uma seção “Código personalizado” com um botão “Editar código” disponível. Isso geralmente acontece com temas remotos (temas instalados de uma fonte externa) e os temas pré-instalados (Horizon e Foundation). Veja como você ainda pode adicionar suas personalizações:
Entendendo a limitação
Para temas pré-instalados, você verá um banner informando:
Este tema é pré-instalado e não pode ser excluído ou personalizado.
Para temas remotos, você normalmente verá uma mensagem como:
Se você quiser editar este tema, você deve enviar uma alteração em seu repositório
Hospedado pelo Discourse? Então você pode ver: “A edição de temas remotos está desativada no Discourse. Por favor, entre em contato conosco se precisar de assistência para migrar temas remotos personalizados para um tema local.”
Hospedado pelo Discourse? Então você pode ver: “A edição de temas remotos está desativada no Discourse. Por favor, Opções de personalização
- Enviar alterações para o repositório principal: Se suas alterações puderem beneficiar outros, considere propô-las aos criadores originais do tema. Isso requer familiaridade com git e GitHub.
- Criar uma cópia (fork) do repositório: Crie sua própria versão do repositório de código do tema, adicione suas personalizações e use sua versão copiada. Este método requer conhecimento técnico e significa que você precisará manter as atualizações por conta própria.
- Criar um componente personalizado: Este método permite que você adicione personalizações sem modificar o tema original. É a abordagem recomendada para a maioria dos administradores e será o foco neste guia.
Criando um componente personalizado
Siga estas etapas para criar um componente personalizado para as personalizações do seu tema:
-
Vá para o painel de administração do seu site e navegue até
/admin/config/customize/components -
Clique no botão “Instalar” no canto superior direito
-
Selecione “+ Criar novo”, insira um nome para o seu componente (por exemplo, “Meu componente personalizado”), escolha “Componente” como tipo e clique em “Criar”
-
Encontre o componente recém-criado na lista de componentes e clique no botão “Editar”
-
Adicione o componente aos temas que você deseja personalizar
Não se esqueça de salvar clicando no sinal verde de visto -
Clique em “Editar código”
-
Adicione suas personalizações nas seções apropriadas (CSS,
<head>, etc.)
-
Clique em “Salvar” para aplicar suas alterações
Observações importantes
- Suas personalizações serão aplicadas sobre o tema existente.
- Se o tema base for atualizado, seu componente personalizado ainda aplicará suas alterações, o que às vezes pode levar a resultados inesperados.
- Sempre teste suas personalizações completamente após as atualizações do tema.
Seguindo estas etapas, você pode adicionar CSS personalizado, HTML ou outras modificações ao seu tema Discourse sem editar diretamente os arquivos de tema remotos. Este método é adequado para a maioria dos administradores que buscam fazer pequenas personalizações na aparência ou funcionalidade do site.