Modelos HTML + HubL

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.

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ção	Tipo	Descrição
`templateType`	String	Especifica o tipo de modelo de um arquivo. Os valores incluem: Modelos padrão: página e-mail blog_listing blog_post blog Parciais:global_partial Modelos do sistema: error_page password_prompt_page membership_login_page membership_register_page membership_reset_page membership_reset_request_page email_subscription_preferences_page email_backup_unsubscribe_page email_subscriptions_confirmation_page search_results_page
`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.

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" %}

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

Familiaridade e ferramentas

Anotações do modelo

Inclusões em cabeçalho e rodapé

Parciais

Parciais padrão

Parciais globais

Blocos e extensões

Grupos globais

​Familiaridade e ferramentas

​Anotações do modelo

​Inclusões em cabeçalho e rodapé

​Parciais

​Parciais padrão

​Parciais globais

​Blocos e extensões

​Grupos globais

Familiaridade e ferramentas

Anotações do modelo

Inclusões em cabeçalho e rodapé

Parciais

Parciais padrão

Parciais globais

Blocos e extensões

Grupos globais