Letzte Änderung: 22. August 2025
Diese Seite ist ein umfassender Referenzleitfaden der Syntax und der verfügbaren Parameter für alle standardmäßigen HubL-Tags, einschließlich der Tags für Systemseiten wie die E-Mail-Abonnement-Seite. Jedes der folgenden Tags enthält ein Beispiel für die grundlegende Syntax sowie ein Beispiel mit Parametern und Code-Ausgabe. Wenn Sie Drag-&-Drop-Bereiche erstellen, erfahren Sie hier mehr über Drag- & -Drop-Bereich-Tags. Wenn Sie eine ältere Website betreiben, sollten Sie sich auch die Liste der veralteten HubL-Tags ansehen.
Für die meisten Tags auf dieser Seite gibt es Äquivalente in den Standardmodulen. Module können innerhalb von dnd_areas und flexiblen Spalten verwendet werden, was sie leistungsfähiger und benutzerfreundlicher macht als die Tags, die Sie hier sehen.

Blogkommentare

Rendert den Code zum Einbetten von Kommentaren in einer Blog-Vorlage, einschließlich der Kommentare selbst und des Formulars für Kommentare. Weitere Informationen zum Anpassen der Einstellungen für Blogkommentare und Formulare finden Sie in der Wissensdatenbank.
{% blog_comments "blog_comments" label="Blog comments" select_blog="359485112" %}
ParameterTypBeschreibungStandard
limitZahlLegt die maximale Anzahl von Kommentaren fest.5000
select_blog”default” oder Blog-IDGibt an, welcher Blog mit der Kommentareinbettung verknüpft ist. Dieser Parameter akzeptiert als Argumente entweder "default" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). Wenn Sie Ihren Standard-Blog verwenden möchten, ist dieser Parameter nicht erforderlich.default
skip_cssBooleschWenn Sie diese Option auf True festlegen, wird das Laden des CSS für Blogkommentare verhindert.false
messageZeichenfolgeDie Nachricht, die angezeigt wird, wenn keine Kommentare vorhanden sind. Standardmäßig ist diese Nachricht leer (es wird kein Text angezeigt).""

Blog-Inhalt

Während Drag-and-Drop-Layouts ein Blog-Inhaltsmodul enthalten, werden diese Module nicht mit einem einzigen Tag erstellt. Sie verwenden stattdessen bedingte Logik, um zu definieren, wie ein Blogbeitrag und eine Blog-Auflistung gerendert werden sollen. Mehr über die Programmieren von Blog-Vorlagen erfahren Sie hier.

Blogbeitragsfilter

Erstellt eine verlinkte Auflistung von Beiträgen nach Thema, Beiträgen nach Monat oder Beiträgen nach Autor.

Hinweis:

Dieses Modul kann nur in Blogbeitragsvorlagen verwendet werden.
{% post_filter "post_filter" %}
{% post_filter "posts_by_topic"
select_blog="default",
expand_link_text="see all",
overrideable=False,
list_title="Posts by Topic",
max_links=5,
filter_type="topic",
label="Posts by Topic"
%}
ParameterTypBeschreibungStandard
select_blog”default” oder Blog-IDWählt den zu verwendenden HubSpot-Blog aus. Dieser Parameter verwendet entweder eine Blog-ID oder einen “default”-Wert."default"
expand_link_textZeichenfolgeText-Link, der angezeigt werden soll, wenn mehr Beiträge als die max_links-Anzahl vorhanden sind. exclude-Parameter, um den Link wegzulassen."see all"
list_titleZeichenfolgeAngezeigte Listentitel.""
list_tagZeichenfolgeLegt das für die Liste verwendete Tag fest. Der Wert sollte im Allgemeinen "ul" oder "ol" sein."ul"
title_tagZeichenfolgeLegt das für den Listentitel verwendete Tag fest."h3"
max_linksZahlMaximale Anzahl an anzuzeigenden Filterwerten. Bei Weglassen des Parameters werden alle angezeigt.5
filter_typeAufzählungWählt die Art des Filters aus. Mögliche Werte sind "topic", "month" und "author"."topic"

Blogbeitragsauflistung

Fügt eine Auflistung der beliebtesten oder besten Beiträge hinzu.

Hinweis:

Dieses Tag kann nur in Blogbeitragsvorlagen verwendet werden. Der Inhalt des Tags wird asynchron auf der Client-Seite geladen. Wenn Sie also den Feed nach dem Laden bearbeiten möchten, müssen Sie eine globale JS-Funktion definieren, die diese Bearbeitung übernimmt. Verwenden Sie die Funktion hsPostListingComplete(feeds), wobei feeds der jQuery-Selektor in allen Feeds ist, die abgeschlossen wurden. Sie sollten das DOM-Objekt in dieser Funktion direkt bearbeiten.
{% post_listing "post_listing" %}
{% post_listing "top_posts" select_blog="default", label="Recent Posts", overrideable=False, list_title="Recent Posts", listing_type="recent", max_links=5 %}
ParameterTypBeschreibungStandard
select_blog”default” oder Blog-IDWählt den HubSpot-Blog aus, der für die Auflistung verwendet werden soll. Dieser Parameter verwendet entweder eine Blog-ID oder einen "default"-Wert."default"
list_titleZeichenfolgeAngezeigte Listentitel.""
list_tagZeichenfolgeLegt das für die Liste verwendete Tag fest. Der Wert sollte im Allgemeinen "ul" oder "ol" sein."ul"
title_tagZeichenfolgeLegt das für den Listentitel verwendete Tag fest."h3"
listing_typeZeichenfolgeListen Sie die Blogbeiträge nach den neuesten oder beliebtesten in einem bestimmten Zeitraum auf. Mögliche Werte sind „recent“, „popular_all_time“, „popular_past_year“, „popular_past_six_months“ und „popular_past_month“."recent"
max_linksZahlMaximale Anzahl an aufzulistenden Blogbeiträgen.5
include_featured_imageBooleschZeigt ein Feature-Bild zusammen mit dem Link zum Beitrag an.False

Beiträge im Zusammenhang mit dem Blog

