Última modificação: 28 de agosto de 2025
Os modelos HTML + HubL oferecem maior controle aos desenvolvedores do que os modelos de arrastar e soltar do gerenciador de design visual. Os desenvolvedores, por sua vez, podem fornecer melhores experiências para os criadores de conteúdo por meio da funcionalidade de arrastar e soltar — que só é possível com os modelos HTML + HubL.
image1-2
O modelo acima é o modelo base.html, incluído no boilerplate do HubSpot CMS, que é uma ótima maneira de começar a desenvolver com o HubSpot.

​
Familiaridade e ferramentas

Como os modelos HTML + HubL são arquivos codificados, você pode usar suas ferramentas preferidas para editá-los localmente. É recomendado usar suas próprias ferramentas de desenvolvimento local da HubSpot para que você possa fazer upload, buscar, monitorar, criar e gerenciar com segurança arquivos no sistema de arquivos do desenvolvedor, bem como no gerenciador de arquivos. Criar modelos HTML + HubL com o HubSpot é como usar outra linguagem de modelos que você pode ter usado antes. A principal diferença é que a HubSpot determina as melhores maneiras para oferecer a melhor experiência para os criadores de conteúdo, além de reduzir muito do trabalho de manutenção e otimização de desempenho por parte dos desenvolvedores. Por exemplo, se você quiser carregar o arquivo CSS em uma página para determinados módulos, em vez de usar <link rel="stylesheet" type="text/css" href="https://br.developers.hubspot.com/docstheme.css">, você deve incluir a folha de estilo por meio de css_assets no arquivo meta.json do módulo. Isso permite que o HubSpot carregue condicionalmente o CSS somente quando o módulo estiver presente em uma página, minimizando a quantidade de CSS desnecessário carregado. Saiba mais sobre como otimizar o fluxo de trabalho de desenvolvimento do HubSpot.

​
Anotações do modelo

As anotações de modelo, incluídas na parte superior de um modelo, definem configurações de modelo importantes, como o tipo de modelo e se ele pode ser usado para criar novo conteúdo. As anotações do modelo podem ser alteradas a qualquer momento durante o processo de desenvolvimento. Saiba mais sobre as anotações de modelo disponíveis. 
<!--
  templateType: page
  isAvailableForNewContent: false
  enableDomainStylesheets: false
  label: Homepage
  screenshotPath: ../images/template-previews/home.png
-->

<!doctype html>

<html>
  ...
</html>
AnotaçãoTipoDescrição
templateTypeStringEspecifica o tipo de modelo de um arquivo. Os valores incluem:
isAvailableForNewContentStringEspecifica se um modelo está disponível para seleção no processo de criação de conteúdo. Os valores incluem: true, false.Modelos definidos como false não precisam incluir as variáveis obrigatórias. Os modelos do tipo page que são definidos como false também podem ser usados como parciais padrão.
enableDomainStylesheetsStringEspecifica se o modelo deve carregar folhas de estilo do domínio. Os valores incluem: true, false.
LabelStringDescrição simples do modelo, exibida na tela de seleção do modelo. Por exemplo, About Page, Homepage, Pricing.
screenshotPathStringA captura de tela a ser exibida quando um criador de conteúdo estiver selecionando um modelo. Essa captura de tela deve facilitar a diferenciação entre os seus modelos.

​
Inclusões em cabeçalho e rodapé

Os modelos do HubSpot exigem a presença de duas tags, a menos que o arquivo seja um parcial de modelo. As duas tags são:
  • {{ standard_header_includes }} - Usada para adicionar o CSS necessário de forma combinada e minificada.
  • {{ standard_footer_includes }} - Usada para adicionar javascript ao final de uma página de forma dinâmica, para itens como o script de rastreamento do HubSpot e os módulos.
Essas tags devem estar presentes no modelo ou em seus parciais secundários para serem publicados e utilizados.

​
Parciais

Os parciais de modelos são arquivos HTML + HubL que podem ser incluídos em outros arquivos codificados. As parciais permitem adotar uma abordagem mais modular, compartilhando a marcação entre vários modelos. Por exemplo, um cabeçalho pode ser transformado em parcial para que você possa incluí-lo facilmente como um componente sem a necessidade de codificá-lo novamente.

​
Parciais padrão

Uma parcial padrão é um modelo ou componente reutilizável com conteúdo que pode ser editado em páginas individuais. Isso permite que os criadores de conteúdo alterem o conteúdo conforme necessário, diferente das parciais globais que sempre compartilham o conteúdo. Por exemplo, o código a seguir extrairia o módulo da barra lateral para outro arquivo de modelo. As parciais padrão devem incluir as seguintes anotações na parte superior do arquivo de modelo:
  • templateType: page
  • isAvailableForNewContent: false
{% include "../partial/sidebar.html" %}

​
Parciais globais

Uma parcial global é um tipo de conteúdo global que pode ser usado em vários modelos com o conteúdo compartilhado em todas as instâncias da parcial. As parciais globais são frequentemente usadas para cabeçalhos e rodapés. Veja um exemplo no cabeçalho e rodapé do HubSpot CMS Boilerplate. Essas parciais são então chamadas no base.html usando a tag global_partial. As parciais globais devem incluir a anotação templateType: global_partial na parte superior do arquivo. 
{% global_partial path="../partials/header.html" %}

​
Blocos e extensões

Ao criar modelos complexos, você pode criar blocos compartimentados que estendem um modelo principal. Por exemplo, você pode criar um modelo principal que inclui as variáveis obrigatórias standard_header_includes e standard_footer_includes. Dentro desse modelo, você define um bloco exclusivo usando a seguinte sintaxe, em que o body é um nome exclusivo: 
{% block body %}
<!-- Content to display -->
{% endblock body %}
Em seguida, no modelo secundário, você pode estender o modelo principal e inserir mais conteúdo no bloco do body. 
{% extends "./layouts/base.html" %}
{% block body %}
<h3>Page Content</h3>
<ul>
  <li>Bullet 1<li>
  <li>Bullet 2<li>
  <li>Bullet 3<li>
</ul>
{% endblock %}
Esse método é usado no modelo base.html do boilerplate do HubSpot CMS, que é estendido pelos outros modelos na pasta de modelos.

​
Grupos globais

Os grupos globais criados usando o construtor de modelos de arrastar e soltar no Gerenciador de design também podem ser incluídos. A sintaxe é mostrada abaixo: 
{% include "/path/to/global_header.template.json" %}