Dernière modification : 22 août 2025
HubL utilise des variables pour stocker et sortir des valeurs vers le modèle. Les variables peuvent être utilisées dans la logique des modèles ou faire l’objet d’une itération avec des boucles. Outre les variables, les macros sont un autre outil utile pour imprimer des sections de code répétitives et dynamiques dans vos modèles. Les variables sont des expressions délimitées par }}. La syntaxe de base des variables est la suivante : 
// variables
{{ variable }}
{{ dict.attribute }}

​
Variables

Les variables sont soit un mot unique dans une expression, soit une entrée de dictionnaire. HubL utilise des structures de données basées sur Python appelées dictionnaires ou dicts pour stocker divers ensembles de variables. Par exemple, HubSpot utilise un dictionnaire « content » pour contenir de nombreux attributs qui se rapportent au contenu créé avec ce modèle. Par exemple, content.absolute_url imprime l’URL de l’élément de contenu spécifique. HubSpot dispose de nombreuses variables prédéfinies pouvant être utilisées dans vos modèles de pages, de blogs et d’e-mails. Nous disposons d’une liste de référence des variables, vous pouvez également consulter les informations sur le développeur lorsque vous naviguez sur n’importe quelle page de votre compte pour voir les variables disponibles sur cette page… Outre l’impression des valeurs des variables et des entrées du dictionnaire dans un modèle, vous pouvez également définir vos propres variables. Vous pouvez stocker des chaînes de caractères, des booléens, des entiers, des séquences ou créer des dictionnaires dans une seule variable. Les variables sont définies à l’intérieur des délimiteurs d’instructions en utilisant le mot « set ». Une fois stockées, les variables peuvent ensuite être imprimées en indiquant le nom de la variable sous la forme d’expression. Vous pouvez voir ci-dessous différents types d’informations stockées dans des variables, puis imprimées. Les variables doivent être des mots simples ou utiliser des traits de soulignement pour les espaces (ex : my_variable). HubL ne prend pas en charge pas les noms de variables avec un trait d’union. 
{% set string_var = "This is a string value stored in a variable" %}
{{ string_var}}

{% set bool_var = True %}
{{ bool_var}}

{% set int_var = 53 %}
{{ int_var}}

{% set seq_var = ["Item 1", "Item 2", "Item 3"] %}
{{ seq_var}}

{% set var_one = "String 1" %}
{% set var_two = "String 2" %}
{% set sequence = [var_one,  var_two] %}
{{ sequence }}

{% set dict_var = {"name": "Item Name", "price": "$20", "size":"XL"} %}
{{ dict_var.price }}
Chaque exemple ci-dessus stocke un type de variable différent, le dernier exemple stockant deux variables différentes dans une séquence. Outre l’impression de valeurs, des variables peuvent être utilisées dans les instructions SI , comme paramètres de filtre de , comme paramètres de fonction, mais aussi itérées avec les boucles de (variables de séquence uniquement). L’utilisation courante consiste à utiliser des variables pour définir des valeurs CSS communes dans votre feuille de style. Par exemple, s’il y a une couleur que vous utilisez toujours dans votre fichier CSS. Ainsi, si vous devez changer cette couleur, vous pouvez modifier la valeur de la variable, et toutes ses références seront mises à jour la prochaine fois que vous publierez le fichier. 
<!-- defines variable and assigns HEX color -->
{% set primaryColor = "#F7761F" %}