Fügt eine Auflistung von Blogbeiträgen hinzu, die auf einer Reihe von Parametern basiert, die von Beiträgen verschiedener Blogs geteilt werden. Beiträge werden anhand ihrer Relevanz für die festgelegten Parameter ausgewählt. Dieses Tag generiert nicht ein bearbeitbares Modul auf Seiten-/Beitragsebene, sondern wird vollständig mit HubL konfiguriert.
{% related_blog_posts
limit=2,
blog_ids="1,2",
tags="Sales enablement,Marketing",
blog_authors="John Smith,Frank Smith",
path_prefixes="/business-blog",
start_date="2018-04-10",
end_date="2018-04-10",
blog_post_override="2783035366"
%}
ParameterTypBeschreibungStandard
blog_idsZahlDie IDs der Blogs, von denen Beiträge aufgenommen werden sollen. Wenn nicht angegeben, enthalten sie Beiträge vom Standard-Blog.
blog_post_idsZeichenfolgeDie IDs der Blogbeiträge, die beim Auffinden relevanter Blogbeiträge verwendet werden sollen, getrennt durch Kommas. Verwenden Sie diesen Parameter nur, wenn das Widget auf Seiten angezeigt wird. Wenn er in Blogbeiträgen verwendet wird, sucht er nach relevanten Beiträgen, die auf dem aktuell angezeigten Blogbeitrag basieren.
blog_post_overrideZeichenfolgeDie IDs der Blogbeiträge, die trotz aller anderen Parameterwerte und Filter immer in der zurückgegebenen Auflistung erscheinen sollen (durch Komma getrennt).
limitZahlDie maximale Anzahl an aufzulistenden Blogbeiträgen.3
tagsZeichenfolgeDie Blog-Tags, die verwendet werden sollen, um festzustellen, ob ein Beitrag relevant ist (durch Komma getrennt). Blogbeiträge mit den angegebenen Tags werden für die Relevanz höher eingestuft.
tag_boostZahlErhöht die Gewichtung der Tags, die im tags-Parameter angegeben sind, um verwandte Beiträge zu generieren. Berücksichtigen Sie diesen Parameter, um Beiträge zu übernehmen, die in engerem Zusammenhang mit den derzeit angezeigten oder angegebenen Beiträgen stehen. Akzeptiert positive Zahlen.
start_datedatetimeDatum der frühesten Veröffentlichung. Ein Beispiel finden Sie unten.
end_datedatetimeDatum der letzten Veröffentlichung. Ein Beispiel finden Sie unten.
blog_authorsZeichenfolgeDie Namen der Autoren, von denen Beiträge aufgenommen werden sollen (durch Komma getrennt). Ein Beispiel finden Sie unten.
path_prefixesZeichenfolgeURL-Pfade oder Unterverzeichnisse, aus denen Beiträge aufgenommen werden sollen (durch Komma getrennt). Wenn ein Blogbeitrag ein ähnliches Präfix in seinem Pfad hat, wird die Relevanz des Beitrags erhöht und damit sein Ranking im Listing verbessert.
callbackZeichenfolgeDer Name einer JavaScript-Funktion, um zurückgegebene Blogbeiträge darzustellen. Der Funktion wird ein Array von Blogbeitragsobjekten übergeben, die formatiert werden sollen. Wenn weder der callback- noch der post_formatter-Parameter angegeben ist, erzeugt das Tag HTML in einem Standardformat. Nachfolgend finden Sie ein Beispiel.none
post_formatterZeichenfolgeDer Name eines benutzerdefinierten Makros zum Rendern zurückgegebener Blogbeiträge. Dem Makro werden drei Parameter übergeben, nämlich das zu formatierende Blogbeitragsobjekt, die Anzahl der Blogbeiträge in der Iteration und die Gesamtzahl der Blogbeiträge in den Ergebnissen. Wenn nicht angegeben oder auf default festgelegt, wird der integrierte Formatierer verwendet, um jeden Beitrag zu formatieren.default
allow_any_languageBooleschWenn diese Option auf false festgelegt ist, werden nur Beiträge in der Sprache der Seite angezeigt, auf der das Tag verwendet wird. Wenn auf true festgelegt ist, wird die Sprachbeschränkung ignoriert und alle zugehörigen Beiträge werden unabhängig von der Sprache der Seite übernommen.False
Wir empfehlen dringend die Verwendung des callback-Parameters anstelle von post_formatter, um die Ladegeschwindigkeit der Seite zu verbessern.

Beispiele

In diesem Beispiel wird eine Auflistung von Beiträgen generiert, die von einem der drei angegebenen blog_authors in zwei verschiedenen Blogs verfasst wurden.
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}
Im folgenden Beispiel wird eine Liste mit 10 Beiträgen generiert, die sich auf einen bestimmten Blogbeitrag beziehen, das Blog-Tag „sales enablement“ enthalten und auf einen bestimmten Veröffentlichungszeitraum beschränkt sind. Dieses Beispiel gibt den blog_post_ids-Parameter an, sodass er auf einer Seite verwendet wird.
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}
Im folgenden Beispiel wird mithilfe des callback-Parameters eine Auflistung von fünf Beiträgen generiert, um die HTML-Ausgabe der Beitrags-Auflistung zu steuern.
{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="https://developers.hubspot.de/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://developers.hubspot.de/docs${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';

      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>

Social-Media-Sharing in Blogs

Bei Social-Media-Sharing in Blogs werden Teilen-Zähler in Ihren Blogbeiträgen dargestellt (falls in den Inhaltseinstellungen aktiviert).
{% blog_social_sharing "blog_social_sharing" %}
{% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}
ParameterTypBeschreibungStandard
select_blog”default” oder Blog-IDGibt an, welcher Blog mit den Teilen-Zählern verknüpft ist. Dieser Parameter akzeptiert als Argumente entweder "default" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). Wenn Sie Ihren Standard-Blog verwenden möchten, ist dieser Parameter nicht erforderlich.default
downgrade_shared_urlBooleschVerwenden Sie HTTP in der an die sozialen Netzwerke gesendeten URL. Wird verwendet, um Zählungen beizubehalten, wenn Domains auf HTTPS umgestellt werden.false

Blog-Abonnement

Ein Blog-Abonnement-Tag rendert das Blog-Abonnement-Formular für einen bestimmten Blog. Dieses Formular wird automatisch erstellt, wenn ein Blog in den Inhaltseinstellungen erstellt wird, und es gibt immer ein einziges Anmeldeformular pro Blog. Bitte beachten Sie, dass die Felder des Anmeldeformulars auf der Benutzeroberfläche des Formular-Editors konfiguriert werden.
{% blog_subscribe "blog_subscribe" %}
{% blog_subscribe "subscribe_designers_blog" select_blog="default", title="Subscribe to the Designers Blog", response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False %}
ParameterTypBeschreibungStandard
select_blog”default” oder Blog-IDWählt aus, welches Blog-Abonnementformular gerendert werden soll. Dieser Parameter akzeptiert als Argumente entweder "default" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards). Wenn Sie Ihren Standard-Blog verwenden möchten, ist dieser Parameter nicht erforderlich.default
titleZeichenfolgeDefiniert den Text in einem h3-Tag-Titel oberhalb des Anmeldeformulars."Subscribe Here!"
no_titleBooleschBei True wird das h3-Tag über dem Titel entfernt.false
response_messageZeichenfolgeDefiniert die Inline-Dankesnachricht, die dargestellt wird, wenn ein Benutzer ein Formular einsendet. Unterstützt HTML."Thanks for Subscribing!"
edit_form_linkZeichenfolgeDieser Parameter erzeugt einen Link, über den sich der Benutzer zum entsprechenden Formular-Editor-Bildschirm durchklicken kann. Diese Option wird nur dann auf der Benutzeroberfläche des Editors angezeigt, wenn das Modul den Parameter overrideable=True hat.
Ersetzen Sie beispielsweise die Hub-ID und Formular-ID durch die Informationen aus der URL Ihres Standard-Formulars für Blog-Abonnenten: edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.de/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> ".
Beachten Sie bitte, dass die \n-Zeilenumbruchzeichen oben eine zusätzliche Zeile vor und nach dem Link hinzufügen.

Boolesch

Ein boolesches Tag erstellt ein Kontrollkästchen auf der Benutzeroberfläche, das „true“ oder „false“ ausgibt. Zusätzlich zur Ausgabe des Wertes ist dieses Modul nützlich für die Definition einer bedingten Vorlagenlogik, wenn es mit dem Parameter export_to_template_context kombiniert wird.
{% boolean "boolean" %}
{% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}
ParameterTypBeschreibungStandard
valueBooleschBestimmt, ob das Kontrollkästchen aktiviert oder deaktiviert ist.False

Auswahl

Ein choice-Tag erstellt ein Dropdown-Feld auf der Benutzeroberfläche des Content-Editors, das den vom Benutzer ausgewählten Wert ausgibt. choice-Tags eignen sich hervorragend, um Ihren BenNutzern eine Reihe von voreingestellten Optionen zu bieten, z. B. den Seitentyp als Header zu drucken. Zusätzlich zur Ausgabe des Auswahlwerts ist dieses Tag nützlich für die Definition einer bedingten Vorlagenlogik, wenn es mit dem Parameter export_to_template_context kombiniert wird.
{% choice "choice" %}
{% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}
ParameterTypBeschreibung
valueBooleschDer Standardfeldwert für das Dropdown-Feld
choicesSequenzEine durch Komma getrennte Liste von Werten oder eine Liste von Wert-Label-Paaren. Die Syntax für Wert-Label-Paare lautet wie folgt: choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]". Der Editor zeigt das Label an, während er den Wert auf der Seite ausgibt.

