Última modificación: 22 de agosto de 2025
HubL utiliza variables para almacenar y enviar valores a la plantilla. Las variables se pueden utilizar en la lógica de la plantilla o iterar con los bucles for. Además de las variables, las macros son otra herramienta útil para imprimir secciones de código repetitivas pero dinámicas a lo largo de tus plantillas. Las variables son expresiones delimitadas por }}. La sintaxis básica de las variables es la siguiente: 
// variables
{{ variable }}
{{ dict.attribute }}

​
Variables

Las variables son una sola palabra en una expresión o un atributo de un diccionario. HubL utiliza estructuras de datos basadas en Python llamadas diccionarios o dicts para almacenar diversos conjuntos de variables. Por ejemplo, HubSpot utiliza un diccionario “contenido” para albergar muchos atributos que pertenecen al contenido creado con esa plantilla. Por ejemplo, el content.absolute_url imprime la URL del contenido específico. HubSpot tiene muchas variables predefinidas que se pueden utilizar en toda tu página, blog y plantillas de correo electrónico. Tenemos una lista de referencia de las variables, también puedes ver la información del desarrollador al navegar por cualquier página de tu cuenta para ver las variables disponibles dentro de esa página. Además de imprimir los valores de las variables y los atributos del diccionario en una plantilla, también puedes definir tus propias variables. Puedes almacenar cadenas, booleanos, enteros, secuencias o crear diccionarios dentro de una sola variable. Las variables se definen dentro de los delimitadores de las sentencias utilizando la palabra “set”. Una vez almacenadas, las variables pueden imprimirse indicando el nombre de la variable como una expresión. A continuación puedes ver varios tipos de información almacenada en variables y luego imprimir. Las variables deben ser palabras sueltas o utilizar guiones bajos para los espacios (por ejemplo, mi_variable). HubL no admite nombres de variables con guiones. 
{% 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 }}
Cada ejemplo anterior almacena un tipo de variable diferente, y el último ejemplo almacena dos variables diferentes en una secuencia. Además de imprimir valores, las variables pueden utilizarse en sentencias if, como parámetros defiltro , como parámetros defunción así como iterar con bucles for (solo variables de secuencia). Un uso común es utilizar variables para definir valores CSS comunes en su hoja de estilos. Por ejemplo, si tienes un color que utilizas una y otra vez en todo tu archivo CSS. De esta manera, si necesitas cambiar ese color, puedes cambiar el valor de la variable, y todas las referencias a esa variable se actualizarán, la próxima vez que publiques el archivo. 
<!-- defines variable and assigns HEX color -->
{% set primaryColor = "#F7761F" %}

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

​
Macros

Las macros HubL te permiten imprimir varias sentencias con un valor dinámico. Por ejemplo, si hay un bloque de código que escribes una y otra vez, una macro puede ser una buena solución, porque imprimirá el bloque de código mientras intercambia ciertos argumentos que le pasa. La macro se define, se nombra y se le dan argumentos dentro de una sentencia HubL. A continuación, se llama a la macro en una sentencia que pasa sus valores dinámicos, que imprime el bloque de código final con los argumentos dinámicos. La sintaxis básica de una macro es la siguiente: 
{% 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 tu macro devuelve espacios en blanco en forma de nuevas líneas, puedes eliminar a mano los espacios en blanco en las plantillas. Si agregas un signo menos (-) al principio o al final de un bloque, un comentario o una expresión variable, se eliminarán los espacios en blanco que haya antes o después de ese bloque. 
{% macro name_of_macro(argument_name, argument_name2) -%}
    {{ argument_name }}
    {{ argument_name2 }}
{%- endmacro %}
A continuación se muestra una aplicación práctica de una macro para imprimir una propiedad CSS3 con los distintos prefijos de proveedor, con un valor dinámico. Esto te permite imprimir 5 líneas de código con una sola etiqueta de 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") }}
}
Las macros introducen la posibilidad de tener código recursivo. Para evitar problemas de fiabilidad y rendimiento, solo puedes anidar macros a 20 niveles de profundidad. Si sobrepasas este límite obtendrás el error: se ha alcanzado el límite máximo de recursión de 20 para la macro <your macro name>

​
Llamada

En algunos casos, es posible que desees pasar información dinámica adicional al bloque de macros. Por ejemplo, puedes tener un gran trozo de código que quieras devolver a la macro, además de los argumentos. Esto se puede hacer utilizando el bloque de llamada y caller(). Un bloque de llamada funciona esencialmente como una macro, pero no tiene su propio nombre. La expresión caller() especifica dónde se mostrará el contenido del bloque de llamada. En el ejemplo siguiente, se agrega una <p> en una macro además de los dos argumentos. 
{% 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 %}

​
Importación

Otra característica útil de las macros es que pueden utilizarse en varias plantillas importando un archivo de plantilla en otro. Para ello, deberás utilizar la etiqueta import. La etiqueta de importación te permitirá especificar una ruta de archivo de Administrador de diseño a la plantilla que contiene tus macros y dar a las macros un nombre en la plantilla en la que las estás incluyendo. A continuación, puedes pasar valores a estas macros sin necesidad de redefinirlas. Por ejemplo, digamos que tienes un archivo de plantilla .html que contiene las siguientes 2 macros. Se define una macro para configurar una etiqueta de encabezado y otra para generar una etiqueta de pie de página. Este archivo se guarda en el Administrador de diseño con el nombre 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 %}
En la plantilla que utilizará estas macros, se utiliza una etiqueta de importación que especifica la ruta del archivo my_macros.html. También nombra el grupo de macros (en este ejemplo header_footer). Las macros pueden ejecutarse agregando el nombre de la macro al nombre dado a la plantilla importada. Consulta el ejemplo siguiente. 
{% 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") }}

​
From

Si solo deseas importar macros específicas, en lugar de todas las macros contenidas en un archivo .html separado, puedes utilizar la etiqueta from. Con la etiqueta from, especifica solo las macros que deseas importar. Por lo general, usar import proporcionará más flexibilidad, pero esta alternativa también es compatible. El siguiente ejemplo accede al mismo archivo my_macros.html de la sección anterior de este artículo. Pero esta vez en lugar de importar todas las macros, sólo accede a la macro de pie de página. 
{% from "custom/page/web_page_basic/my_macros.html" import footer %}
{{ footer("h2", "My footer info") }}

​
Variables dentro de los bucles

Cualquier variable definida dentro de los bucles está limitada al ámbito de ese bucle y no puede ser llamada desde fuera del mismo.
Puedes llamar a las variables definidas fuera de un bucle, desde dentro de un bucle, pero no a la inversa. También se pueden utilizar funciones para mutar objetos para configurar valores en dict o realizar operaciones de lista. En el siguiente ejemplo se utiliza la lista de operación .update: 
{% set obj = {val : 0} %}
{% for i in range(0, 10) %}
{% do obj.update({val: obj.val + i }) %}
{% endfor %}
{{ obj.val }}