Modelos HTML + HubL
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.
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.
| 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: Os modelos definidos como |
enableDomainStylesheets
| String | Especifica se o modelo deve carregar folhas de estilo do domínio. Os valores incluem: |
Label
| String | Descrição simples do modelo, exibida na tela de seleção do modelo. Por exemplo, |
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 uma partial de modelo. As duas tags são:
{{ standard_header_includes }}- Usada para adicionar o CSS necessário de foma 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 suas partials secundárias para serem publicadas e utilizadas.
As partials 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: pageisAvailableForNewContent: false
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 o templateType: global_partial da anotação na parte superior do arquivo.
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 standard_header_includes e standard_footer_includes obrigatórias. Dentro desse modelo, você define um bloco exclusivo usando a seguinte sintaxe, em que o body é um nome exclusivo:
Em seguida, no modelo secundário, você pode estender o modelo principal e inserir mais conteúdo no bloco do body.
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:
Agradecemos pelos seus comentários. Eles são muito importantes para nós.