Farbe

Das color-Tag erzeugt eine Farbauswahl auf der Benutzeroberfläche des Seiten-Editors, die einen HEX-Farbwert in einer Vorlage ausgibt. Bitte beachten Sie, dass dieses Modul nur in Vorlagen und nicht in CSS-Dateien verwendet werden kann. Wenn Sie dieses Tag in einem <style> oder Inline-CSS verwenden, sollten Sie den no_wrapper=True-Parameter verwenden, um den <span>-Wrapper zu entfernen.
{% color "color" %}
{% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}
ParameterTypBeschreibung
colorZeichenfolgeEin Standard-HEX-Farbwert für die Farbauswahl

CTA

Ein Call-to-Action- oder CTA-Tag ermöglicht es Benutzern, eine HubSpot-Call-to-Action-Schaltfläche zu einem vordefinierten Bereich einer Seite hinzuzufügen.
{% cta "cta" %}
{% cta "my_cta" label="Select a CTA", guid="ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", image_src="https://no-cache.hubspot.com/cta/default/53/c7335b66-a0d4-4d19-82eb-75e1626d02d0.png" %}
ParameterTypBeschreibung
embed_codeZeichenfolgeDer Einbettungscode für den CTA. \n erzeugt Zeilenumbrüche.
full_htmlZeichenfolgeDer Einbettungscode für den CTA (wie embed_code). \n erzeugt Zeilenumbrüche.
image_srcZeichenfolgeBildquellen-URL, die das Vorschaubild im Content-Editor definiert.
image_editorZeichenfolgeMarkup für die Vorschau im Bild-Editor
guidZeichenfolgeDie eindeutige ID-Nummer des CTA. Diese ID-Nummer ist in der URL des Bildschirms „Details“ eines bestimmten CTA verfügbar. Mit diesem Parameter wird festgelegt, welcher CTA standardmäßig angezeigt werden soll.
image_htmlZeichenfolgeCTA-Bild-HTML ohne das CTA-Skript.*
image_emailZeichenfolgeE-Mail-freundliche Version des CTA-Codes.*
*Diese Parameter sind hier zwar der Vollständigkeit halber aufgeführt, aber der von HubSpot generierte Code, mit dem sie ausgefüllt werden, ist sehr spezifisch. Wenn ein Standard-CTA ausgewählt werden muss, sollten Sie nicht versuchen, die CTA-Parameter von Grund auf neu zu entwickeln, sondern den CTA in einem Vorlagenlayout einrichten und dann in eine Datei klonen. Sie können dann das HubL-CTA-Modul des CTA mit allen korrekt festgelegten Parametern für Sie kopieren.Es gibt auch eine CTA-Funktion, die einen CTA von der ID generiert.

Benutzerdefinierter HTML-Code

Ein benutzerdefiniertes HTML-Modul ermöglicht die Eingabe von unformatiertem HTML in den Content-Editor. Wenn Sie dem Tag umfangreichen Standard-HTML hinzufügen müssen, sollten Sie Block-Syntax verwenden.
{% raw_html "raw_html" %}
{% raw_html "my_custom_html_module" label="Enter HTML here" value="<div>My HTML Block</div>" %}

Block Syntax Example:

{% widget_block raw_html "my_custom_html_module" overrideable=True, label="My custom HTML module"  %}
{% widget_attribute "value" %}
<div>Default HTML block</div>
{% end_widget_attribute %}
{% end_widget_block %}
ParameterTypBeschreibung
valueZeichenfolgeLegt den Standard-Content-HTML des Moduls fest.

Benutzerdefinierte Module

Mithilfe von benutzerdefinierten Modulen können HubSpot-Designer eine benutzerdefinierte Gruppe von bearbeitbaren Inhaltsobjekten erstellen, die in Vorlagen und Seiten im CMS von HubSpot verwendet werden können, während Marketingexperten den spezifischen Inhalt, der in diesen Modulen angezeigt wird, seitenweise steuern können. Weitere Informationen zu benutzerdefinierten Module und ihre vereinfachten HubL-Syntax finden Sie hier. Benutzerdefinierte Module müssen im Editor für benutzerdefinierte Module erstellt werden, sie können jedoch in Code-Vorlagen und HubL-Module einbezogen werden. In der rechten Seitenleiste des Editors für benutzerdefinierte Module wird unter „Vorlagennutzung“ ein „Nutzungs-Snippet“ angezeigt. Benutzerdefinierte Module benötigen die ID des Moduls als Zeichenfolge sowie einen path-Parameter, um anzugeben, welches Modul geladen werden soll. Das Nutzungs-Snippet enthält auch einen label-Parameter. Siehe die nachstehende Syntax:
{% module "module_15677217712485" path="/Custom/Test custom module"  %}
{% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}
ParameterTypBeschreibung
module_idZeichenfolgeDie ID des zu rendernden Moduls.
pathZeichenfolgeDer Pfad des zu rendernden Moduls. Führender Schrägstrich für einen absoluten Pfad, ansonsten ist der Pfad relativ zur Vorlage. Verweisen Sie auf HubSpot-Standardmodule mit Pfaden, die ihren HubL-Tags entsprechen, wie @hubspot/rich_text, @hubspot/linked_image usw.

Editor-Platzhalter

