Syntax von HubL-Variablen & -Makros

Last updated:

HubL verwendet Variablen zum Speichern und Ausgeben von Werten in der Vorlage. Variablen können in Vorlagenlogik verwendet oder mit for-Schleifen durchlaufen werden. Neben Variablen sind Makros ein weiteres nützliches Tool, um sich wiederholende, aber dynamische Code-Abschnitte in Ihren Vorlagen zu drucken.

Variablen sind Ausdrücke, die durch }}begrenzt sind. Die grundlegende Syntax von Variablen lautet wie folgt:

// variables {{ variable }} {{ dict.attribute }}

Variablen

Variablen sind entweder ein einzelnes Wort in einem Ausdruck oder ein Attribut eines Dictionarys. HubL verwendet Python-basierte Datenstrukturen, Dictionaries oder Dicts genannt, um verschiedene Variablensätze zu speichern.  HubSpot verwendet beispielsweise ein „content“-Dictionary, um viele Attribute zu speichern, die sich auf den mit dieser Vorlage erstellten Inhalt beziehen. Zum Beispiel druckt die content.absolute_url die URL eines bestimmten Inhalts.

HubSpot verfügt über viele vordefinierte Variablen, die in Ihren Seiten-, Blog- und E-Mail-Vorlagen verwendet werden können. Wir verfügen über eine Referenzliste von Variablen. Sie können auch die Entwicklerinformationen anzeigen, wenn Sie eine beliebige Seite in Ihrem Account aufrufen, um die auf dieser Seite verfügbaren Variablen anzuzeigen.

Sie können nicht nur die Werte von Variablen und Dictionary-Attributen in einer Vorlage drucken, sondern auch eigene Variablen definieren. Sie können Zeichenfolgen, boolesche Werte, Ganzzahlen und Sequenzen speichern oder Dictionaries in einer einzigen Variablen erstellen. Variablen werden innerhalb von Anweisungstrennzeichen mit dem Wort „set“ definiert. Einmal gespeicherte Variablen können dann gedruckt werden, indem der Variablenname als Ausdruck angegeben wird. Unten sehen Sie verschiedene Arten von Informationen, die in Variablen gespeichert und dann gedruckt werden.

Variablen sollten entweder aus einzelnen Wörtern bestehen oder Unterstriche für Leerzeichen verwenden (z. B. my_variable). HubL unterstützt keine Variablennamen mit Bindestrichen.

{% 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 }}This is a string value stored in a variable True 53 [Item1, Item2, Item3] [String 1, String 2] $20

Jedes der obigen Beispiele speichert einen anderen Variablentyp, wobei das letzte Beispiel zwei verschiedene Variablen in einer Sequenz speichert. 

Neben der Ausgabe von Werten können Variablen in if-Anweisungen, als Filterparameter, als Funktionsparameter sowie in for-Schleifen (nur Sequenzvariablen) zur Iteration verwendet werden.

Eine gängige Anwendung ist die Verwendung von Variablen zur Definition allgemeiner CSS-Werte in Ihrem Stylesheet. Zum Beispiel wenn Sie eine Farbe haben, die Sie in Ihrer CSS-Datei immer wieder verwenden. Auf diese Weise können Sie, wenn Sie die Farbe ändern müssen, den Variablenwert ändern, und alle Verweise auf diese Variable werden bei der nächsten Veröffentlichung der Datei aktualisiert.

