> ## Documentation Index > Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Modelos HTML + HubL > Os modelos do HubSpot CMS são escritos em HTML e HubL. Esses modelos são capazes de conter regiões amigáveis para que os criadores de conteúdo possam editar por conta própria. Os modelos HTML + HubL podem ser usados para [cada tipo de modelo](https://br.developers.hubspot.com/docs/guides/cms/content/templates/overview#template-types) no HubSpot CMS. Esses modelos são arquivos .html que suportam a [linguagem de modelos HubL](/cms/reference/hubl/operators-and-expression-tests). Como esses modelos codificados suportam HubL, a melhor experiência de visualização é usar a [visualização do modelo no Gerenciador de design ](https://knowledge.hubspot.com/pt/website-pages/understand-a-hubspot-template-setup)ou visualizar as páginas em uma conta de ambiente de testes. Os modelos HTML + HubL podem conter [parciais](#partials), que podem ser usadas para separar fragmentos de código comumente usados, tais como um cabeçalho ou rodapé. Os modelos HTML + HubL oferecem maior controle aos desenvolvedores do que os [modelos de arrastar e soltar do gerenciador de design visual](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates). Os desenvolvedores, por sua vez, podem fornecer melhores experiências para os criadores de conteúdo por meio da [funcionalidade de arrastar e soltar](/cms/reference/hubl/tags/dnd-areas) — que só é possível com os modelos HTML + HubL. image1-2 O modelo acima é o [modelo base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), incluído no [boilerplate do HubSpot CMS](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate), 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](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli) da HubSpot para que você possa [fazer upload](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#upload), [buscar](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#fetch), [monitorar](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#watch), [criar](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#create) 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 ``, você deve incluir a folha de estilo por meio de `css_assets` no [arquivo meta.json do módulo](/cms/reference/modules/configuration#adding-css-and-javascript-dependencies). 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](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow). ## 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. ```html theme={null} ... ``` | Anotação | Tipo | Descrição | | -------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `templateType` | String | Especifica o tipo de modelo de um arquivo. Os valores incluem:
| | `isAvailableForNewContent` | String | Especifica 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](/cms/reference/hubl/variables#required-page-template-variables). Os modelos do tipo `page` que são definidos como false também podem ser usados como [parciais padrão](#partials). | | `enableDomainStylesheets` | String | Especifica se o modelo deve carregar [folhas de estilo do domínio](https://knowledge.hubspot.com/pt/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level). Os valores incluem: `true`, `false`. | | `Label` | String | Descrição simples do modelo, exibida na tela de seleção do modelo. Por exemplo, `About Page`, `Homepage`, `Pricing`. | | `screenshotPath` | String | A 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](#partials) 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](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) na parte superior do arquivo de modelo: * `templateType: page` * `isAvailableForNewContent: false` ```hubl theme={null} {% include "../partial/sidebar.html" %} ``` ### Parciais globais Uma parcial global é um tipo de [conteúdo global](/cms/start-building/building-blocks/global-content#global-partials) 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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html) e [rodapé](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html) do HubSpot CMS Boilerplate. Essas parciais são então chamadas no [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) usando a tag `global_partial`. As parciais globais devem incluir a [anotação](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: global_partial` na parte superior do arquivo. ```hubl theme={null} {% 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`](/cms/reference/hubl/variables#required-page-template-variables) e [`standard_footer_includes`](/cms/reference/hubl/variables#required-page-template-variables). Dentro desse modelo, você define um bloco exclusivo usando a seguinte sintaxe, em que o `body` é um nome exclusivo: ```hubl theme={null} {% block body %} {% endblock body %} ``` Em seguida, no modelo secundário, você pode estender o modelo principal e inserir mais conteúdo no bloco do `body`. ```hubl theme={null} {% extends "./layouts/base.html" %} {% block body %}

Page Content

{% endblock %} ``` Esse método é usado no modelo [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) do boilerplate do HubSpot CMS, que é estendido pelos outros modelos na [pasta de modelos](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates). ### Grupos globais Os [grupos globais](https://knowledge.hubspot.com/pt/design-manager/use-global-content-across-multiple-templates) criados usando o construtor de modelos de arrastar e soltar no Gerenciador de design também podem ser incluídos. A sintaxe é mostrada abaixo: ```hubl theme={null} {% include "/path/to/global_header.template.json" %} ```