Temas

Last updated:

Um tema é um conjunto transferível e contido de recursos para desenvolvedores, projetado para permitir uma experiência flexível de edição de conteúdo.  Você pode desenvolver temas localmente com a CLI do HubSpot usando suas ferramentas, tecnologias e fluxos de trabalho favoritos. Os temas e todos os seus arquivos também podem ser transferidos entre ambientes e contas. Para ver uma apresentação em vídeo sobre como começar a desenvolver temas, assista ao vídeo do HubSpot Academy abaixo:

Temas como um pacote

Os temas são um pacote que pode ser aplicado ao aplicativo HubSpot em vários locais para permitir uma experiência eficiente de criação de conteúdo. Os desenvolvedores podem usar temas para criar um sistema de design dentro do qual os criadores de conteúdo trabalharão. Qualquer nível de flexibilidade, ou de contenções, pode ser incorporado em um tema para atender às necessidades do seu negócio. 

Criação de página

Quando os criadores de conteúdo começam a criar novas páginas, eles são solicitados a selecionar um tema de partida para a página e o modelo dentro do tema a ser utilizado.

Seleção de um tema no HubSpot.A imagem de visualização do tema, assim como outras configurações, estão definidas no arquivo theme.json

Campos de tema

Os temas permitem aos desenvolvedores criar um conjunto de campos de tema, semelhantes aos Campos de módulo que, por sua vez, permitem aos criadores de conteúdo ajustar vários botões e mostradores projetados por um desenvolvedor para permitir o controle sobre o estilo global de um site sem a necessidade de editar o CSS. Os desenvolvedores usam o HubL para acessar os valores dos campos do tema em todo o CSS. Os criadores de conteúdo usam o Editor de tema para modificar os Campos do tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.

temas

Os campos são determinados pelo arquivo fields.json de um tema

Módulos do tema

Os módulos dentro de um tema devem ser concebidos especificamente para utilização dentro dos modelos desse tema. O editor de conteúdo destacará esses módulos de tema, tornando rápido e fácil para os criadores de conteúdo adicionar módulos às páginas que estão construindo que são projetados para funcionar bem no contexto daquela página. Os módulos padrão e o resto dos módulos na sua conta da HubSpot ainda estarão disponíveis.

Módulos em um tema

Estrutura de arquivos do tema

Um tema é um diretório único de arquivos. Você pode incluir arquivos HTML, CSS e Javascript, módulos e arquivos adicionais que podem ser organizados de qualquer forma dentro dos subdiretórios da pasta de temas principal. Dois arquivos JSON são necessários para criar um tema: theme.json e fields.json. Esses arquivos devem ser incluídos na pasta raiz do tema.

Para começar com um exemplo, consulte HubSpot CMS Boilerplate.

estrutura de arquivos do tema

No momento, os arquivos .json só podem ser criados e carregados em uma conta da HubSpot por meio das ferramentas de desenvolvimento local.

theme.json

O arquivo theme.json contém as informações de metadescrição do diretório do tema, como o rótulo legível do tema, captura de tela de visualização e várias configurações quanto ao comportamento do tema. O arquivo theme.json será parecido com o seguinte:

// theme.json { "label": "Cool Theme", "preview_path": "./templates/home-page.html", "screenshot_path":"./images/templates/homepage.jpg", "enable_domain_stylesheets": false, "version":"1.0", "author":{ "name":"Jon McLaren", "email":"noreply@hubspot.com", "url":"https://theme-provider.com/" }, "documentation_url":"https://theme-provider.com/cool-theme/documentation", "license":"./license.txt", "example_url":"https://theme-provider.com/cool-theme/demo", "is_available_for_new_content":true }
theme.json
ParameterTypeDescription
label
String

O rótulo legível do tema, utilizado em vários locais em que o tema é mostrado na aplicativo HubSpot, como a tela de seleção de modelos e o editor de temas. 

preview_path
String

Um caminho, relativo ou absoluto, para um modelo de arquivo no tema que deve ser o modelo padrão usado ao visualizar um tema no editor de tema. 

screenshot_path
String

