Verwenden von Modulen in Vorlagen
Module sind bearbeitbare Bereiche von HubSpot-Seiten oder -E-Mails. Modulinstanzen können mithilfe von HubL zu Vorlagen hinzugefügt werden. Wenn ein Modul in einer Vorlage definiert ist, erscheint es standardmäßig an dieser Stelle in der Vorlage. Befindet sich das Modul in einem bearbeitbaren Bereich, z. B. einem Drag-&-Drop-Bereich oder einer flexiblen Spalte, kann es entfernt oder verschoben werden, und es können andere Module hinzugefügt werden. Dies sind Modulinstanzen.
Die Moduldefinitionen – die Modul-Tags, die Sie zu Vorlagen hinzufügen können, definieren den Standardstatus für Modulinstanzen.
Nachdem ein Modul definiert wurde, können Sie bei Bedarf seine Feldwerte über content.widgets
auf der Vorlagenebene abrufen.
Modul-Tags setzen sich aus folgenden Komponenten zusammen:
- Ein eindeutiger Name für dieses Modul – gibt dem Modul eine eindeutige Identität im Kontext der Vorlage.
- Pfad: (abhängig vom Tag) – definiert 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.
- Parameter –zusätzliche Einstellungen für die Instanz des Moduls. Enthält Standardwerte auf Vorlagenebene für Modulfelder.
@hubspot/
beginnen, gefolgt vom Typ des Moduls. Weitere Informationen finden Sie im nachstehenden Beispiel und auf der Seite zu Standardmodulen.
HubL-Modul-Tags werden durch {%
getrennt und erfordern die Angabe des Modultyps und eines eindeutigen Namens. Der eindeutige Name muss in Anführungszeichen hinter dem Typ des Moduls stehen. Anstelle von Leerzeichen oder Bindestrichen müssen Modulnamen Unterstriche verwenden.
Der eindeutige Name wird verwendet, um Inhalte, die mit dem Seiten-/E-Mail-Editor eingegeben wurden, dem entsprechenden HubL-Modul-Tag zuzuordnen. Wenn Sie z. B. ein HubL-Modul-Tag mit demselben 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.
Zusätzlich zu den beiden erforderlichen Komponenten eines Modul-Tags unterstützen HubL-Module verschiedene Parameter, die das Verhalten eines Moduls und seine Darstellung festlegen. Parameter sind durch Kommas getrennte Schlüssel-Wert-Paare. Parameter haben verschiedene Typen, darunter Zeichenfolge, boolesch, ganze Zahl, Enumeration und JSON-Liste. Bei Zeichenfolgenparametern sollte der Wert in Anführungszeichen* stehen, während bei booleeschen Parametern keine Anführungszeichen für die Werte True oder False erforderlich sind. Nachfolgend finden Sie ein Beispiel für ein einfaches Textmodul, bei dem ein Label und ein Wertparameter angegeben sind.
*Zeichenfolgenparameterwerte können entweder in einfache oder doppelte Anführungszeichen gesetzt werden. In diesem Beispiel steht der eindeutige Modulname in doppelten Anführungszeichen und die Parameterwerte stehen in einfachen Anführungszeichen. Diese Syntax ist hilfreich, wenn Parameterwerte HTML-Markup mit mehreren Attributen enthalten. Booleesche Parameterwerte werden zur besseren Lesbarkeit groß geschrieben.
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.
Als wir dnd_area
und alle HubL-Tags eingeführt haben, die Sie damit verwenden, wurde es möglich, ein Modulfeld mit demselben Namen wie einen bestehenden dnd-Parameter zu haben. Der Design-Manager verhindert, dass Sie neue Felder erstellen, die einen dieser reservierten Parameternamen verwenden, aber das hilft nicht bei alten Modulen. Um dies zu beheben, haben wir einen fields
-Parameter hinzugefügt. Genau wie bei der Übergabe von Felddaten für 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 auf Vorlagenniveau für sich wiederholende Felder 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. Ein einfaches Textfeld beispielsweise erwartet nur eine Zeichenfolge, ein Bildwiederholfeld erwartet das Objekt eines Bildfeldes. 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.
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.
Bestimmte Module haben bestimmte spezielle Parameter, aber es gibt auch Parameter, die von allen Modulen unterstützt werden. Nachstehend finden Sie eine Liste der von allen Modulen unterstützten Parameter.
Parameter | Type | Description | Default |
---|---|---|---|
label
| String | Legt den internen Titel des Moduls im Content-Editor fest. Dieser Parameter kann auch verwendet werden, um dem Benutzer zusätzliche Anweisungen zu geben. | |
overrideable
| Boolean | Steuert, ob das Modul im Content-Editor bearbeitet werden kann oder nicht. Dieser Parameter entspricht der Verwendung der Funktion „Modul sperren“ auf der Benutzeroberfläche des Vorlagendesigners. |
True
|
no_wrapper
| Boolean | Mit der Einstellung no_wrapper=True wird das Wrapping-Markup um den Inhalt eines Moduls entfernt. Die Modulausgabe auf der Seite ist immer in ein <div> mit speziellen Klassen umhülltes Format eingeschlossen. Wenn Sie bei diesem Wrapping-Markup im Vorschaufenster auf das Modul klicken, blättert der Editor zu diesem Modul. Es kann Fälle geben, in denen Sie den Wrapper entfernen sollten, z. B. wenn Sie ein Textmodul verwenden möchten, um das Ziel eines href-Attributs eines Anker-Tags zu füllen. |
False
|
extra_classes
| String | Durch Hinzufügen eines extra_classes-Parameters werden diese Klassen zum Wrapping des Modulinhalts hinzugefügt. Sie können mehrere Klassen auf einmal hinzufügen, indem Sie die Klassen durch Leerzeichen trennen (z. B. extra_classes='full-width panel'). | |
export_to_template_context
| Boolean | Bei True sind die Parameter dieses Widgets im Vorlagenkontext verfügbar, anstatt den HTML-Code zu rendern. So verwenden Sie diesen Parameter und das widget_data-Tag. |
False
|
unique_in_loop
| Boolean | Dieser Parameter kann verwendet werden, wenn ein Modul innerhalb einer Schleife definiert wird, um den eindeutigen Modulnamen mit dem loop.index anzuhängen. Wenn True, ist es möglich, bei jeder Iteration der Schleife eine andere Version des Moduls zu drucken. |
False
|
Um eine vollständige Liste aller Modultypen und ihrer Parameter zu sehen, klicken Sie hier.
You can set the value of custom module fields using parameters.
faq_group_title
ist in diesem Fall nicht einer der Parameter, die für alle Module verfügbar sind. faq_group_title
ist spezifisch für dieses benutzerdefinierte Modul. Es ist der Variablenname für ein Feld im Modul.
Einige Felder sind einfach und der Parameter erwartet lediglich eine Zeichenfolge, eine ganze Zahl oder true/false. Andere erwarten vielleicht ein Objekt. Es liegt an Ihnen, die Werte im richtigen Format bereitzustellen, da es keine bearbeitbare Wertüberprüfung auf der Grundlage der Einstellungen gibt, die Sie in den Feldeinstellungen des benutzerdefinierten Moduls festgelegt haben. Beispiel: Ein Modul hat ein Zahlenfeld, dessen Mindestwert auf 1 gesetzt ist, Sie übergeben dem Parameter eine 0. Es gibt keine Warnung, die Sie darauf hinweist, dass Ihr Wert ungültig ist.
Wenn Sie Vorlagen mit Modulen erstellen, die Stilfelder enthalten, können Sie mit dem styles-Parameter explizit Standardwerte für Stilfelder festlegen.
Dies funktioniert genau wie bei normalen Gruppen, der Parameter ist der Name der Gruppe. Sie übergeben diesem Parameter ein Objekt mit allen Feldern, die Sie fenstlegen möchten.
Feld | Typ | Beispiel | Schlüssel |
---|---|---|---|
Blog | Blog-ID | 1234567890 | |
Boolesch | true/false | false | |
Auswahl | Zeichenfolgenwert | "option_1" | |
Farbe | Objekt |
|
|
CTA | Zeichenfolge, CTA-ID |
|
|
Datum | Zeitstempel |
|
|
Datetime | Zeitstempel |
|
|
E-Mail-Adresse | Array von E-Mail-Adresszeichenfolgen |
|
|
Datei | URL-String zur Datei |
|
|
Follow-up-E-Mail | ID der Follow-up-E-Mail |
|
|
Schriftart | Objekt mit Schriftartenschlüsseln und -werten |
|
|
Formular | Objekt mit Formularschlüsseln und -werten |
|
|
HubDB-Tabelle | HubDB-Tabellen-ID | 123456789 |
|
Symbol | Objekt mit Symbolschlüsseln und -werten |
|
|
Bild | Objekt mit Bildschlüsseln und -werten |
|
|
Link | Objekt mit Link-Schlüsseln und -Werten |
|
|
Logo | Objekt mit Logo-Schlüsseln und -Werten |
|
|
Meeting | Zeichenfolge von Meeting-Link-URL | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
Menü | Menü-ID | 123456789 |
|
Zahl | Ganzzahl | 1 |
|
Seite | 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 | Tag-ID/-Slug (ID wird empfohlen) | 1234567890 |
|
Text | Zeichenfolge | "Es ist wie jeder andere String" |
|
URL | Objekt mit URL-Schlüsseln und -Werten |
|
|
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.