Os modelos HTML + HubL podem ser usados para cada tipo de modelo no HubSpot CMS. Esses modelos são arquivos .html que suportam a linguagem de modelos HubL. Como esses modelos codificados suportam HubL, a melhor experiência de visualização é usar a visualização do modelo no Gerenciador de design ou visualizar as páginas em uma conta de ambiente de testes. Os modelos HTML + HubL podem conter parciais, 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. 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.
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.
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="theme.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.
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
-->
<html>
...
</html>
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. Os modelos do tipo page que são definidos como false também podem ser usados como parciais padrão. |
enableDomainStylesheets | String | Especifica se o modelo deve carregar folhas de estilo do domínio. 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. |
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.
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.
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
xxxxxxxxxx
{% include "../partial/sidebar.html" %}
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.
xxxxxxxxxx
{% global_partial path="../partials/header.html" %}
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:
xxxxxxxxxx
{% 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
.
xxxxxxxxxx
{% 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.
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:
xxxxxxxxxx
{% include "/path/to/global_header.template.json" %}