Um caminho, relativo ou absoluto, para um arquivo de imagem que é usado para fornecer uma imagem da aparência do tema em vários locais em que é aplicado, por exemplo, a tela de seleção do modelo. 

enable_domain_stylesheets
Boolean

Ativar ou desativar as folhas de estilo anexadas aos domínios nas Configurações do site que são incluídas nos modelos do tema. O valor padrão é false.

version
String

Número inteiro da versão que oferece suporte a versões .

Author
object

Objeto para fornecer informações sobre você como provedor do tema.

name
O nome do provedor.
email
O endereço de e-mail de suporte do provedor.
url
O site do provedor.
documentation_url
String

O link para a documentação do tema.

example_url
String

O link de exemplo dinâmico do tema.

license
String

Um identificador SPDX válido ou o caminho relativo à licença dentro do seu tema.

Essa licença determina os tipos de uso e modificação que são permitidos pelo criador do tema. É útil ao enviar para o marketplace.

is_available_for_new_content
Boolean

Booleano que determina se um tema aparece na página do criador de conteúdo para seleção. O valor por padrão é true.

fields.json

O arquivo fields.json controla os campos e grupos de campos disponíveis no editor de temas, incluindo campos de estilo. Os campos que você decide incluir dependem de quanto controle você quer que os criadores de conteúdo tenham no editor de páginas. O número de campos disponíveis para os temas é mais limitado do que para os módulos, pois os campos de tema são melhores para opções de estilo, enquanto que o conteúdo global é melhor para o conteúdo do tema.

Por exemplo, em vez de adicionar um campo de texto ao field.json do tema para a tagline do site, ele deve ser adicionado como um módulo global para que os criadores de conteúdo possam atualizar a tagline a partir do editor de páginas, não do editor de temas.

Os campos que estão disponíveis para uso nos temas são:

Para ver a documentação completa sobre as opções possíveis para os campos de tema, consulte a documentação dos campos de módulo e tema

Usar valores de campo de tema

Para acessar os valores dos campos, use notação de pontos e adicione o prefixo ao caminho do valor em fields.json com o tema. Você pode usar um valor de campos de tema em suas folhas de estilo usando uma sintaxe como {{ theme.path.to.value }}. Por exemplo, o campo de fonte descrito abaixo:

// fields.json [{ "type": "group", "name": "typography", "label": "Typography", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] }]

É referenciado no CSS com:

h1 { font-size: {{ theme.typography.h1_font.size }}px; font-family: {{ theme.typography.h1_font.font }}; color: {{ theme.typography.h1_font.color }}; text-decoration: {{ theme.typography.h1_font.styles.text-decoration }}; font-style: {{ theme.typography.h1_font.styles.font-style }}; font-weight: {{ theme.typography.h1_font.styles.font-weight }}; }

Visualizar temas

Para desenvolvedores, às vezes você precisa ser capaz de testar se seus campos de tema estão funcionando corretamente, mas sem impactar as páginas reais. É aí que entra o modo de teste do tema.

Modo de teste

O modo de teste fornece um ambiente seguro para poder brincar com os campos do seu tema e garantir que funcionem como o esperado. A interface se parece exatamente com a visualização/edição do tema que os criadores de conteúdo podem ver; porém, você pode ter certeza de que não está alterando as configurações do seu site real. Para proteger contra atualizações acidentais nas configurações do tema, a publicação é bloqueada no modo de teste. Quando você está no modo de teste, ?testmode=true é mostrado na barra de endereço e um ícone de modo de teste é exibido no cabeçalho do editor de temas.

Teste do tema/modo de visualização

Como ativar o modo de teste do tema

  1. No Gerenciador de design, selecione o tema no Finder.
  2. Um botão de visualização será exibido. Selecione-o e agora você estará no modo de teste para as configurações do seu tema.

Outro método é abrir as configurações do tema diretamente do editor de páginas e, em seguida, adicionar o parâmetro de consulta ?testmode=true à URL na barra de endereço.


Esse artigo foi útil?
Este formulário é para comentários sobre nossos documentos de desenvolvimento. Se tiver comentários sobre o produto da HubSpot, em vez disso compartilhe sua opinião no Fórum de Ideias.