Verwenden von Modulen in Vorlagen

Last updated:

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.

Grundlegende Modul-Syntax

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.
Der Pfad für HubSpot-Standardmodule sollte immer mit @hubspot/ beginnen, gefolgt vom Typ des Moduls. Weitere Informationen finden Sie im nachstehenden Beispiel und auf der Seite zu Standardmodulen. 
{% 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="/Marketplace/HubSpotSiteSetup/Vast_Site_Setup/Custom_Modules/Vast FAQ Module", label="Vast FAQ Module" %}

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.

{% module "simple_section_title" path="@hubspot/text", label='Enter text for this section title', value='This is a section title' %}<span id="hs_cos_wrapper_simple_section_title" class="highlight hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text" > This is a section title </span>

Ü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

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.

{% 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 sich wiederholende Felder

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.

{% 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 auf Vorlagenebene für sich wiederholende Gruppen von Feldern.

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", } ] %}

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

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.

Modulfeldtypen und ihre Parameter
ParameterTypeDescription 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.

Feldbasierte Parameter

You can set the value of custom module fields using parameters.

{% module "faq" path="faq", label="Accessible FAQ Module", faq_group_title="Commonly Asked Questions" %}

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.

Festlegen von Standardwerten auf Vorlagenebene für Stilfelder

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.

{% dnd_module path="./to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}
So werden Modulfeldtypen als Parameter angegeben
Feld Typ Beispiel Schlüssel
Blog Blog-ID 1234567890  
Boolesch true/false false  
Auswahl Zeichenfolgenwert "option_1"  
Farbe Objekt 
{
  "color" : "#ffffff",
  "opacity" : 100
}
color
6 Zeichen im hexidezimalen 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 von E-Mail-Adresszeichenfolgen 
["develop@hubspot.com", "design@hubspot.com"]
  
Datei URL-String zur Datei 
"https://cdn2.hubspot.net/hubfs/file.pdf"
  
Follow-up-E-Mail ID der Follow-up-E-Mail 
1234567890
  
Schriftart Objekt mit Schriftartenschlüsseln und -werten 
{
  "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 mit Formularschlüsseln und -werten 
{
  "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 HubDB-Tabellen-ID 123456789  
Symbol Objekt mit Symbolschlüsseln und -werten 
{ 
  "name" : "align-center",
  "unicode" : "f037",
  "type" : "SOLID"
}
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 mit Bildschlüsseln und -werten 
{
  "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 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 
[ 
  { 
    "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 Tag-ID/-Slug (ID wird empfohlen) 1234567890  
Text Zeichenfolge "Es ist wie jeder andere String"  
URL Objekt mit URL-Schlüsseln und -Werten 
{ 
  "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 Landing-Pages
  • "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.