HubL-Cheat-Sheet

Delimiter

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

Variablen

Eigene Variablen setzt du mit set. Strings, Zahlen, Booleans, Listen und Dicts funktionieren wie in 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 stellt diese Variablen auf jeder Seite bereit:

If und 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 %}

• In einer Schleife: loop.index (ab 1), loop.index0 (ab 0), loop.first, loop.last, loop.length.
• {% unless condition %} … {% endunless %} ist das Gegenteil von if.
• Tests lesen sich wie englische Sätze: {% if module.subtitle is defined %}, is string, is number, is even, is divisibleby 3.
• Operatoren: ==, !=, and, or, not, in.

Filter

Ein Filter verändert einen Wert hinter einer Pipe, {{ value|filter }}, und Filter werden von links nach rechts verkettet.

Funktionen

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

Tags

Jedes Seiten-Template braucht {{ standard_header_includes }} vor dem schließenden </head> und {{ standard_footer_includes }} vor dem schließenden </body>: Sie binden HubSpots eigene Scripts, Styles und das Tracking ein.

<!--
  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 %}

Module und Felder

Ein Modul ist ein Ordner mit der Endung .module, der module.html (HubL), module.css, module.js, fields.json und meta.json enthält. In module.html ist jedes Feld module. plus sein Name:

{% 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 }} ist der eindeutige Name der Modulinstanz: Damit beschränkst du CSS auf eine einzelne Instanz.
• inline_text und inline_rich_text machen ein Feld im Editor direkt auf der Seite bearbeitbar.
• module.css unterstützt fast kein HubL (nur Helfer wie module_asset_url) und kann keine Feldwerte lesen; module.js unterstützt gar keins. Für einen Wert aus einem Feld setzt du einen {% require_css %}-Block in module.html.
• Eine in einem Feld gewählte Farbe, die in einem Inline-style="" ausgegeben wird, schlägt das CSS des Moduls: Prüfe zuerst module.html, wenn sich ein Style nicht ändern lässt.

Debugging

• {{ module|pprint }} gibt einen Wert mit seinem Typ direkt auf der Seite aus. Entferne das vor dem Veröffentlichen.
• Hänge ?hsDebug=true an die URL einer Live-Seite an: CSS und JavaScript laden dann unminifiziert und nicht zusammengefasst, nichts kommt aus dem Cache, und am Ende des Quelltexts stehen HubL-Fehler und -Warnungen, die Renderzeit und ob die Seite vorgerendert werden kann.
• Der Design Manager markiert HubL-Fehler in der Datei, während du sie bearbeitest. Mit der HubSpot CLI prüft hs cms lint <path> Dateien, und Uploads melden fatale Fehler im Terminal.
• HubSpot rendert die Seiten, die ein aktualisiertes Modul oder Template verwenden, von selbst neu; das kann ein paar Minuten dauern. Wenn eine Live-Seite noch die alte Version zeigt, veröffentliche sie erneut.

HubL in transjt-Themes

Wenn du ein Design oder einen KI-Build exportierst, schreibt transjt das Theme für dich: Templates mit Drag-and-drop-Bereichen und ein Modul pro Sektion, mit Texten, Bildern, Links und Farben als Feldern. Dein Marketing-Team bearbeitet diese Felder im Seiten-Editor; niemand muss HubL schreiben.

Wenn du ein Theme selbst anpassen willst, leg dein eigenes CSS und JavaScript in custom.css und custom.js ab: Diese Dateien bleiben erhalten, wenn du erneut exportierst. Siehe Für HubSpot-Entwickler und Dein Theme in HubSpot verwenden.

Die vollständige HubL-Referenz findest du in der Entwicklerdokumentation von HubSpot.