Verwenden von Modulen in Vorlagen

Last updated:

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.

Grundlegende Modul-Syntax

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.
  • 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.
Der Pfad für HubSpot-Standardmodule beginnt immer mit @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- oder False-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 eine 0 übergeben, wird keine Warnung angezeigt, dass der Wert ungültig ist.
{# Basic syntax #} {% module "unique_module_name" path="@hubspot/module_type", parameterString='String parameter value', parameterBoolean=True %} {# Sample of a default HubSpot text module #} {% module "job_title" path="@hubspot/text", label="Job Title", value="Chief Morale Officer" %} {# Sample of a custom module #} {% module "faqs" path="/myWebsite/modules/faq_module", label="Custom FAQ Module" faq_group_title="Commonly Asked Questions" %}

Übergabe von Dictionarys an Modulparameter

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.

{% module "social_buttons", path="@hubspot/social_sharing", email={ "default": true, "enabled": false, "img_src": "https://..." } %}

Übergabe von Feldern mit Parametern, denen Drag-&-Drop-Bereiche zugeordnet sind

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.

{% dnd_area "main_content"%} {% dnd_section %} {% dnd_column %} {% dnd_row %} {% dnd_module path="@hubspot/divider", fields={width: "90"} %} {% end_dnd_module %} {% end_dnd_row %} {%end_dnd_column%} {% end_dnd_section %} {% end_dnd_area %}

Festlegen von Standardwerten auf Vorlagenebene für Felder

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.

Festlegen von Standardwerten für verschachtelte Feldgruppen

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.

{% dnd_module path="/Nested_Module.module" style={ "group":{ "section":{ "color_field":{ "color" : "#000", "opacity" : 100 } } } } %} {% end_dnd_module %}
Feldverschachtelung mit mehreren Ebenen

Festlegen von Standardwerten für Wiederholfelder

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.
{% module path='../modules/recipe_card.module', ingredients=["Eggs","Ham","Cheese"] %} {% module "my_repeater_module" path="/img_repeater_module", label="img_repeater_module", image=[ { "src" : "https://cdn2.hubspot.net/hubfs/428357/Developer%20Site/assets/logo/Developers-LOGO.svg", "alt" : "HubSpot Developers", "width" : 254, "height" : 31 },{ "src" : "https://www.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", "alt" : "Dharmesh", "width" : 394, "height" : 394 } ] %}

Festlegen von Standardwerten für sich wiederholende Feldgruppen

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.

{% module path='../modules/slideshow.module', slides=[ { "caption":"Cute dog looking up", "image_url":"http://example.com/image.jpg", }, { "caption":"Cuter cat not looking amused", "image_url":"http://example.com/image2.jpg", } ] %}

Festlegen von Standardwerten für Stilfelder

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.

{% dnd_module path="./path/to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}

Block-Syntax

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.

{% module_block module "my_rich_text_module" path="/My Rich Text Field Module", label="My Rich Text Field Module" %} {% module_attribute "rich_text_field_variable" %} <div>My HTML block</div> {% end_module_attribute %} {% end_module_block %}

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). 

{# widget_block is deprecated, use module_block instead. This example is only to explain what type_of_module was used for, for those with legacy code. #} {% widget_block rich_text "my_rich_text_module" overrideable=True, label='My rich-text module' %} {% widget_attribute "html" %} <h2>New Module</h2> <p>Add content here.</p> {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_my_rich_text_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>New Module</h2> <p>Add content here.</p> </span>

content_attribute

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.

{% content_attribute "email_body" %} <p>Hi {{ contact.firstname }},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p> {% end_content_attribute %}

Für alle Module verfügbare Parameter

Eine Module verfügen zwar über bestimmte spezielle Parameter, die Parameter in der folgenden Liste werden jedoch von allen Modulen unterstützt.

ParameterTypeDescription 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 True wird das Wrapping-Markup um den Inhalt eines Moduls entfernt.

Auf Seiten sind Module 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 Anchor-Tags zu füllen.

 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:

extra_classes='full-width panel'
export_to_template_context
Boolesch

Bei Festlegung auf True sind die Parameter dieses Widgets im Vorlagenkontext verfügbar, anstatt den HTML-Code zu rendern. Erfahren Sie, wie Sie diesen Parameter und das widget_data-Tag verwenden.

 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 True wird eine andere Version des Moduls innerhalb jeder Iteration der Schleife gedruckt. Hängt den Modulnamen mit dem loop.index an.

 False

Um eine vollständige Liste aller Modultypen und ihrer Parameter zu sehen, klicken Sie hier.

Feldbasierte Parameter

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 
{
  "color" : "#ffffff",
  "opacity" : 100
}
color
6 Zeichen im hexadezimalen Format
opacity
ganze Zahl 0 bis 100
CTA Zeichenfolge (CTA-ID) 
"fb9c0055-6beb-489d-8dda-3e1222458750"
  
Datum Zeitstempel 
1566360000000
  
Datetime Zeitstempel 
1566360000000
  
E-Mail-Adresse Array (E-Mail-Adresszeichenfolgen) 
["develop@hubspot.com", "design@hubspot.com"]
  
Datei Zeichenfolge (URL der Datei) 
"https://cdn2.hubspot.net/hubfs/file.pdf"
  
Follow-up-E-Mail Ganzzahl (ID der Follow-up-E-Mail) 
1234567890
  
Schriftart Objekt 
{
  "size" : 12,
  "size_unit" : "px",
  "color" : "#000",
  "styles" :{
    "text-decoration" : "underline"
  },
  "font" : "Alegreya",
  "fallback" : "serif",
  "variant" : "regular",
  "font_set" : "GOOGLE"
}
size
Schriftgröße ohne Einheitentyp
size_unit
Zeichenfolge Schriftgrößeneinheit
  • "px"
  • "pt"
  • "em"
  • "rem"
  • "%"
  • "ex"
  • "ch"
color
hexadezimale Farbcodezeichenfolge
styles
unterstützte Eigenschaften
"font-weight"
"normal"/"bold"
"font-style"
"normal"/"italic"
"font-style"
"none"/"underline"
Formular Objekt 
{
  "form_id" : "9aa2e5f3-a46d-4774-897e-0bc37478521c",
  "response_type" : "redirect",
  "redirect_url" : "http://www.hubspot.com",
  "redirect_id" : null,
  "form_type" : "HUBSPOT"
}
form_id
Die ID des Formulars. So rufen Sie die ID eines Formulars ab.
response_type
"redirect"/"inline"
message
Bei Verwendung von response_type "inline" angezeigte Meldung. Zeichenfolge, die HTML unterstützt.
redirect_url
Zeichenfolge, absolute URL zu einer Webseite
redirect_id
Seiten-/Beitrags-ID, zu der weitergeleitet werden soll
form_type
"HUBSPOT"/"TICKET_FORM"
HubDB-Tabelle Ganzzahl (HubDB-Tabellen-ID) 123456789  
Symbol Objekt 
{ 
  "name" : "align-center",
  "unicode" : "f037",
  "type" : "SOLIDE"
}
name
Der Name des Symbols
unicode
Das Unicode-Symbol für die Schriftart, aus der das Symbol stammt
type
Symbol-Stil. "SOLID"/"REGULAR"
Es wird empfohlen, ein Symbolfeld festzulegen und die Werte auf diese Weise anzuzeigen, um die Parameter richtig festzulegen.
Bild Objekt 
{
  "src" : "https://cdn2.hubspot.net/hubfs/image.jpeg",
  "alt" : "an_image",
  "width" : 100,
  "height" : 100
}
src
Bild-URL
alt
Bild-ALT-Text, der von Bildschirmlesern und Suchmaschinen verwendet wird
width
Die Breite, mit der das Bild angezeigt werden soll
height
Die Höhe, mit der das Bild angezeigt werden soll
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 
[ 
  { 
    "isPublished" : true,
    "pageLinkId" : 123456789,
    "pageLinkName" : "Meine Seite",
    "isDeleted" : false,
    "categoryId" : 1,
    "subCategory" : "site_page",
    "contentType" : "site_page",
    "state" : "PUBLISHED_OR_SCHEDULED",
    "linkLabel" : "Dies ist eine Seite",
    "linkUrl" : null,
    "linkParams" : null,
    "linkTarget" : null,
    "type" : "PAGE_LINK",
    "children" : [ ]
  } 
]
isPublished
true/false, ist die Seite des Menüeintrags veröffentlicht?
pageLinkId
Seiten-ID im CMS
pageLinkName
Der tatsächliche Name der Seite im CMS
isDeleted
true/false
categoryId
  • 1 - Website-Seite
  • 3 - Blog-Beitrag
subCategory
  • site_page
  • landing_page
  • blog
  • normal_blog_post
contentType
  • site_page
  • landing_page
  • blog
state
  • DRAFT
  • DRAFT_AB
  • PUBLISHED
  • PUBLISHED_OR_SCHEDULED
  • PUBLISHED_AB
  • SCHEDULED
linkLabel
Text, den der Benutzer liest und anklickt
linkUrl
Tatsächliche URL, zu der der Benutzer beim Anklicken weitergeleitet wird
linkParams
Anzahl der Links oder ?-Abfrageparameter
linkTarget
Wenn „In neuem Tab öffnen“ aktiviert ist "_blank“, sonst "null"
type
  • "PAGE_LINK"
  • "PAGE_LINK_WITH_PARAMS"
  • "NO_LINK"
children
Array von Menüeintragsobjekten, identisch mit einzelnen Menüeinträgen.
Tag Ganzzahl (Tag-ID oder Slug, ID wird empfohlen) 1234567890  
Text Zeichenfolge "Es ist wie jeder andere String"  
URL Objekt 
{ 
  "type" : "CONTENT",
  "href" : null,
  "content_id" : 123456789
}
type
  • "EXTERNAL" für Nicht-HubSpot-URLs, die nicht per E-Mail verschickt werden
  • "CONTENT" für Seiten, Blog-Beiträge und Landingpages
  • "FILE" für Dateien, die in den Datei-Manager hochgeladen werden
  • "EMAIL_ADDRESS" für E-Mail-Adressen
  • "BLOG" für Blog-Listing-Seiten
href
Zeichenfolge, die URL, auf die Sie verlinken.
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.