Guía rápida de HubL

Delimitadores

{# A module's heading field #}
<h1>{{ module.heading }}</h1>

Variables

Define las tuyas con set. Las cadenas, los números, los booleanos, las listas y los diccionarios funcionan como en Jinja:

{% set title = "Pricing" %}
{% set sizes = [480, 960, 1440] %}
{% set button = {"label": "Start free", "url": "/start/"} %}

{{ title ~ " | transjt" }}    {# ~ joins strings #}
{{ sizes[0] }}                {# 480 #}
{{ button.label }}            {# or button["label"] #}
{% do sizes.append(1920) %}   {# change a list in place #}

HubSpot pone estas variables a tu disposición en todas las páginas:

If y for

{% if module.items %}
  <ul>
  {% for item in module.items %}
    <li class="{{ 'is-first' if loop.first else '' }}">{{ loop.index }}. {{ item.title }}</li>
  {% endfor %}
  </ul>
{% elif is_in_editor %}
  <p>Add an item in the sidebar.</p>
{% else %}
  {# Nothing to show on the live page #}
{% endif %}

• En un bucle: loop.index (desde 1), loop.index0 (desde 0), loop.first, loop.last, loop.length.
• {% unless condition %} … {% endunless %} es lo contrario de if.
• Los tests se leen como frases en inglés: {% if module.subtitle is defined %}, is string, is number, is even, is divisibleby 3.
• Operadores: ==, !=, and, or, not, in.

Filtros

Un filtro modifica un valor tras una barra vertical, {{ value|filter }}, y los filtros se encadenan de izquierda a derecha.

Funciones

{% for post in blog_recent_posts("default", 3) %}
  <a href="{{ post.absolute_url }}">{{ post.name }}</a>
{% endfor %}

Etiquetas

Toda plantilla de página necesita {{ standard_header_includes }} antes de la etiqueta de cierre </head> y {{ standard_footer_includes }} antes de la etiqueta de cierre </body>: cargan los scripts, los estilos y el seguimiento propios de HubSpot.

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Landing page
-->
{% extends "./layouts/base.html" %}
{% block body %}
  {% dnd_area "main" label="Main" %}
    {% dnd_section %}
      {% dnd_column %}
        {% dnd_row %}
          {% dnd_module path="@hubspot/rich_text" %}{% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}
  {% end_dnd_area %}
{% endblock %}

Módulos y campos

Un módulo es una carpeta que termina en .module y contiene module.html (HubL), module.css, module.js, fields.json y meta.json. En module.html, cada campo es module. más su nombre:

{% set img = module.image %}
<section class="hero hero--{{ name }}">
  {% inline_text field="heading" value="{{ module.heading }}" %}
  {% if img.src %}
    <img src="{{ img.src }}" alt="{{ img.alt|escape_attr }}" width="{{ img.width }}" height="{{ img.height }}" loading="lazy">
  {% endif %}
</section>

• {{ name }} es el nombre único de la instancia del módulo: úsalo para limitar el CSS a una sola instancia.
• inline_text y inline_rich_text hacen que un campo se pueda editar directamente en la página, dentro del editor.
• module.css casi no admite HubL (solo funciones auxiliares como module_asset_url) y no puede leer los valores de los campos; module.js no admite nada. Para usar el valor de un campo, coloca un bloque {% require_css %} en module.html.
• Un color elegido en un campo e impreso en un style="" en línea tiene prioridad sobre el CSS del módulo: revisa primero module.html cuando un estilo no cambie.

Depuración

• {{ module|pprint }} imprime un valor con su tipo, directamente en la página. Quítalo antes de publicar.
• Añade ?hsDebug=true a la URL de una página publicada: su CSS y su JavaScript se cargan sin minificar ni combinar, nada sale de la caché, y al final del código fuente de la página aparecen los errores y avisos de HubL, el tiempo de renderizado y si la página se puede prerrenderizar.
• El Design Manager marca los errores de HubL en el archivo mientras editas. Con la CLI de HubSpot, hs cms lint <path> revisa los archivos, y las subidas informan de los errores fatales en la terminal.
• HubSpot vuelve a renderizar por sí solo las páginas que usan un módulo o una plantilla actualizados, lo que puede tardar unos minutos. Si una página publicada sigue mostrando la versión anterior, vuelve a publicarla.

HubL en los temas de transjt

Cuando exportas un diseño o un build de IA, transjt escribe el tema por ti: plantillas con áreas de arrastrar y soltar, y un módulo por sección con sus textos, imágenes, enlaces y colores como campos. Tu equipo de marketing edita esos campos en el editor de páginas; nadie tiene que escribir HubL.

Para ajustar un tema por tu cuenta, guarda tu propio CSS y JavaScript en custom.css y custom.js: se conservan cuando vuelves a exportar. Consulta Para desarrolladores de HubSpot y Usar tu tema en HubSpot.

La referencia completa de HubL está en la documentación para desarrolladores de HubSpot.