<!-- defines variable and assigns HEX color --> {% set primaryColor = "#F7761F" %} a { color: {{ primaryColor }}; {# prints variable HEX value #} } a { color: #F7761F; }

Makros

Mit HubL-Makros können Sie mehrere Anweisungen mit einem dynamischen Wert drucken. Wenn es beispielsweise einen Code-Block gibt, den Sie immer wieder schreiben müssen, kann ein Makro eine gute Lösung sein, da es den Code-Block ausgibt und dabei bestimmte Argumente, die Sie ihm übergeben, austauscht.

Das Makro wird in einer HubL-Anweisung definiert, benannt und mit Argumenten versehen. Das Makro wird dann in einer Anweisung aufgerufen, die seine dynamischen Werte übergibt und den endgültigen Code-Block mit den dynamischen Argumenten ausgibt. Die grundlegende Syntax eines Makros lautet wie folgt:

{% 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") }}

Wenn Ihr Makro Leerzeichen in Form von neuen Zeilen zurückgibt, können Sie Leerzeichen in Vorlagen manuell entfernen. Wenn Sie ein Minuszeichen (-) an den Anfang oder das Ende eines Blocks, eines Kommentars oder eines Variablenausdrucks setzen, werden die Leerzeichen vor oder nach diesem Block entfernt.

{% macro name_of_macro(argument_name, argument_name2) -%} {{ argument_name }} {{ argument_name2 }} {%- endmacro %}

Unten sehen Sie eine praktische Anwendung eines Makros, um eine CSS3-Eigenschaft mit den verschiedenen Anbieter-Präfixen und einem dynamischen Wert zu drucken. Damit können Sie 5 Codezeilen mit einem einzigen Makro-Tag drucken.

{% 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; }

Mit Makros haben Sie die Möglichkeit, rekursiven Code zu erstellen. Um Probleme bei der Zuverlässigkeit und Performance zu vermeiden, können Sie Makros nur 20 Ebenen tief verschachteln. Wenn Sie diese Grenze überschreiten, erhalten Sie eine Fehlermeldung vom Typ: max. Rekursionslimit von 20 für <your macro name>-Makro erreicht

Aufruf

In manchen Fällen möchten Sie vielleicht zusätzliche dynamische Informationen in den Makroblock zurückgeben. Sie können zum Beispiel ein großes Stück Code haben, das Sie zusätzlich zu den Argumenten in das Makro zurückführen wollen. Sie können dies mit Hilfe von call block und caller() tun. Ein Aufrufblock funktioniert im Wesentlichen wie ein Makro, erhält aber keinen eigenen Namen. Der caller()-Ausdruck gibt an, wo der Inhalt des Aufrufblocks wiedergegeben wird.

Im folgenden Beispiel wird zusätzlich zu den beiden Argumenten ein <p> in ein Makro eingefügt.

{% 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 %}<div class="greeting"> <h2>Hello World</h2> <div class="contents"> <p>This is a simple dialog rendered by using a macro and a call block.</p> </div> </div>

Import

Eine weitere nützliche Funktion von Makros ist, dass sie vorlagenübergreifend verwendet werden können, indem eine Vorlagendatei in eine andere importiert wird. Hierfür müssen Sie das import -Tag verwenden. Mit dem import-Tag können Sie einen Design-Manager-Dateipfad zur Vorlage angeben, die Ihre Makros enthält, und den Makros einen Namen in der Vorlage geben, in die Sie sie einfügen. Sie können dann Werte an diese Makros übergeben, ohne sie umdefinieren zu müssen.

Nehmen wir zum Beispiel an, Sie haben eine HTML-Vorlagendatei, die die folgenden 2 Makros enthält. Ein Makro wird definiert, um einen Header-Tag einzurichten, und eines, um einen Footer-Tag zu erzeugen. Diese Datei wird im Design-Manager unter dem Namen my_macros.html gespeichert.

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

In der Vorlage, die diese Makros verwenden soll, wird ein import-Tag verwendet, das den Dateipfad zur my_macros.html-Datei angibt. Er benennt auch die Gruppe der Makros (in diesem Beispiel header_footer). Makros können dann ausgeführt werden, indem der Makroname an den Namen der importierten Vorlage angehängt wird. Siehe das folgende Beispiel.

{% 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") }}<header><h1>My page title</h1></header> <p>Some content</p> <footer><h3>Company footer info</h3></footer>

Von (from)

Wenn Sie nur bestimmte Makros importieren möchten, anstatt alle Makros in einer separaten .html-Datei, können Sie das from-Tag verwenden. Geben Sie mit dem from-Tag nur die Makros an, die Sie importieren möchten. Im Allgemeinen bietet die Verwendung von import mehr Flexibilität, diese Alternative wird jedoch ebenfalls unterstützt.

Das folgende Beispiel greift auf dieselbe my_macros.html-Datei aus dem vorherigen Abschnitt dieses Artikels zu. Diesmal werden jedoch nicht alle Makros importiert, sondern nur das Makro für den Footer.

{% from "custom/page/web_page_basic/my_macros.html" import footer %} {{ footer("h2", "My footer info") }}<footer><h2>My footer info</h2></footer>

Variablen innerhalb von Schleifen

Alle innerhalb von Schleifen definierten Variablen sind auf den Bereich dieser Schleife beschränkt und können nicht von außerhalb der Schleife aufgerufen werden.

Sie können Variablen, die außerhalb einer Schleife definiert sind, aus einer Schleife heraus aufrufen, aber nicht umgekehrt. 

Sie können auch Funktionen verwenden, um Objekte zu verändern, um Werte in Dictionaries festzulegen oder Listenoperationen durchzuführen. Im folgenden Beispiel wird die .update Listenoperation verwendet:

{% set obj = {val : 0} %} {% for i in range(0, 10) %} {% do obj.update({val: obj.val + i }) %} {% endfor %} {{ obj.val }}45
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.