Überblick über die HubL-Syntax

Last updated:

Das CMS von HubSpot verwendet die HubSpot Markup Language, kurz HubL („Hubble“ ausgesprochen). HubL ist die HubSpot-Erweiterung von Jinjava, einer auf Jinja basierenden Templating-Engine. HubL verwendet eine ganze Reihe von Markups, die nur in HubSpot vorkommen, und unterstützt nicht alle Funktionen von Jinja.

In diesem Artikel werden Sie mit den Grundlagen der Funktionen und der Syntax von HubL vertraut gemacht.

Typen von Trennzeichen

Ähnlich wie andere häufig verwendete Vorlagensprachen wie PHP kann HubL in Form von codierten Vorlagendateien oder HubL-Vorlagenmodulen in Ihr HTML eingebunden werden. Um zu unterscheiden, wo Ihr HubL-Code beginnt und endet, müssen Sie einige Schlüsselsymbole lernen, die als Trennzeichen dienen.

{% %} - statement delimiters {{ }} - expression delimiters {# #} - comment delimiters
Seien Sie vorsichtig, wenn Sie Kommentare in Ihrem Code verschachteln, da dies dazu führen kann, dass das nachfolgende comment-Tag als Text gerendert wird.

Anweisungen

HubL-Anweisungen werden verwendet, um bearbeitbare Module zu erstellen, bedingte Vorlagenlogik zu definieren, for-Schleifen einzurichten, Variablen zu definieren und vieles mehr. Anweisungen werden durch {% getrennt.  Es wird nichts auf die Seite ausgegeben.

Ausdrücke

Ausdrücke drucken Werte, die im Kontext der Vorlage gespeichert sind. Ausdrücke werden durch {{ getrennt. Beispiel: eine Variable muss als Anweisung definiert werden, aber gedruckt wird sie über einen HubL-Ausdruck.

do-Tag

Das 'do'-Tag funktioniert genau wie die regulären Anweisungen {% ... %}; Damit können Listen und Dictionaries bearbeitet werden.

Hinweis: Wenn Sie Arrays hinzufügen, sollten Sie .append() verwenden, und beim Hinzufügen zu Objekten sollten Sie .update() verwenden.

# Arrays {% set navigation = ["Home", "About"] %} {% do navigation.append("Contact Us") %} {{navigation}} # Objects {% set book = {"name" : "Rocking HubL", "author" : "John Smith" }%} {% do book.update({"ebook" : "yes"}) %} {{book}}# Arrays [Home, About, Contact Us] # Objects {name=Rocking HubL, author=John Smith, ebook=yes}

Kommentare

Die letzte Art von Trennzeichen, auf die Sie beim Entwickeln mit HubL stoßen oder die Sie verwenden können, ist ein HubL-Kommentar. Kommentare werden durch ein {# definiert.

Module

Module sind dynamische Bereiche einer Vorlage, die vom Endbenutzer im Content-Editor angepasst werden können. Wenn Sie beispielsweise eine Vorlagendatei von Grund auf neu codieren möchten, müssen Sie den Vorlagen mit HubL-Tags Module hinzufügen, um Ihren Content-Autoren die Möglichkeit zu geben, Bereiche der Seite zu bearbeiten.

Modul-Tags setzen sich aus folgenden Komponenten zusammen:

  • Modultyp: gibt an, welches Modul gerendert werden soll. Eine Liste der verschiedenen verfügbaren Modultypen finden Sie auf der Seite Unterstützte HubL-Tags.
  • Ein eindeutiger Name für dieses Modul: gibt dem Modul eine eindeutige Identität im Kontext der Vorlage.
  • Pfad: definiert je nach Tag den Ort, an dem sich das Modul im Design-Manager befindet. Der Pfad für HubSpot-Standardmodule sollte immer mit @hubspot/ beginnen, gefolgt von der Art des Moduls. Weitere Informationen finden Sie im nachstehenden Beispiel und auf der Seite für die Verwendung von Modulen in Vorlagen. 
  • Parameter: geben Sie optional zusätzliche Modulinformationen an.
{% module "unique_module_name", path="@hubspot/text", label="Single Text Line", value="This is a single text line" %}<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-text widget-type-text" data-hs-cos-general-type="widget" data-hs-cos-type="module" id="hs_cos_wrapper_text" style=""> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" data-hs-cos-general-type="widget" data-hs-cos-type="text" id="hs_cos_wrapper_text_" style="">This is a single text line</span> </div>

Das obige Beispiel ist ein Textmodul, für den die Parameter „label“ und „value“ definiert sind. Die Bezeichnung definiert den Hilfetext im Editor und der Wert legt den Standardtext für dieses Modul fest. Wie das im Editor aussieht, zeigt das folgende Beispiel-GIF-Bild.

module-label-value-min

In diesem Artikel erfahren Sie mehr über die Verwendung von Modulen in Vorlagen.

Variablen und Makros

HubL enthält viele vordefinierte HubSpot-Variablen, die ihre hilfreichen Werte über die App ausgeben. Darüber hinaus können Sie ihre eigenen Variablen in einer Vorlage definieren. In dem folgenden Beispiel wird eine Variable namens primaryColor in einer Anweisung definiert und dann mit einem HubL-Ausdruck gedruckt. In diesem Beispiel wird die HubL-Variable mit CSS kombiniert.

{% set primaryColor = '#F7761F' %} {# defines variable and assigns HEX color #} a { color: {{ primaryColor }}; {# prints variable HEX value #} }a { color:#F7761F; }

Mit HubL-Makros können Sie mehrere Anweisungen mit einem dynamischen Wert drucken. Dieses Verfahren erweist sich als nützlich, wenn Sie immer wieder die gleichen grundlegenden Code-Blöcke schreiben, aber nur bestimmte Werte ändern müssen. Im folgenden Beispiel wird ein Makro verwendet, um eine CSS3-Übergangseigenschaft zu drucken, die alle Herstellerpräfixe enthält. In diesem Artikel erfahren Sie mehr über Makros.

{% 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") }} }a { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

Filter und Funktionen

Filter können zu Ihrem HubL-Code hinzugefügt werden, um den Wert einer Vorlagenvariable zu transformieren oder zu ändern. Ein einfaches Beispiel für die Formatierung einer Datumsvariablen ist unten dargestellt. Filter verwenden ein | (Pipeline-Symbol) und werden ohne Leerzeichen auf eine Variable angewendet.

Im folgenden Beispiel wird davon ausgegangen, dass ein Blog-Beitrag am 29. April veröffentlicht wurde. Das Veröffentlichungsdatum des Beitrags wird mit einem datetimeformat-Filter formatiert. Eine vollständige Liste der Filter können Sie hier anzeigen.

{{ content.publish_date_local_time|datetimeformat("%B %e, %Y") }} April 29, 2020

Während Filter die Darstellung von Variablen beeinflussen, verarbeiten Funktionen Wert- und Account-Informationen und stellen diese Informationen dar. Eine Funktion kann zum Beispiel verwendet werden, um die Gesamtzahl der Beiträge für einen bestimmten Blog zu ermitteln oder um eine Farbvariable um einen bestimmten Wert heller oder dunkler zu machen.

Das Beispiel würde die Gesamtzahl der Blog-Beiträge von designers.hubspot.com/blog ausgeben. Es verwendet einen Blog-ID-Parameter (verfügbar in der URL des Blog-Dashboards), um anzugeben, auf welchen Blog abgezielt werden soll. Eine vollständige Liste der Funktionen können Sie hier anzeigen.

// blog_total_post_count {{ blog_total_post_count(359485112) }}2

if-Anweisungen

Mitif-Anweisungen können Sie bedingte Logik verwenden, um festzulegen, wie Ihre Vorlage bedingte Logik in HubL-Anweisungen für if, elif, else und endifrendert. Eine if-Anweisung muss mit einem if beginnen und mit einem endif enden.

Das folgende Beispiel definiert ein Auswahlmodul, mit dem der Endbenutzer eine Abteilung in einem Dropdown-Menü auswählen kann. Je nachdem, was der Benutzer im Editor auswählt, generiert die Vorlage eine dynamische Überschrift für eine Karriereseite. Dieses Beispiel erfordert die Verwendung des export_to_template_context-Parameters.

{% choice "department" label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %} {% if widget_data.department.value == "Marketing" %} <h3>Want to join our amazing Marketing team?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% elif widget_data.department.value == "Sales" %} <h3>Are you a Sales superstar?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% elif widget_data.department.value == "Dev" %} <h3>Do you love to ship code?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% else %} <h3>Want to work with our awesome customers?</h3> <h4>We have exciting career opportunities on the {{ widget_data.department.value }} team.</h4> {% endif %}

for-Schleifen

Mit for-Schleifen können Sie die in einer Sequenz gespeicherten Elemente wiederholt durchlaufen lassen. Sie werden am häufigsten bei der Darstellung von Blog-Inhalten in einem Listenformat verwendet. for-Schleifen beginnen mit einer for-Anweisung und enden mit einer endfor-Anweisung.

Im folgenden Beispiel wird ein Array von Bärenarten als Variable namens bears gespeichert. In einer for-Schleife werden dann die verschiedenen Arten von Bären durchlaufen und für jede Art ein Listenelement gedruckt. 

{% set bears = ["panda bear", "polar bear", "black bear", "grizzly bear", "koala bear"] %} <h1>Types of bears</h1> <ul> {% for bear in bears %} <li>{{ bear }}</li> {% endfor %} </ul><h1>Types of bears</h1> <ul> <li>panda bear</li> <li>polar bear</li> <li>black bear</li> <li>grizzly bear</li> <li>koala bear</li> </ul>

Andere HubL-Funktionen

Nachfolgend finden Sie einige weitere Funktionen für Vorlagen, die bei der Entwicklung mit HubL nützlich sein können.

Fluchtzeichen für HubL-Trennzeichen

Viele andere Sprachen verwenden dieselben Trennzeichen wie HubL, was bei der Arbeit in Code-Dateien im CMS zu Problemen führen kann. Wenn Sie ein HubL-Trennzeichen für eine andere Sprache verwenden möchten, müssen Sie diesen Code folgendermaßen umschließen:

{% raw %} {{"Code you want to escape"}} {% endraw %}{{"Code you want to escape"}}

Einbinden von Dateien in Dateien

Mit dem include-Tag können Sie mehrere .html-Dateien in einer HubL-Vorlageberücksichtigen. Um eine HTML-Datei zu erstellen, die nicht die Standardvorlagenvariablen benötigt, müssen Sie die Option „Diese Vorlage für neuen Content zur Verfügung stellen“ deaktivieren. Die Syntax ist unten dargestellt:

{% include "custom/page/web_page_basic/my_footer.html" %} {% include "hubspot/styles/patches/recommended.css" %}

Sie können auch mehrere CSS-Dateien in eine einzige CSS-Datei mit demselben include-Tag kompilieren. Wenn Sie die übergeordnete Datei veröffentlichen, wird die untergeordnete Datei mit dem Code der übergeordneten Datei in eine einzige minifizierte CSS-Datei kompiliert.

Blöcke und Erweiterungen

Bei der Erstellung komplexer Vorlagen können Sie in Abschnitte unterteilte Blöcke erstellen, die eine übergeordnete Vorlage erweitern.

Zunächst erstellen Sie eine Hauptvorlage, die die erforderlichen standard_header_includes- und standard_footer_includes-Variablen einschließt. Innerhalb dieser Vorlage müssen Sie einen eindeutigen Block mit der folgenden Syntax definieren, wobei my_sidebar ein eindeutiger Name ist:

{% extends "custom/page/web_page_basic/my_template.html" %} {% block my_sidebar %} <h3>Sidebar title</h3> <ul> <li>Bullet 1<li> <li>Bullet 2<li> <li>Bullet 3<li> </ul> {% endblock %}

Anschließend können Sie eine untergeordnete HTML-Datei erstellen, die diesen Block auffüllt. Zunächst müssen Sie eine extends-Anweisung deklarieren, die auf den Pfad zum übergeordneten Element verweist. Dieser Code-Block würde in der übergeordneten Vorlage gerendert, aber in einer anderen, kleineren und besser zu verwaltenden Datei gespeichert. Dieses Verfahren ist nicht jedermanns Sache, kann jedoch nützlich sein, um beim Programmieren komplexer E-Mail- oder Seitenvorlagen den Überblick zu behalten.  Wenn Sie diese Technik verwenden, sollten Sie bei der Erstellung von Inhalten die untergeordnete Vorlage wählen.

Abschnitts-HubL kopieren

Im Seiten-Editor können Sie das HubL-Markup für einen Drag-&-Drop-Abschnitt kopieren, um den Code bei Bedarf wiederzuverwenden. Dies kann hilfreich sein, wenn Sie einen Drag-&-Drop-Abschnitt in einer Code-Datei neu erstellen wollen.

copy-section-hubl-menu

Erfahren Sie mehr über das Kopieren von Abschnitts-HubL.

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.