a {
color: {{ primaryColor }}; {# prints variable HEX value #}
}

​
Macros

Les macros HubL vous permettent d’imprimer plusieurs déclarations avec une valeur dynamique. Par exemple, si vous avez un bloc de code que vous écrivez systématiquement, alors, une macro peut être une bonne solution, car elle imprimera le bloc de code tout en échangeant certains arguments que vous lui passez. La macro est définie, nommée et dotée d’arguments dans une instruction HubL. La macro est ensuite appelée dans une instruction qui passe ses valeurs dynamiques, ce qui imprime le bloc de code final avec les arguments dynamiques. La syntaxe de base d’une macro est la suivante : 
{% macro name_of_macro(argument_name, argument_name2)  %}
    {{ argument_name }}
    {{ argument_name2 }}
{% endmacro %}
{{ name_of_macro("value to pass to argument 1", "value to pass to argument 2")  }}
Si votre macro renvoie des espaces blancs sous la forme de nouvelles lignes, vous pouvez les supprimer manuellement dans les modèles. Si vous ajoutez un signe moins (-) au début ou à la fin d’un bloc, d’un commentaire ou d’une expression variable, les espaces avant ou après ce bloc seront supprimés. 
{% macro name_of_macro(argument_name, argument_name2) -%}
    {{ argument_name }}
    {{ argument_name2 }}
{%- endmacro %}
Vous trouverez ci-dessous un cas d’application pratique d’une macro permettant d’imprimer une propriété CSS3 avec les différents préfixes du fournisseur, avec une valeur dynamique. Cela vous permet d’imprimer 5 lignes de code avec une seule balise macro. 
{% macro trans(value) %}
-webkit-transition: {{value}};
-moz-transition: {{value}};
-o-transition: {{value}};
-ms-transition: {{value}};
transition: {{value}};
{% endmacro %}

a {
{{ trans("all .2s ease-in-out") }}
}
Les macros introduisent la possibilité d’avoir du code récursif. Pour éviter les problèmes de fiabilité et de performances, vous ne pouvez imbriquer les macros que sur 20 niveaux. Si vous dépassez cette limite, le message d’erreur suivant s’affichera : limite de récursivité de 20 atteinte pour la macro <your macro name>

​
Appel

Dans certains cas, vous pouvez souhaiter renvoyer des informations dynamiques supplémentaires dans le bloc macro. Par exemple, vous pouvez avoir une grande partie de code que vous souhaitez réinjecter dans la macro, en plus des arguments. Vous pouvez le faire en utilisant le bloc d’appel et caller(). Un bloc d’appel fonctionne essentiellement comme une macro, sans avoir son propre nom. L’expression caller() indique où le contenu du bloc d’appel sera rendu. Dans l’exemple ci-dessous, un <p>est ajouté dans une macro en plus des deux arguments. 
{% macro render_dialog(title, class) %}
<div class="{{ class }}">
<h2>{{ title }}</h2>
<div class="contents">
{{ caller() }}
</div>
</div>
{% endmacro %}

{% call render_dialog("Hello World", "greeting") %}
<p>This is a paragraph tag that I want to render in my.</p>
{% endcall %}

​
Import

Une autre fonctionnalité intéressante des macros est qu’elles peuvent être utilisées dans plusieurs modèles en important un fichier modèle dans un autre. Pour ce faire, vous devez utiliser la balise import . La balise import vous permettra de spécifier un chemin d’accès au Gestionnaire de conception vers le modèle qui contient vos macros et de leur donner un nom dans le modèle dans lequel vous les incluez. Vous pouvez alors passer des valeurs dans ces macros sans avoir besoin de les redéfinir. Par exemple, imaginons que vous avez un fichier modèle.html qui contient les 2 macros suivantes : Une macro est définie pour configurer une balise d’en-tête et une autre est définie pour générer une balise de pied de page. Ce fichier est enregistré dans le Gestionnaire de conception sous le nom my_macros.html. 
<!-- my_macros.html file -->
{% macro header(tag, title_text) %}
    <header> <{{ tag }}>{{ title_text }} </{{tag}}> </header>
{% endmacro %}

{% macro footer(tag, footer_text) %}
     <footer> <{{ tag }}>{{ footer_text }} </{{tag}}> </footer>
{% endmacro %}
Dans le modèle qui utilisera ces macros, on utilise une balise d’import qui spécifie le chemin d’accès au fichier my_macros.html. Il nomme également le groupe de macros (dans cet exemple, header_footer). Les macros peuvent ensuite être exécutées en ajoutant le nom de la macro au nom donné au modèle importé. Voir l’exemple ci-dessous. 
{% import "custom/page/web_page_basic/my_macros.html" as header_footer %}
{{ header_footer.header("h1", "My page title") }}
<p>Some content</p>
{{ header_footer.footer("h3:", "Company footer info") }}

​
depuis

Si vous souhaitez importer uniquement des macros spécifiques, au lieu de toutes les macros contenues dans un fichier.html distinct, vous pouvez utiliser la balise from . Avec la balise from, spécifiez uniquement les macros que vous souhaitez importer. En général, l’utilisation de import offre plus de flexibilité, mais cette alternative est également prise en charge. L’exemple ci-dessous accède au même fichier my_macros.html que celui de la section précédente de cet article. Mais cette fois, au lieu d’importer toutes les macros, il n’a accès qu’à la macro de pied de page. 
{% from "custom/page/web_page_basic/my_macros.html" import footer %}
{{ footer("h2", "My footer info") }}

​
Variables dans les boucles

Toutes les variables définies dans les boucles sont limitées à la portée de cette boucle et ne peuvent pas être exécutées depuis l’extérieur de la boucle.
Vous pouvez exécuter des variables définies en dehors d’une boucle, à partir d’une boucle, mais pas l’inverse. Vous pouvez également utiliser des fonctions pour modifier des objets et définir les paramètres des valeurs sur des dictionnaires, ou effectuer des opérations sur des listes. L’exemple suivant utilise l’opération de liste .update : 
{% set obj = {val : 0} %}
{% for i in range(0, 10) %}
{% do obj.update({val: obj.val + i }) %}
{% endfor %}
{{ obj.val }}