Visão geral da sintaxe do HubL
O CMS do HubSpot usa a HubSpot Markup Language, conhecida como HubL (pronuncia-se "Hubble"). O HubL é a extensão da HubSpot do Jinjava, um mecanismo de modelagem baseado em Jinja. O HubL usa uma quantidade razoável de marcação que é exclusiva da HubSpot e não suporta todos os recursos do Jinja.
Este artigo demonstra os conceitos básicos dos recursos e sintaxes do HubL.
Semelhante a outras linguagens de modelo comumente usadas, como o PHP, o HubL pode ser combinado ao HTML em arquivos de modelos codificados ou módulos de modelos do HubL. Para diferenciar onde o HubL começa e termina, você precisará aprender alguns símbolos importantes que atuam como delimitadores.
As instruções do HubL são usadas para criar módulos editáveis, definir lógica de modelo condicional, configurar loops, definir variáveis e muito mais. As instruções são delimitadas por {%. Elas não imprimem nada na página.
Expressões imprimem valores armazenados no contexto do modelo. As expressões são delimitadas por {{. Por exemplo, uma variável deve ser definida como uma expressão, e a expressão do HubL é usada para imprimir a variável.
O último tipo de delimitador que você pode encontrar ou decidir utilizar ao desenvolver com o HubL é um comentário do HubL. Os comentários são definidos por um {#.
Os módulos são as áreas dinâmicas de um modelo que podem ser personalizadas pelo usuário final no editor de conteúdo. Por exemplo, ao codificar um arquivo de modelo do zero, você adiciona módulos aos modelos usando as tags do HubL para fornecer aos criadores de conteúdo a capacidade de editar as áreas da página.
As tags dos módulos são constituídas pelos seguintes componentes:
- Tipo de módulo: especifica o módulo que deve ser renderizado. Consulte a página Tags suportadas pelo HubL para ver uma lista dos diferentes tipos de módulos disponíveis.
- Um nome exclusivo para esse módulo: dá ao módulo uma identidade exclusiva no contexto do modelo.
- Caminho: dependendo da tag, define a localização do módulo no gerenciador de design. O caminho dos módulos padrão do HubSpot deve sempre começar com @hubspot/ seguido do tipo de módulo. Veja o exemplo abaixo e a seção usar módulos na página de modelos para obter mais informações.
- Parâmetros: opcionalmente, especifique informações adicionais do módulo.
O exemplo acima é um módulo de texto com os parâmetros de rótulo e valor definidos. O rótulo define o texto de ajuda no editor e o valor define o texto padrão para aquele módulo. Confira o gif de amostra abaixo para ver como seria isso dentro do editor.
O HubL inclui muitas variáveis HubSpot predefinidas que imprimem valores úteis a partir do aplicativo. Além disso, você pode definir suas próprias variáveis em um modelo. No exemplo a seguir, uma variável chamada primaryColor é definida em uma instrução e depois impressa com uma expressão do HubL. Este exemplo combina a variável do HubL com CSS.
As macros do HubL permitem imprimir vários comandos com um valor dinâmico. Esta técnica revela-se útil quando você escreve os mesmos blocos de código básico repetidas vezes, mas só precisa alterar certos valores. No exemplo a seguir, uma macro é usada para imprimir uma propriedade de transição CSS3 que inclui todos os prefixos dos fornecedores. Você pode saber mais sobre macros aqui.
Os filtros podem ser adicionados ao HubL para transformar ou alterar o valor de uma variável de modelo. Um exemplo simples apresentado abaixo é a formatação de uma variável de data. Os filtros utilizam um | (símbolo de pipeline) e são aplicados sem espaços a uma variável.
No exemplo abaixo, suponha que um post no blog foi publicado no dia 29 de abril. A data de publicação do post é formatada com o filtro datetimeformat. Você pode ver a lista completa de filtros aqui.
Enquanto os filtros afetam a forma como as variáveis são renderizadas, as funções processam o valor e as informações da conta e as renderizam. Por exemplo, uma função pode ser usada para obter o número total de posts de um determinado blog ou para clarear/escurecer uma variável de cor em uma determinada quantidade.
O exemplo imprime o número total de posts de blog do site designers.hubspot.com/blog. Ele usa o parâmetro de ID do blog (disponível na URL do painel do blog) para especificar o blog que deve ser direcionado. Você pode ver a lista completa de funções aqui.
As instruções If permitem que você use lógica condicional para ditar como seu modelo renderiza a lógica condicional nas instruções do HubL para if, elif, else e endif. Uma instrução deve começar com if e terminar com endif.
O exemplo abaixo define um módulo de escolha que permite ao usuário final selecionar um departamento a partir de um menu suspenso. Dependendo do que o usuário seleciona no editor, o modelo gerará um cabeçalho dinâmico para uma página de carreiras. Este exemplo requer o uso do parâmetro export_to_template_context.
Loops For permitem iterar itens armazenados em uma sequência. Eles são mais comumente usados ao renderizar o conteúdo do blog em formato de lista. Loops For começam com uma instrução for e terminam com uma instrução endfor.
No exemplo abaixo, um conjunto de tipos de ursos é armazenado como uma variável chamada bears. Um loop for é então usado para iterar os diferentes tipos de ursos, imprimindo um item de lista para cada tipo.
Abaixo estão algumas outras características de modelos diversos que podem ser úteis, à medida que você desenvolve com o HubL.
Muitas outras linguagens compartilham os mesmos delimitadores do HubL, o que podem criar problemas ao trabalhar em arquivos codificados no CMS. Se você quiser usar um delimitador do HubL para uma linguagem diferente, precisará envolver o código com:
Você pode incluir vários arquivos .html em um modelo HubL usando a tag de inclusão. Para criar um arquivo HTML que não requer as variáveis de modelo padrão, você deve desmarcar a opção "Make template available for new content." A sintaxe é mostrada abaixo:
Você também pode compilar vários arquivos CSS em um único arquivo CSS com a mesma tag de inclusão. Quando você publicar o arquivo principal, o arquivo secundário será compilado em um único arquivo CSS minificado com o código do principal.
Ao criar modelos complexos, você pode usar blocos compartimentados que estendem um modelo principal.
Primeiro, você cria um modelo principal que inclui as variáveis standard_header_includes e standard_footer_includes. Dentro desse modelo, você precisa definir um bloco exclusivo usando a seguinte sintaxe, onde my_sidebar é um nome exclusivo:
Em seguida, você pode criar um arquivo HTML secundário que irá preencher esse bloco. Primeiro, você deve declarar uma instrução de extensão que faça referência ao caminho para o principal. Esse bloco de código é renderizado no modelo principal, mas mantido em outro arquivo menor e mais administrável. Essa técnica não serve para todos, mas pode ser útil para se manter organizado na codificação de modelos de página ou e-mail complexos. Ao usar esta técnica, você deve escolher o modelo secundário para criar o conteúdo.
No editor de páginas, você pode copiar a marcação do HubL para uma seção de arrastar e soltar a fim de reutilizar o código conforme necessário. Isso pode ser útil quando se deseja recriar uma seção de arrastar e soltar em um arquivo codificado.
Saiba mais sobre copiar a seção do HubL.
Agradecemos pelos seus comentários. Eles são muito importantes para nós.