Introdução aos temas

Um tema é um pacote independente e portátil de ativos de desenvolvedor, projetado para trabalhar em conjunto, a fim de permitir uma experiência flexível de edição de conteúdo. Esses ativos podem incluir modelos, módulos, arquivos CSS, arquivos JavaScript, imagens e muito mais. Os temas permitem que os desenvolvedores criem um conjunto de campos de tema, semelhantes a campos de módulo, nos quais os criadores de conteúdo podem controlar estilos globais de site sem precisar editar o CSS.

Você pode usar o HubL para acessar os valores dos campos de tema em todo o CSS do tema. Os criadores de conteúdo podem usar o editor de temas para modificar os campos de tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.

Este documento explica como criar seu primeiro tema de acordo com o HubSpot CMS Boilerplate. Para obter mais informações sobre temas, consulte a documentação de referência para temas.

Execute hs create website-theme my-website-theme para criar um diretório my-website-theme preenchido com arquivos do Boilerplate de temas do CMS.

Execute hs upload my-website-theme my-website-theme. Isso fará o upload do boilerplate para o gerenciador de design da sua conta, em uma pasta intitulada my-website-theme.

Para criar uma página do tema carregado:

• Na sua conta da HubSpot, acesse Marketing > Site > Páginas do site.
• No canto superior direito, clique em Criar, em seguida, selecione Página do site. 
• Na caixa de diálogo, selecione o domínio no qual a página será publicada e insira um nome de página. Em seguida, clique em Criar página.

• Na tela de seleção de modelos, os modelos do seu tema ativo serão exibidos na parte superior da página.
  • Se você não selecionou um tema ativo, passe o cursor do mouse sobre o Boilerplate de temas do CMS e clique em Definir como tema ativo. 
  • Se já tiver definido um tema ativo, selecione o novo tema, clicando no menu suspenso do Seletor de temas e selecionando Alterar tema. Em seguida, passe o cursor do mouse sobre o Boilerplate de temas do CMS e clique em Definir como tema ativo. Na próxima tela, selecione um modelo.

Você será encaminhado ao editor de páginas, onde poderá editar os campos de tema.

• Na barra lateral esquerda do editor de páginas, clique na guia Temas.
• Na guia Temas, clique em Editar configurações do tema. Aqui, você pode modificar as configurações de tema existentes. Publicar as alterações nas configurações do tema atualizará os estilos em suas páginas usando esse tema que foi atualizado. 

Retorne ao seu terminal e execute hs watch my-website-theme my-website-theme. Esse comando monitora o diretório local e carrega automaticamente as seguintes alterações nos arquivos salvos na sua conta da HubSpot.

Agora que estamos ouvindo as alterações locais, adicione um novo campo de tema:

• Abra o arquivo fields.json no editor. Este arquivo controla os campos disponíveis na barra lateral do editor de temas. Vamos adicionar um novo campo para especificar a altura do rodapé.
• Perto da parte inferior do arquivo, localize o grupo de footer. 
• Copie o código abaixo e cole o JSON no arquivo acima do primeiro item na matriz secundária do grupo de rodapé. 

•  Salve o fields.json e atualize o visualizador de temas no HubSpot. O novo campo deve ser exibido na barra lateral esquerda.

• No editor de código, abra o arquivo theme-overrides.css. Em seguida, localize o seletor de css para o .footer. Agora vamos adicionar uma altura mínima para esse seletor.
• Para acessar um valor em um tema, use o objeto theme. Por exemplo, você usaria {{ theme.footer.height }} para acessar o valor de altura definido no campo de altura.
• Substitua a instrução .footer em theme-overrides.css pelo seguinte:

• Salve theme-overrides.css para fazer o upload na sua conta da HubSpot.

Retorne ao editor de temas e atualize a página para ver o novo campo exibido no rodapé. Atualize o valor da altura para que ele seja refletido imediatamente na visualização. Pode ser útil definir uma cor de fundo para o rodapé, para que você possa ver a alteração com mais facilidade.

Agora que você criou e atualizou o seu tema, crie mais campos de tema e personalize-os para os seus projetos. Para obter mais opções de personalização, confira a visão geral dos temas. Ao criar seu tema, pode ser útil visualizar as práticas recomendadas para otimizar sites no HubSpot CMS. 

O HubSpot tem vários temas padrão fornecidos com o CMS Hub. Esses temas estão disponíveis para visualização, clonagem e atualização, para que você saiba como usar um tema em um cenário do mundo real.

Depois de mexer com os temas, saiba como criar seu primeiro módulo personalizado.