¿Qué es HubL?
Piensa en un documento como una constancia salarial. La empresa tiene una plantilla con el membrete, el cuerpo del documento y una serie de "marcas" donde se coloca el nombre del colaborador, su salario y la fecha de emisión. Cuando Recursos Humanos necesita emitir la constancia, simplemente reemplaza esas marcas con los datos específicos de ese colaborador.
Esta plantilla permite dos cosas importantes:
- No escribir el documento desde cero cada vez que se requiera.
- Mantener un estilo consistente en todos los documentos.
Los motores de plantillas funcionan exactamente igual, pero aplicados a páginas web.
HubL: el motor de plantillas de Hubspot
HubL (Hubspot Markup Language) es el motor de plantillas que Hubspot CMS usa para crear contenido dinámico. Mediante marcadores especiales, llamados delimitadores ({{ }}, {% %}), le indicas a Hubspot qué información de la página debe rellenarse automáticamente: un título, una fecha, una imagen, etc.
HubL está basado en Jinja, un motor de plantillas de Python, por lo que si has trabajado con Liquid (Shopify) o Twig (PHP), la sintaxis te será muy familiar.
Con HubL, no tienes que editar manualmente el código de cada página. El sistema extrae el título, fecha e imagen automáticamente desde las propiedades del contenido, mediante variables y diccionarios.
Los delimitadores
Como vimos en el ejemplo de la sección anterior, HubL usa signos especiales llamados delimitadores para marcar dónde insertar contenido dinámico en la plantilla. Hay 4 tipos de delimitadores, y cada uno tiene una función específica:
1. Delimitadores de salida {{ }}
Los usamos para mostrar datos en la página: el título de un post ({{ content.name }}), una fecha ({{ content.publish_date }}), o el valor de una variable personalizada.
2. Delimitadores de lógica {% %}
Los usamos para ejecutar lógica: crear condicionales (if/else), repetir elementos con loops (for), o definir variables personalizadas (set). No generan output visible por sí solos.
Salida: Muestra una imagen u otra según la condición, pero el {% if %} en sí no aparece en el HTML.
3. Delimitadores de comentarios {# #}
Los usamos para agregar comentarios que solo verás en el editor. Se ignoran completamente en el HTML final, por lo que son perfectos para documentar tu código sin afectar el sitio.
Salida: Los comentarios {# #} no aparecen.
4. Delimitadores de escape {% raw %}...{% endraw %}
Este delimitador especial evita que HubL procese código que use sintaxis similar. Por ejemplo, si integras Vue.js (que también usa {{ }}), envuelves ese código con {% raw %}...{% endraw %} para que HubL lo ignore y Vue.js lo procese.
🔑 Regla de oro
¿Quieres mostrar algo en la página? → Usa {{ }}
¿Quieres controlar cómo se muestra? → Usa {% %}
¿Quieres dejar notas para ti mismo? → Usa {# #}
¿Quieres que HubL ignore algo? → Usa {% raw %}
Con estos 4 delimitadores, ya puedes empezar a trabajar con HubL. En la siguiente publicación de HubL Basics veremos cómo usarlos para obtener información de forma dinámica.