Um Platzhalterinhalte für ein Modul im Editor darzustellen, können Sie entweder Standardinhalte zu Modulfeldern hinzufügen oder das editor_placeholder-HubL-Tag verwenden. Dies kann nützlich sein, wenn das Modul keinen Standard-Content hat oder benötigt, oder um die Modulerstellung zu optimieren.
module-placeholder-content
Um einen Editor-Platzhalter zu einem benutzerdefinierten Modul hinzuzufügen, fügen Sie zunächst eine if-Anweisung zum HTML-Code des Moduls hinzu, um den Platzhalter zu rendern, wenn im Editor kein Inhalt ausgewählt ist. Zum Beispiel könnte der folgende Code verwendet werden, um einen Editor-Platzhalter zu einem CTA-Modul hinzuzufügen:
{% if module.label %}
   {% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
  {% editor_placeholder %}
{% endif %}
Die erste if-Anweisung gibt an, ob das Modul vorhanden ist. Dann identifiziert die elif-Anweisung, ob das Modul im Kontext des Editors mithilfe der is_in_editor-Variablen gerendert wird.Diese Variable gibt true zurück, wenn der Inhalt in einem beliebigen Content-Editor gerendert wird, aber Sie können mit anderen In-App-Editor- und Vorschau-Variablen noch spezifischer sein.
Definieren Sie dann den Platzhalterinhalt in der meta.json-Datei des Moduls.
{
  "global": false,
  "host_template_types": ["PAGE"],
  "module_id": 62170380654,
  "is_available_for_new_content": true,
  "placeholder": {
    "show_module_icon": true,
    "title": "Call to action",
    "description": "Select a CTA"
  }
}
ParameterTypBeschreibung
show_module_iconBooleschOb das Symbol des Moduls angezeigt werden soll.
titleZeichenfolgeDer Titel, der im Platzhalter erscheint.
descriptionZeichenfolgeDie Beschreibung, die im Platzhalter erscheint.

Flexible Spalte

Flexible Spalten sind vertikale Spalten in einer Vorlage, mit denen Content-Autoren mithilfe des Content-Editors Module in die Seite einfügen und entfernen können. Wenn Sie eine flexible Spalte mit HubL programmieren, können Sie andere HubL-Module so einbinden, dass sie standardmäßig in der flexiblen Spalte erscheinen. Das nachstehende Code-Beispiel zeigt die grundlegende Syntax und ein Beispiel für eine flexible Spalte mit einem Rich-Text- und Formularmodul als Standard-Content. Bitte beachten Sie, dass flexible Spalten nur zu Seitenvorlagen hinzugefügt werden können, nicht zu Blog- oder E-Mail-Vorlagen. Module können keine flexiblen Spalten enthalten, aber sie können stattdessen wiederholbare Felder und Gruppen enthalten, die eine ähnliche Funktionalität bieten.
{% widget_container "my_flexible_column" label="My flex column"%}
{% module "rich_text" path="@hubspot/rich_text" %}
{% module "linked_image" path="@hubspot/linked_image" %}
{% end_widget_container %}

Hinweis:

Wenn Sie dieses Tag verwenden, muss daslabel dem name-Wert folgen, damit die flexible Spalte im Content-Editor funktioniert. Die folgende Syntax ist beispielsweise ungültig:[% widget_container label="My label" "my_flexible_column" %}

Formular

Ermöglicht Benutzern die Auswahl eines HubSpot-Formulars, das sie ihrer Seite hinzufügen können. Der folgende Code enthält ein Beispiel für die Verwendung der Standard-Tag-Syntax von HubL und ein Beispiel für die Verwendung der Blocksyntax.
{% form "my_form"
form_to_use="{formID}",
title="Free Trial"
%}

<!-- Block syntax example -->
{% module_block form "my_form"
form_follow_ups_follow_up_type="",
form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
title="Free Trial",
notifications_are_overridden=True,
response_message="Thanks for submitting the form.",
response_type="inline",
overrideable=True,
gotowebinar_webinar_key="",
webinar_id="",
webinar_source"",
label="Form"
%}
{% module_attribute "notifications_override_email_addresses" is_json=True %}
["email_address@website.com"]
{% end_module_attribute %}
{% end_module_block %}
ParameterTypBeschreibung
form_keyZeichenfolgeGibt eine eindeutige ID für das Formular auf Seitenebene an.
form_to_useZeichenfolgeGibt an, welches Formular standardmäßig geladen werden soll, basierend auf der Formular-ID. Diese ID ist in der URL des Formular-Editors eines jeden Formulars verfügbar.
titleZeichenfolgeFüllt ein h3-Header-Tag über dem Formular aus.
no_titleBooleschBei True wird das h3-Tag über dem Titel entfernt.
form_follow_ups_follow_up_typeAufzählungLegt Folgeaktionen fest, z. B. das Aufnehmen eines Kontakts in einen Workflow oder das Senden einer einfachen Follow-up-E-Mail. Mögliche Werte sind no_action, simple und automation.
simple_email_for_live_idZahlGibt die ID der einfachen Follow-up-E-Mail für die Live-Seite an.
simple_email_for_buffer_idZahlGibt die ID der einfachen Follow-up-E-Mail für die automatisch gespeicherte Version einer Seite an.
follow_up_type_simpleBooleschWenn true, wird eine einfache Follow-up-E-Mail aktiviert. Alternative zu form_follow_ups_follow_up_type.
follow_up_type_automationBooleschWenn true, werden Einsendungen in einen Workflow aufgenommen. Alternative zu form_follow_ups_follow_up_type.
simple_email_campaign_idZahlGibt die ID der einfachen Follow-up-E-Mail an. Alternative zu simple_email_for_live_id.
form_follow_ups_workflow_idZahlGibt die ID des Workflows an, in den Einsendungen aufgenommen werden sollen.
response_redirect_urlZeichenfolgeBei einer Weiterleitung zu einer externen Seite gibt dieser Parameter die URL an, zu der weitergeleitet werden soll.
response_redirect_idZahlBei einer Weiterleitung zu einer von HubSpot gehosteten Seite gibt dieser Parameter die Seiten-ID dieser Seite an. Die Seiten-ID ist in der URL des Seiten-Editors der einzelnen Seiten verfügbar.
response_response_typeAufzählngLegt fest, ob zu einer anderen Seite weitergeleitet oder eine Inline-Dankesnachricht bei der Einsendung angezeigt werden soll. Der Wert dieses Parameters sollte entweder "redirect" oder "inline" (Standard) sein.
response_messageZeichenfolgeLegt eine Inline-Danksagung fest Dieser Parameter unterstützt HTML.
notifications_are_overriddenBooleschWenn dieser Wert auf True gesetzt ist, sendet das Formular Benachrichtigungen an die im notifications_override_email_addresses-Parameter ausgewählten E-Mail-Adressen, anstatt an die Standardwerte des Formulars. Die Standardeinstellung ist False.
notifications_override_guid_bufferZeichenfolgeID der Überschreibungseinstellungen in der automatisch gespeicherten Version der Seite.
notifications_override_guidZeichenfolgeID der Überschreibungseinstellungen in der Live-Version der Seite.
notifications_override_email_addressesJSONBlock-Syntax unterstützt eine JSON-Liste von E-Mail-Empfängern, die bei der Einsendung des Formulars benachrichtigt werden sollen. Diese E-Mail-Adressen haben Vorrang vor den Einstellungen für E-Mail-Benachrichtigungen, die im Formular festgelegt sind.
sfdc_campaignZeichenfolgeGibt die Salesforce-Kampagne an, in die Kontakte, die das Formular einsenden, aufgenommen werden sollen. Der Wert dieses Parameters sollte die ID der SFDC-Kampagne sein und ist nur für Accounts verfügbar, die mit Salesforce integriert sind.
gotowebinar_webinar_keyZeichenfolge: Gibt das GoToWebinar-Webinar an, für das Kontakte nach dem Einsenden des Formulars registriert werden sollen. Nur verfügbar für Accounta, die die GoToWebinar-Integration verwenden.
webinar_idZeichenfolge: Ein allgemeineres Feld, das die ID des Microsoft Teams- oder GoToWebinar-Webinars angibt, für das Kontakte nach dem Einsenden des Formulars registriert werden sollen. Nur in Accounts verfügbar, die die GoToWebinar- oder Microsoft Teams-Integrationen verwenden, und wenn support_all_webinar_types in der Definition der Formularfelderauf true gesetzt ist.
webinar_sourceZeichenfolgeDie ID der Integrations-App, entweder GoToWebinar (35161) oder Microsoft Teams (221635).

Fußzeile

Rendert Copyright-Informationen mit dem Jahr und dem Unternehmensnamen, die in den Marketing-E-Mail-Einstellungen des Accounts angegeben sind.
{% page_footer "page_footer" %}

Galerie

Erzeugt ein HubSpot-Galerie-Tag. Dieses Galerie-Tag basiert auf Slick. Sie können zwar ein Galeriemodul mit der HubL-Standardsyntax erstellen, müssen jedoch die Block-Syntax verwenden, wenn Sie Standardfolien mit HubL vordefinieren möchten. Beide Methoden sind unten dargestellt. Galeriebilder werden mithilfe von JavaScript verzögert geladen.
{% gallery "crm_gallery" %}

<-- Block syntax -->
{% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5  %}
{% widget_attribute "slides" is_json=True %}
[{
"caption": "CRM Contacts App",
"show_caption": true,
"link_url": "http://www.hubspot.com/crm",
"alt_text": "Screenshot of CRM Contacts",
"img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
"open_in_new_tab": true
},
{
"caption": "HubSpot CRM Contact Profile",
"show_caption": true,
"link_url": "http://www.hubspot.com/",
"alt_text": "HubSpot CRM Contact Profile",
"img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
"open_in_new_tab": true
}]
{% end_widget_attribute %}
{% end_widget_block %}
ParameterTypBeschreibungStandard
slidesJSONEine JSON-Liste mit der Standardbeschriftung, der Link-URL, dem ALT-Text, der Bildquelle und der Angabe, ob das Bild in einer neuen Registerkarte geöffnet werden soll. Siehe Block-Syntax oben.
loop_slidesBooleschWenn „True“, werden die Folien in einer Schleife durchlaufen.True
num_secondsZahlZeit in Sekunden für die Pause zwischen den Folien5
show_paginationBooleschStellt Schaltflächen unter dem Schieberegler bereit, um zwischen den Folien zu navigieren.True
sizingAufzählungBestimmt, ob der Schieberegler seine Größe in Abhängigkeit von der Höhe der Folien ändert. Mögliche Werte sind: „static“ oder „resize“."static"
auto_advanceBooleschFolien werden nach der in num_seconds angegebenen Zeit automatisch weitergeschaltet.False
transitionAufzählung:Legt die Art des Folienübergangs fest. Mögliche Werte sind: „fade“ oder „slide“."slide"
caption_positionAufzählungBeeinflusst die Positionierung der Beschriftung auf oder unter der Folie. Mögliche Werte sind „below“ oder „superimpose“."below"
display_modeAufzählungLegt fest, wie die Bildergalerie angezeigt werden soll. Mögliche Werte sind: „standard”, „lightbox”, „thumbnail“."standard"
lightboxRowsZahlWenn display_mode auf „lightbox“ festgelegt ist, steuert dieser Parameter die Anzahl der in der Lightbox angezeigten Zeilen.3
Erzeugt ein Header-Modul, das Text als h1-h6-Tag darstellt.
{% header "header"  %}
{% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
ParameterTypBeschreibungStandard
header_tagZeichenfolgeWählen Sie das zu rendernde Header-Tag aus. Mögliche Werte sind: h1, h2, h3, h4, h5, h6.h1
valueZeichenfolgeRendert Standardtext innerhalb des Überschriftenmoduls."A clear bold header"

Symbol

Fügt ein icon-Tag hinzu, mit dem die Benutzer ein Symbol zur Verwendung auswählen können. Unterstützte Symbolsätze sind FontAwesome 5.0.10, 5.14.0 und 6.4.2. Dieses Tag kann nicht in Modulen verwendet werden, die für E-Mail aktiviert sind.
{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}
ParameterTypBeschreibungStandard
nameZeichenfolgeName des Symbols.
styleZeichenfolgeStil des Symbols. Mögliche Werte: REGULAR oder SOLIDREGULAR
unicodeZeichenfolgeDie Unicode-Zeichendarstellung des Symbols.
icon_setZeichenfolgeDer zu verwendende FontAwesome-Symbolsatz. Mögliche Werte sind:
  • fontawesome-5.14.0
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purposeZeichenfolgeDer Zweck des Symbols, das für die Barrierefreiheit verwendet wird. Mögliche Werte sind decorative oder semantic. Wenn es auf decorative festgelegt ist, wird dem Symbol ein zusätzliches aria-hidden="true"-Attribut hinzugefügt.decorative
titleZeichenfolgeDas title-Element der svg des Symbols, zusammen mit einem labelledby-Attribut, das auf den Titel verweist.

Bild

Erstellt ein Bild-Tag (img), mit dem Benutzer ein Bild aus dem Content-Editor auswählen können. Wenn Sie möchten, dass das Bild mit einer Ziel-URL verknüpft wird, sollten Sie linked_image unten verwenden.
{% image "image" %}
{% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}
ParameterTypBeschreibungStandard
altZeichenfolgeLegt den Standard-ALT-Text für das Bild fest.
srcZeichenfolgeFüllt das src-Attribut des img-Tags aus.
widthZahlLegt das width-Attribut des img-Tags fest.The width of the image
heightZahlLegt eine min-height in einem style-Attribut des img-Tags nur für E-Mail-Vorlagen fest.The height of the image
hspaceZahlLegt das hspace-Attribut des img-Tags fest.
alignZeichenfolgeLegt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“.
styleZeichenfolgeFügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style=“border:1px solid blue; margin:10px”.
loadingZeichenfolgeSteuert das loading-Attribut des img-Elements. Wird für browserbasiertes Lazy Loading verwendet.

Bildquelle

Ein Bild-SRC-Modul erstellt eine Bildauswahl im Content-Editor, aber anstatt ein img-Tag auszugeben, wird die URL des Bildes dargestellt. Dieses Tag wird in der Regel mit dem no_wrapper=True-Parameter verwendet, sodass das Bild src zu Inline-CSS oder anderem Markup hinzugefügt werden kann. Eine Alternative zur Verwendung dieses Tags ist die Verwendung des export_to_template_context-Parameters.
{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
ParameterTypBeschreibung
srcZeichenfolgeGibt die Standard-URL-Bildquelle an.

Sprachumschaltung

Fügt ein Globus-Symbol mit Links zu den übersetzten Versionen einer bestimmten CMS-Seite hinzu. Erfahren Sie in diesem Artikel mehr über mehrsprachige Inhalte.
{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
ParameterTypBeschreibungStandard
display_modeAufzählungDie Sprache des Textes in der Sprachumschaltung. Werte sind:
  • Pagelang bedeutet, dass die Namen der Sprachen in der Sprache der Seite angezeigt werden, auf der sich die Sprachauswahl befindet.
  • Localized bedeutet, dass die Namen jeder Sprache in ihrer eigenen Sprache angezeigt werden.
  • Hybrid ist eine Kombination aus beidem.
Localized

Verlinktes Bild

Erstellt ein vom Benutzer auswählbares Bild, das in einen Link eingeschlossen ist. Dieses Tag verfügt über alle Parameter eines Bildmoduls mit zwei zusätzlichen Parametern, die die Ziel-URL des Links angeben und ob der Link in einem neuen Fenster geöffnet wird.
{% linked_image "linked_image" %}
{% linked_image "executive_image"
label="Executive photo",
link="https://twitter.com/bhalligan", \
open_in_new_tab=True,
alt="Photo of Brian Halligan",
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
%}
ParameterTypBeschreibungStandard
altZeichenfolgeLegt den Standard-ALT-Text für das Bild fest.
srcZeichenfolgeFüllt das src-Attribut des img-Tags aus.
widthZahlLegt das width-Attribut des img-Tags fest.The width of the image
heightZahlLegt eine min-height in einem style-Attribut des img-Tags nur für E-Mail-VorlagenThe height of the image
hspaceZahlLegt das hspace-Attribut des img-Tags fest.
alignZeichenfolgeLegt das align-Attribut des img-Tags fest. Mögliche Werte sind: „left“, „right“ & „center“.
styleZeichenfolgeFügt Inline-CSS-Deklarationen zum img-Tag hinzu. Zum Beispiel style=“border:1px solid blue; margin:10px”.
open_in_new_tabBooleschLegt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht.False
linkZeichenfolgeLegt die Ziel-URL des Links fest, der das img-Tag einschließt.
targetZeichenfolgeLegt das target-Attribut des Link-Tags fest.
loadingZeichenfolgeSteuert das loading-Attribut des img-Elements. Wird für browserbasiertes Lazy Loading verwendet.
Ein logo-Tag rendert das Logo Ihres Unternehmens aus den Brand-Kit-Einstellungen des Accounts.
{% logo "logo" %}
{% logo "my_logo" width="200" %}
ParameterTypBeschreibungStandard
altZeichenfolgeLegt den Standard-ALT-Text für das Bild fest.Value in brand kit settings
srcZeichenfolgeFüllt das src-Attribut des img-Tags aus.Value in brand kit settings
linkZeichenfolgeLegt die Ziel-URL des Links fest, der das img-Tag einschließt.
widthZahlLegt das width-Attribut des img-Tags fest.The width of the image
heightZahlLegt eine min-height in einem style-Attribut des img-Tags nur für E-Mail-VorlagenThe height of the image
hspaceZahlLegt das hspace-Attribut des img-Tags fest.
alignZeichenfolgeLegt das align-Attribut des img-Tags fest. Mögliche Werte sind left, right und center.
styleZeichenfolgeFügt Inline-CSS-Deklarationen zum img-Tag hinzu. Beispiel:style="border:1px solid blue; margin:10px"
suppress_company_nameBooleschBlendet Unternehmensnamen aus, wenn kein Bild-Logo festgelegt ist.False
use_account_defaultBooleschAuf true festlegen, um den Unternehmensnamen aus den Standardeinstellungen des Accounts zu verwenden.False
open_in_new_tabBooleschLegt fest, ob die Ziel-URL in einer anderen Registerkarte geöffnet werden soll oder nicht.False
override_inherited_srcBooleschWenn auf true festgelegt, wird src vom Logo-Widget verwendet und nicht src voden Einstellungen oder der Vorlage geerbt.True
heading_levelZeichenfolgeBei Verwendung nicht verknüpfter textbasierter Logos wird das textbasierte Logo in eine der folgenden verfügbaren Optionen als HTML-Tag eingeschlossen: h1, h2, h3, h4.h1
loadingZeichenfolgeSteuert das Attribut zum Laden des img-Elements für browserbasiertes Lazy-Loading.

Menü

Erzeugt ein erweitertes Menü basierend auf einer Menüstruktur unter Inhaltseinstellungen > Erweiterte Menüs. Unter Menüs und Navigation finden Sie weitere Informationen zur Verwendung von Menüs in Vorlagen und Modulen. Wenn id auf null festgelegt ist, stellt das menu-Tag das Standardmenü für den HubSpot-Account dar.
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
ParameterTypBeschreibungStandard
idZahlID der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen.
site_map_nameZeichenfolgeName der Menüstruktur von „Erweiterte Menüs“ in den Inhaltseinstellungen."default"
root_typeAufzählungGibt den Typ der erweiterten Menüs an. Zu den Optionen gehören „site_root“, „top_parent“, „parent“, „page_name“, „page_id“ und „breadcrumb“. Diese Werte entsprechen „Statisch“, „Dynamisch nach Bereich“, „Dynamisch nach Seite“ und „Breadcrumb“."site_root"
flyoutsZeichenfolgeBei true wird der Menüstruktur eine Klasse hinzugefügt, die so gestaltet werden kann, dass untergeordnete Menüpunkte angezeigt werden, wenn Sie den Mauszeiger über den übergeordneten Punkt bewegen. Bei false werden untergeordnete Menüpunkte immer angezeigt."true"
max_levelsZahlLegt fest, wie viele Ebenen von verschachtelten Menüs im Markup dargestellt werden. Dieser Parameter legt die Anzahl der untergeordneten Menüebenen an, auf die erweitert werden kann.2
flowAufzählungLegt die Ausrichtung der Menüpunkte fest. Dadurch werden der Menüstruktur Klassen hinzugefügt, sodass sie entsprechend formatiert werden können. Mögliche Werte sind „horizontal”, „vertical“ oder „vertical_flyouts“. Horizontale Menüs zeigen Elemente nebeneinander und vertikale Menüs zeigen Elemente untereinander an."horizontal"
root_keyZeichenfolgeWird verwendet, um den Stamm des Menüs zu finden. Wenn root_type auf page_id oder page_name festgelegt ist, sollte dieser Parameter die Seiten-ID bzw. das Label der Seite sein."horizontal"
labelZeichenfolgeEtwas Rich-Content, um diese Entität zu beschreibenFalse
labelZeichenfolgeEtwas Rich-Content, um diese Entität zu beschreibenFalse

Require_css

Ein HubL-Tag, das ein style-Element in die Warteschlange stellt, das im <head> gerendert werden soll. Dieses Tag ähnelt der require_css-Funktion, mit der Ausnahme, dass Stile mit diesem Tag inline und nicht aus einem Stylesheet eingefügt werden. Dieses Tag wird auch nicht gegen andere Instanzen des CSS auf derselben Seite dedupliziert. Wenn Sie ein Modul erstellen und ein Stylesheet einfügen möchten, dieses Modul jedoch mehrmals auf einer einzelnen Seite verwenden möchten, sollten Sie stattdessen die require_css verwenden.
{{ standard_header_includes }}
<!-- more html -->

{% require_css %}
<style>
body {
color: red;
}
</style>
{% end_require_css %}

{{ standard_footer_includes }}

Require_head

Ein HubL-Tag, das alles, was in standard_header_includes (der <head> der Vorlage) platziert ist, in die Warteschlange stellt. Für die meisten JavaScript und CSS siehe require_js und require_css. Einige Anwendungsfälle für require_head sind die Bereitstellung von Meta-Tags und speziellen Link-Tags (wie prefetch und preconnect) von Modulen.
{% require_head %}
  <meta name="third-party-app-verification-id" content="123456">
  <link rel="prefetch" href="http://example.com/large-script.js">
  <!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.-->
{% end_require_head %}

Require_js

Ein HubL-Tag, das ein zu renderndes Skriptelement in die Warteschlange stellt. Um ein Skript von einer anderen Datei in die Warteschlange zu stellen, um es im <head /> über ein <script />-Element darzustellen (im Gegensatz zu inline wie hier gezeigt), verwenden Sie stattdessen die HubL-Funktion require_js(absolute_url).
{{ standard_header_includes }}
<!-- more html -->

{% require_js position="footer" %}
<script>
console.log("The CMS is awesome!");
</script>
{% end_require_js %}

{{ standard_footer_includes }}
ParameterTypBeschreibungStandard
positionZeichenfolgeLegt die Position fest, an der das Inline-Skript gerendert werden soll. Zu den Optionen gehören: "head" und "footer"."footer"

Rich-Text

Erzeugt einen WYSIWYG-Content-Editor.
{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html="<div>My rich text default content</div>" %}

Block Syntax Example:

{% widget_block rich_text "right_column" overrideable=True, label="Right Column"  %}
{% widget_attribute "html" %}
<h2>Something Powerful</h2>
<h3>Tell The Reader More</h3>
<p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
<p>Remember:</p>
<ul>
<li>Bullets are great</li>
<li>For spelling out <a href="#">benefits</a> and</li>
<li>Turning visitors into leads.</li>
</ul>
{% end_widget_attribute %}
{% end_widget_block %}
ParameterTypBeschreibungStandard
htmlZeichenfolgeStandard-Rich-Text-Inhalt für das Modul.<h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul><li>Bullets are great</li><li>For spelling out [benefits](#) and</li><li>Turning visitors into leads.</li></ul>

RSS-Listing

Lädt eine Liste von Inhalten aus einem internen oder externen RSS-Feed.

Hinweis:

Dieses Modul wird asynchron auf der Client-Seite geladen. Wenn Sie also den Feed nach dem Laden bearbeiten möchten, müssen Sie eine globale JS-Funktion definieren, die diese Bearbeitung übernimmt. Verwenden Sie die Funktion hsRssFeedComplete(feeds), wobei feeds der jQuery-Selektor in allen Feeds ist, die abgeschlossen wurden. Sie können das DOM-Objekt in dieser Funktion direkt bearbeiten.
{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
ParameterTypBeschreibungStandard
show_titleBooleschZeigt den Titel des RSS-Feeds oder blendet ihn aus.True
show_dateBooleschZeigt das Beitragsdatum an.True
show_authorBooleschZeigt den Namen des Autors an.True
show_detailBooleschZeigt eine Beitragszusammenfassung bis zu der durch den limit_to_chars-Parameter festgelegten Anzahl von Zeichen an.True
titleZeichenfolgeFüllt eine Überschrift über der RSS-Feed-Liste aus.
limit_to_charsZahlMaximale Anzahl von Zeichen, die in der Zusammenfassung angezeigt werden.200
publish_date_formatZeichenfolgeFormat für das Veröffentlichungsdatum Mögliche Werte sind "short", "medium" und "long". Akzeptiert auch benutzerdefinierte Formate, einschließlich "MMMM d, yyyy 'at' h:mm a"."short"
attribution_textZeichenfolgeDer Text, der einem Autor einen Beitrag zuschreibt."by"
click_through_textZeichenfolgeDer Text, der am Ende der Zusammenfassung eines Beitrags für den Klick-Link angezeigt wird"Read more"
publish_date_textZeichenfolgeDer Text, der angibt, wann ein Beitrag veröffentlicht wurde."posted at"
include_featured_imageBooleschZeigt ein Bild mit einem Link zum Beitrag für von HubSpot generierte RSS-Feeds an.False
item_title_tagZeichenfolgeGibt das HTML-Tag für jeden Beitragstitel an.span
is_externalBooleschDer RSS-Feed stammt von einem externen Blog.False
number_of_itemsZahlMaximale Anzahl an anzuzeigenden Beiträgen.5
publish_date_languageZeichenfolgeGibt die Sprache des Veröffentlichungsdatums an.en_US
rss_urlZeichenfolgeDie URL, unter der sich der RSS-Feed befindet.
content_group_idZeichenfolgeID für Blog, wenn Feed-Quelle interner Blog ist.
select_blogZeichenfolgeKann verwendet werden, um einen internen HubSpot-Blog-Feed auszuwählen.default
feed_sourceZeichenfolgeLegt die Quelle für einen RSS-Feed fest. Wenn intern, ist das allgemeine Format {rss_url="", is_external=False, content_group_id="2502431580"}. Wenn extern, ist das allgemeine Format {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}.
tag_idZahlID für das Tag, wenn die Feed-Quelle ein interner Blog ist.

Bereichsüberschrift

Erzeugt eine HTML-Überschrift und eine <p>-Zwischenüberschrift.
{% section_header "section_header" %}
{% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header"  %}
ParameterTypBeschreibungStandard
headerZeichenfolgeText, der im Header angezeigt werden soll."A clear and bold header"
subheaderZeichenfolgeText, der im Subheader angezeigt werden soll."A more subdued subheader"
heading_levelZeichenfolgeDie semantische HTML-Überschriftenebene. h1 bis h6 werden unterstützt."h1"

Einfaches Menü

Mit einfachen Menüs können Sie grundlegende Navigationsmenüs erstellen, die auf Seitenebene geändert werden können. Im Gegensatz zu normalen Menümodulen werden einfache Menüs nicht über den Navigationsbildschirm in den Website-Einstellungen verwaltet, sondern über die Vorlagen- und Seiten-Editoren. Sie können Block-Syntax verwenden, um einer Standard-Menüstruktur einzurichten.
{% simple_menu "simple_menu" %}
{% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %}

Block Syntax Example:

{% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu"  %}
{% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %}
{% end_widget_block %}
ParameterTypBeschreibungStandard
orientationAufzählungDefiniert Klassen von Menü-Markup, die es ermöglichen, die Ausrichtung von Menüelementen auf der Seite zu formatieren. Mögliche Werte sind "horizontal" und "vertical"."horizontal"
menu_treeJSONMenüstruktur mit Namen der Seiten-Links und Ziel-URLs.[]

Social-Media-Sharing

Social-Media-Sharing-Tags generieren Social-Media-Symbole, die zum Teilen einer bestimmten Seite verwendet werden können. Dieses Modul kann mit der Block-Syntax verwendet werden, um die Symbolbilder und mehr anzupassen.
{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}

Block Syntax Example:

{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True  %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}
ParameterTypBeschreibungStandard
use_page_urlBooleschBei true teilt das Modul standardmäßig die URL der Seite.True
linkZeichenfolgeGibt eine andere URL zum Teilen an, wenn use_page_url false ist.
pinterestJSONParameter für das Pinterest-Link-Format und die Quelle des Symbolbildes.See block syntax example, above
twitterJSONParameter für das Twitter-Link-Format und die Quelle des Symbolbildes.See block syntax example, above
linked_inJSONParameter für das LinkedIn-Link-Format und die Quelle des Symbolbildes.See block syntax example, above
facebookJSONParameter für das Facebook-Link-Format und die Quelle des Symbolbildes.See block syntax example, above
emailJSONParameter für das E-Mail-Link-Format und die Quelle des Symbolbildes.See block syntax example, above

Abstandshalter

Ein spacer-Tag erzeugt ein leeres span-Tag. Dieses Tag kann als Abstandshalter formatiert werden. In Drag-and-Drop-Layouts wird das Abstandshaltermodul in einen Container mit der Klasse „span1-span12“ eingeschlossen, um festzulegen, wie viel Platz das Modul im zwölfspaltigen responsiven Raster einnehmen soll.
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}

Systemseiten-Tags

Die folgenden Tags können auf Systemseiten verwendet werden, z. B. auf den Seiten zum Zurücksetzen des Passworts oder zum Abonnieren von E-Mails.

E-Mail-Back-up Abo-Kündigung

Das Abo-Kündigungs-Back-up-Tag wird für E-Mail-Empfänger gerendert, falls HubSpot deren E-Mail-Adresse nicht ermitteln kann, wenn dieser Empfänger versucht, ein Abo zu kündigen. Mit diesem Tag wird ein Formular adargestellt, in das der Kontakt seine E-Mail-Adresse eingeben kann, um sich von der E-Mail-Kommunikation abzumelden. Es sollte auf einer Abmelde-Backup-Systemvorlage verwendet werden.
{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
ParameterTypBeschreibungStandard
headerZeichenfolgeRendert Text in einem h1-Tag über dem Abmeldeformular."Email Unsubscribe"
input_help_textZeichnefolgeRendert Hilfetext in einem h3-Tag über dem Feld für das E-Mail-Abmeldeformular."Your email address:"
input_placeholderZeichenfolgeFügt Platzhaltertext im E-Mail-Adressformularfeld hinzu."email@example.com"
button_textZeichenfolgeÄndert den Text der Schaltfläche zum Absenden des Abmeldeformulars."Unsubscribe"

E-Mail-Abonnements

Dieses Modul rendert, wenn ein E-Mail-Empfänger seine Abonnementeinstellungen bearbeiten möchte. Es sollte auf einer Abo-Einstellungen-Systemvorlage verwendet werden.
{% email_subscriptions "email_subscriptions" %}
{% email_subscriptions "email_subscriptions"
resubscribe_button_text="Yes, resubscribe me!",
unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
subheader_text="\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
unsubscribe_all_option="Unsubscribe me from all mailing lists.",
unsubscribe_all_text="Or check here to never receive any emails:"
%}
ParameterTypBeschreibungStandard
headerZeichenfolgeRendert Text in einem h1-Tag über dem Formular für die Abonnementeinstellungen."Communication Preferences"
subheader_textZeichenfolgeFüllt Text unterhalb der Überschrift über den Abmeldeeinstellungen."<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"
unsubscribe_single_textZeichenfolgeRendert Text in einem <p class="header"> über den Abonnementoptionen."Uncheck the types of emails you do not want to receive:"
unsubscribe_all_textZeichenfolgeRendert Text in einem <p class="header"> über der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails."Or check here to never receive any emails:"
unsubscribe_all_unsubbed_textZeichenfolgeFüllt Text in einem <p> aus, das rendert, wenn ein Kontakt derzeit von allen E-Mails abgemeldet ist."You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_optionZeichenfolgeLegt den Text neben der Kontrollkästcheneingabe für die Abmeldung von allen E-Mails fest."Unsubscribe me from all mailing lists."
button_textZeichenfolgeLegt den Text der Schaltfläche „Einsenden“ fest, mit der die Abo-Einstellungen aktualisiert werden."Update email preferences"
resubscribe_button_textZeichenfolgeLegt den Text der Schaltfläche „Einsenden“ fest, wenn Kontakte sich erneut anmelden."Yes, resubscribe me!"

E-Mail-Abo-Bestätigung

Die Aktualisierungsbestätigung für E-Mail-Abonnements ist ein Modul, das der Danksagungsvorlage hinzugefügt werden kann, wenn ein Empfänger seine Abonnementeinstellungen aktualisiert oder sich abmeldet. Es sollte auf einer Abo-Einstellungen-Systemvorlage verwendet werden.
{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
{% email_subscriptions_confirmation "email_subscriptions_confirmation"
label="Subscriptions Update Confirmation",
unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
subscription_update_success="You have successfully updated your email preferences.",
subheader_text="\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
%}
ParameterTypBeschreibungStandard
headerZeichenfolgeRendert Text in einem h1-Tag über dem Abmeldeformular."Communication Preferences"
subheader_textZeichenfolgeFüllt Text über der Bestätigungsnachricht."<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>"
unsubscribe_all_successZeichenfolgeLegt den Text fest, der angezeigt wird, wenn sich jemand von sämtlicher E-Mail-Kommunikation abmeldet."You have successfully unsubscribed from all email communications."
subscription_update_successZeichenfolgeLegt den Text fest, wenn ein Empfänger seine Abo-Einstellungen aktualisiert."You have successfully updated your email preferences."

Anmeldung für zugriffsbeschränkte Inhalte

Erstellt ein Anmeldeformular für den Zugang zu privatem Content.
{% member_login "my_login" %}
{% member_login "my_login"
email_label="Email",
password_label="Password",
remember_me_label="Remember Me",
reset_password_text="Forgot your password?",
submit_button_text="Login",
show_password="Show password"
%}
ParameterTypBeschreibungStandard
email_labelZeichenfolgeDas Label für das E-Mail-Eingabefeld."Email"
password_labelZeichenfolgeDas Label für das Passworteingabefeld."Password"
remember_me_labelZeichenfolgeDas Label für das Kontrollkästchen „Merken“."Remember Me"
reset_password_textZeichenfolgeDer Text für den Hyperlink zum Zurücksetzen des Passworts."Forgot your password?"
submit_button_textZeichenfolgeDer Text für die Schaltfläche „Einsenden“."Login"
show_passwordZeichenfolgeDer Text für den Link zum Enthüllen des Passworts."Show password"

Registrierung einer Zugriffsberechtigung

Erstellt ein Formular zur Registrierung für den Zugang zu privatem Content.
{% member_register "my_register" %}
{% member_register "my_register"
email_label="Email",
password_label="Password",
password_confirm_label="Confirm Password",
submit_button_text="Save Password",
show_password="Show password"
%}
ParameterTypBeschreibungStandard
email_labelZeichenfolgeDas Label für das E-Mail-Eingabefeld."Email"
password_labelZeichenfolgeDas Label für das Passworteingabefeld."Password"
password_confirm_labelZeichenfolgeDas Label für das Feld zur Bestätigung des Passworts."Confirm Password"
submit_button_textZeichenfolgeDer Text für die Schaltfläche „Einsenden“."Save Password"
show_passwordZeichenfolgeDer Text für den Link zum Enthüllen des Passworts."Show password"

Anfrage zum Zurücksetzen des Passworts

Erstellt ein Formular zum Versenden einer E-Mail zum Zurücksetzen des Passworts für den Zugriff auf passwortgeschützte Seiten.
{% password_reset_request "my_password_reset_request" %}
{% password_reset_request "my_password_reset_request"
email_label="Email",
submit_button_text="Send Reset Email"
%}
ParameterTypBeschreibungStandard
email_labelZeichenfolgeDas Label für das E-Mail-Eingabefeld."Email"
submit_button_textZeichenfolgeDer Text für die Schaltfläche „Einsenden“."Send Reset Email"
password_reset_messageZeichenfolgeDie Nachricht, die angezeigt wird, nachdem die E-Mail zum Zurücksetzen des Passworts angefordert wurde.False

Zurücksetzen des Passworts

Rendert ein Formular zum Zurücksetzen des Passworts für den Zugriff auf passwortgeschützte Seiten.
{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
ParameterTypBeschreibungStandard
password_labelZeichenfolgeDas Text-Label für das Feld zur Eingabe des Passworts."Email"
password_confirm_labelZeichenfolgeDas Text-Label für das Feld zur Eingabe der Passwortbestätigung."Send Reset Email"
submit_button_textZeichenfolgeDas Text-Label für die Schaltfläche „Formular einsenden“.False
show_passwordZeichenfoleDas Text-Label für die Schaltfläche zum Einblenden des eingegebenen Passwortwerts.False
password_requirementsZeichenfolgeDas Text-Label, das die Passwortanforderungen beschreibt.False

Passwortaufforderung

Fügt eine Passwortaufforderung zu passwortgeschützten Seiten hinzu.
{% password_prompt "password_prompt" %}
{% password_prompt "my_password_prompt"
submit_button_text="Submit",
bad_password_message="Sorry, please try again.\n",
label="Password Prompt"
%}
ParameterTypBeschreibungStandard
submit_button_textZeichenfolgeLabel für Schaltfläche unter dem Kennworteingabefeld."Submit"
bad_password_messageZeichenfolgeBei Eingabe eines falschen Passworts wird eine Meldung angezeigt."<p>Sorry, please try again.</p>"
password_placeholderZeichenfolgeDefiniert einen Platzhaltertext im Passwortfeld."Password"

Text

Erzeugt eine einzelne Textzeile. Dieses Tag kann in Verbindung mit dem no_wrapper=True-Parameter nützlich sein, um Ihrem Markup hinzugefügt zu werden. Wenn Sie zum Beispiel möchten, dass Ihre Endbenutzer das Ziel eines vordefinierten Anchors definieren können, könnten Sie die href mit einem Texmodul mit no_wrapper=True ausfüllen.
{% text "text" %}
{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
ParameterTypBeschreibung
valueZeichenfolgeLegt den Standardtext für das einzeilige Textfeld fest.

Textbereich (Textarea)

Ein Textbereich (textarea) ähnelt einem Textmodul insofern, dass Benutzern die Eingabe von Klartext ermöglicht wird, ihnen aber einen größeren Bereich für das Arbeiten im Content-Editor bietet. Dieses Modul unterstützt kein HTML. Wenn Sie „textarea“ direkt innerhalb eines vordefinierten Wrapping-Tags verwenden möchten, fügen Sie den no_wrapper=true-Parameter hinzu.
{% textarea "my_textarea" %}
{% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %}
ParameterTypBeschreibung
valueZeichenfolgeLegt den Standardtext von „textarea“ fest.

Video-Player

Rendern Sie einen Video-Player für eine Videodatei vom Datei-Manager, für die die Einstellung Einbetten, Teilen und Tracking zulassen aktiviert ist.
{% video_player "embed_player" %}
{% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
ParameterTypBeschreibungStandard
hide_playlistBooleschBlendet die Video-Playlist aus.True
playlist_colorZeichenfolgeEin HEX-Farbwert für die Playlist.
play_button_colorZeichenfolgeEin HEX-Farbwert für die Wiedergabe- und Pausentasten.#2A2A2A
embed_buttonBooleschZeigt die Schaltfläche „Einbetten“ im Player an.False
viral_sharingBooleschZeigt die Schaltfläche zum Teilen in sozialen Netzwerken im Player an.False
widthZahlBreite des eingebetteten Video-Players.Auto
heightZahlHöhe des eingebetteten Video-Players.Auto
player_idNummerDie player_id des einzubettenden Videos.
styleZeichenfolgeZusätzlicher Stil für Player.
conversion_assetJSONEvent-Einstellung für Player. Kann CTA oder Formular vor oder nach der Videowiedergaben darstellen. Dieser Parameter nimmt ein JSON-Objekt mit drei Parametern auf: Typ (FORM oder CTA), id (die GUID des Typobjekts), Position (POST oder PRE).See above example
placeholder_alt_textZeichenfolgeDer ALT-Text des Videos.