Verwenden von Modulen in Vorlagen
Module können entweder direkt zu einer Vorlage oder zu einzelnen Seiten mit Drag- & -Drop-Bereichen und flexiblen Spalten hinzugefügt werden. Wird ein Modul zu einer Vorlage hinzugefügt, wird das Modul standardmäßig an diesem Ort angezeigt. Module in Drag-&-Drop-Bereichen und flexiblen Spalten können verschoben und entfernt und um sie herum können weitere Module hinzugefügt werden. Dies sind Modulinstanzen.
Nachdem ein Modul definiert wurde, können Sie seine Feldwerte auf Vorlagenebene über das content.widgets -Dictionary abrufen.
HubL-Modul-Tags werden durch {% %}
getrennt und müssen module
, einen eindeutigen Namen und den Design-Manager-Pfad des Moduls angeben. Ein Modul kann auch Parameter für zusätzliche Einstellungen enthalten.
- Modulname: gibt dem Modul eine eindeutige Identität im Kontext der Vorlage.
- Der Name muss in Anführungszeichen nach dem Typ des Moduls stehen und Unterstriche anstelle von Leerzeichen oder Bindestrichen verwenden.
- Dieser Name wird verwendet, um den im Seiten-/E-Mail-Editor festgelegten Inhalt mit dem entsprechenden HubL-Modul-Tag abzugleichen. Wenn Sie z. B. ein HubL-Modul-Tag mit dem gleichen Namen in zwei verschiedenen Bereichen einer Vorlage kodieren, können Benutzer nur ein Modul im Editor bearbeiten, aber Änderungen an diesem Modul werden an beiden Stellen übernommen.
- Der Name muss in Anführungszeichen nach dem Typ des Moduls stehen und Unterstriche anstelle von Leerzeichen oder Bindestrichen verwenden.
- Pfad: definiert je nach Tag den Ort, an dem sich das Modul im Design-Manager befindet.
/
steht für das Stammverzeichnis des aktuellen Laufwerks;./
steht für das aktuelle Verzeichnis;../
steht für das übergeordnete Verzeichnis des aktuellen Verzeichnisses.
@hubspot/
, gefolgt vom Typ des Moduls.
- Parameter: zusätzliche Einstellungen für die Modulinstanz, die ihr Verhalten und die Art und Weise, wie sie gerendert wird, angeben. Enthält Standardwerte auf Vorlagenebene für Modulfelder.
- Parameter sind durch Kommas getrennte Schlüssel-Wert-Paare.
- Parameter haben verschiedene Typen, darunter Zeichenfolge, boolesch, ganze Zahl, Enumeration und JSON-Listenobjekt. Zeichenfolgenparameterwerte müssen in einfachen oder doppelten Anführungszeichen stehen, während boolesche Parameter keine Anführungszeichen um ihre
True
- oderFalse
-Werte erfordern. Erfahren Sie mehr über die Parameter, die für alle Module verfügbar sind. - Beachten Sie, dass es im Vergleich zu den Feldeinstellungen des Moduls keine Überprüfung im Editor für Feldwerte gibt. Wenn beispielsweise ein Modul ein Zahlenfeld hat, dessen Mindestwert auf
1
gesetzt ist, und Sie dem Parameter eine0
übergeben, wird keine Warnung angezeigt, dass der Wert ungültig ist.
Bei Modulen mit Feldern, die Dictionarys erwarten, können Sie diese wie andere Parameter übergeben. Wenn es für Sie übersichtlicher ist oder Sie die Werte wiederverwenden wollen, können Sie das Dictionary auf eine Variable festlegen und die Variable stattdessen an den Parameter übergeben.
Drag-&-Drop-Tags, z. B. dnd_area
, enthalten eine Reihe von Standardparametern, z. B. width
. Während der Design-Manager verhindert, dass Sie neue Felder erstellen, die einen dieser reservierten Parameter verwenden, können Module, die vor der Einführung von Drag-&-Drop-Tags erstellt wurden, bereits einen reservierten Parameter verwenden.
Um dies zu beheben, können Sie den fields
-Parameter verwenden. Genau wie bei der Übergabe von Felddaten an eine Gruppe können Sie den Feldnamen als Schlüssel für das fields
-Objekt übergeben. Sein Wert muss mit dem Format übereinstimmen, das der Feldtyp erwartet.
Sie können Standardwerte für Modulfelder auf Vorlagenebene festlegen, indem Sie Parameter in die dnd_module
-Tags einbeziehen. Im Folgenden erfahren Sie, wie Sie Standardfeldwerte in verschachtelten Feldgruppen, Wiederholungsfeldern, Wiederholfeldgruppen und Stilfeldern festlegen.
Unten sehen Sie ein Beispiel für ein benutzerdefiniertes Drag-&-Drop-Modul mit einer benutzerdefinierten style
-Feldgruppe, die andere verschachtelte Feldgruppen enthält. Vergleichen Sie die Konfiguration auf Vorlagenebene mit der Darstellung der gleichen Gruppierung im Design-Manager.
Sie können Standardwerte auf Vorlagenniveau für sich Wiederholfelder festlegen, indem Sie ein Array an den Parameter des Feldes übergeben. Die Elemente des Arrays müssen in dem Format vorliegen, das aufgrund des Feldtyps erwartet wird. Zum Beispiel:
- Ein einfaches Textfeld erwartet nur einen String
- Ein Bildwiederholfeld erwartet ein Bildfeldobjekt. Dies gilt auch für alle anderen Feldtypen.
Bei Modulen, die sich wiederholende Gruppen von Feldern enthalten – z. B. bei einem Diashow-Modul oder einem FAQ-Modul – kann für diese Gruppen ein Standardwert auf Vorlagenebene festgelegt werden. Dazu übergeben Sie ein Array von Objekten an den Parameter Ihrer Feldgruppe. Die Schlüssel- und Wertepaare des Objekts sind die Feldnamen und ihre Werte.
Sie können mit dem styles
-Parameter explizit Standardwerte für Stilfelder festlegen.
Dies funktioniert genau wie bei anderen Gruppen, bei denen der Parameter der Name der Gruppe ist. Sie übergeben diesem Parameter ein Objekt mit allen Feldern, die Sie fenstlegen möchten.
Während die meisten Module über Parameter verfügen, die Standardinhalte steuern, kann es Situationen geben, in denen Sie große Codeblöcke zum Standardinhalt eines Moduls hinzufügen müssen. Sie können zum Beispiel einen großen HTML-Block als Standardinhalt für ein Rich-Text- oder HTML-Modul einfügen. Anstatt zu versuchen, diesen Code in einen Wertparameter zu schreiben, können Sie die HubL-Block-Syntax verwenden.
Vor der module_block
-Syntax wurde widget_block
verwendet. Sie folgt dem gleichen Muster, aber die öffnenden Tags waren widget_block
und widget_attribute
. Schließende Tags waren end_widget_attribute
und end_widget_block
.
Die widget_block
-Syntax ist veraltet, aber Sie müssen den alten Code nicht zu aktualisieren.
Der Parameter, der unmittelbar auf module_block
oder widget_block
(veraltet) folgt, ist der Parameter type_of_module
.
In fast allen unseren Dokumentationen werden Sie feststellen, dass wir Module
verwenden. V2 HubSpot-Module sind normale Module, wie Sie sie erstellen können. Daher besteht keine Notwendigkeit mehr, einen anderen type_of_module
zu verwenden.
Während widget_block
veraltet ist, sollten Sie module_block
verwenden. Wenn Sie eine Website von einem anderen Entwickler geerbt haben, kann sie alten Code mit widget_block
und type_of_module
enthalten.
Der type_of_module
unterstützt V1 HubSpot-Modulnamen, zum Beispiel: rich_text
oder raw_html
. In der ersten Zeile von HubL können zusätzliche Parameter hinzugefügt werden. In der zweiten Zeile wird festgelegt, auf welchen Parameter die Inhalte des Blocks angewendet werden sollen. Bei einem rich_text
-Modul sollte dies beispielsweise der HTML-Parameter sein. Bei einem raw_html
-Modul wäre dies der Wertparameter (siehe beide Beispiele unten).
Neben der regulären und der Block-Syntax gibt es bestimmte Fälle, in denen Sie einen großen Block Standardinhalt für eine vordefinierte Inhaltsvariable angeben möchten. Das häufigste Beispiel hierfür ist die Variable content.email_body. Diese Variable druckt einen Standard-E-Mail-Text, der im Content-Editor geändert werden kann. Da es sich nicht um ein Standard-HubL-Modul handelt, verwenden wir ein content_attribute-Tag, um einen Block mit Standardinhalten anzugeben. Das folgende Beispiel zeigt die E-Mail-Textvariable, die mit einem Standard-Inhaltscodeblock gefüllt ist.
Eine Module verfügen zwar über bestimmte spezielle Parameter, die Parameter in der folgenden Liste werden jedoch von allen Modulen unterstützt.
Parameter | Type | Description | Default |
---|---|---|---|
label
| Zeichenfolge | Der Name des Moduls, der im Content-Editor angezeigt wird. Dieser Parameter kann auch verwendet werden, um dem Benutzer zusätzliche Anweisungen zu geben. | |
overrideable
| Boolesch | Steuert, ob das Modul im Content-Editor bearbeitet werden kann oder nicht. Dies entspricht der Einstellung „Bearbeiten in Content-Editoren verhindern“ im Design-Manager. |
True
|
no_wrapper
| Boolesch | Bei Festlegung auf Auf Seiten sind Module immer in ein |
False
|
extra_classes
| Zeichenfolge | Fügt Klassen zum Modul-Wrapper hinzu. Sie können mehrere Klassen hinzufügen, indem Sie die Klassen durch Leerzeichen trennen. Zum Beispiel:
| |
export_to_template_context
| Boolesch | Bei Festlegung auf |
False
|
unique_in_loop
| Boolesch | Hängt den Modulnamen mit dem loop.index an, wenn das Modul innerhalb einer Schleife definiert ist. Bei Festlegung auf |
False
|
Um eine vollständige Liste aller Modultypen und ihrer Parameter zu sehen, klicken Sie hier.
Im Folgenden erfahren Sie mehr über die feldbasierten Modulparameter, die Sie verwenden können.
Feld | Typ | Beispiel | Schlüssel |
---|---|---|---|
Blog | Ganzzahl (Blog-ID) | 1234567890 |
|
Boolesch | true/false | false |
|
Auswahl | Zeichenfolge | "option_1" |
|
Farbe | Objekt |
|
|
CTA | Zeichenfolge (CTA-ID) |
|
|
Datum | Zeitstempel |
|
|
Datetime | Zeitstempel |
|
|
E-Mail-Adresse | Array (E-Mail-Adresszeichenfolgen) |
|
|
Datei | Zeichenfolge (URL der Datei) |
|
|
Follow-up-E-Mail | Ganzzahl (ID der Follow-up-E-Mail) |
|
|
Schriftart | Objekt |
|
|
Formular | Objekt |
|
|
HubDB-Tabelle | Ganzzahl (HubDB-Tabellen-ID) | 123456789 |
|
Symbol | Objekt |
|
|
Bild | Objekt |
|
|
Link | Objekt |
|
|
Logo | Objekt |
|
|
Meeting | Zeichenfolge (Meetinglink) | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
Menü | Ganzzahl (Menü-ID) | 123456789 |
|
Zahl | Ganzzahl | 1 |
|
Seite | Ganzzahl (Seiten-ID) | 1234567890 |
|
richtext | Zeichenfolge (kann HTML enthalten) | "<h1>Hallo, Welt!</h1>" |
|
Salesforce-Kampagne | Zeichenfolge (Salesforce-Kampagnen-ID) | "7016A0000005S0tQAE" |
|
Einfaches Menü | Array von Menüeintragsobjekten |
|
|
Tag | Ganzzahl (Tag-ID oder Slug, ID wird empfohlen) | 1234567890 |
|
Text | Zeichenfolge | "Es ist wie jeder andere String" |
|
URL | Objekt |
|
|
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.