Letzte Änderung: 28. August 2025
HTML + HubL-Vorlagen bieten Entwicklern eine größere Kontrolle als Drag-&-Drop-Vorlagen eines visuellen Design-Managers. Entwickler wiederum können Content-Autoren durch die Drag-&-Drop-Funktionalität, die nur mit HTML + HubL-Vorlagen möglich ist, ein besseres Erlebnis bieten.
image1-2
Die obige Vorlage ist die base.html-Vorlage, die in der CMS Hub-Boilerplate enthalten ist, die eine großartige Möglichkeit ist, mit der Entwicklung mit HubSpot zu beginnen.

​
Vertrautheit und Tools

Da es sich bei den HTML + HubL-Vorlagen um Code-Dateien handelt, können Sie diese mithilfe Ihrer bevorzugten Tools lokal bearbeiten. Es wird empfohlen, die Tools für lokale Entwicklung von HubSpot zu verwenden, damit Sie Dateien hochladen, abrufen, überwachen, erstellen und anderweitig sicher im Entwickler-Dateisystem sowie im Datei-Manager verwalten können. Das Erstellen von HTML + HubL-Vorlagen mit HubSpot ähnelt der Verwendung einer anderen Vorlagensprache, die Sie möglicherweise bereits verwendet haben. Der Hauptunterschied besteht darin, dass HubSpot seine ganz eigenen Vorstellungen hat, wie man Content-Autoren am besten ein optimales Erlebnis bietet, und dem Entwickler einen Großteil der Wartungs- und Performanceoptimierungsarbeit abnimmt. Wenn Sie beispielsweise die CSS-Datei für bestimmte Module auf eine Seite laden möchten, sollten Sie, statt <link rel="stylesheet" type="text/css" href="https://developers.hubspot.de/docstheme.css"> zu verwenden, das Stylesheet über css_assets in die meta.json-Datei des Moduls einfügen. Dies ermöglicht HubSpot, das CSS nur dann bedingt zu laden, wenn das Modul auf einer Seite vorhanden ist. Auf diese Weise wird die Menge an unnötigem geladenen CSS minimiert. Erfahren Sie mehr über das Optimieren Ihres HubSpot-Entwicklungsworkflows.

​
Vorlagenannotationen

Vorlagenannotationen, die oben in einer Vorlage enthalten sind, konfigurieren wichtige Vorlageneinstellungen, z. B. den Vorlagentyp und ob er zum Erstellen neuer Inhalte verwendet werden kann. Vorlagenannotationen können während des Entwicklungsprozesses jederzeit geändert werden. Im Folgenden erfahren Sie mehr über verfügbare Vorlagenannotationen. 
<!--
  templateType: page
  isAvailableForNewContent: false
  enableDomainStylesheets: false
  label: Homepage
  screenshotPath: ../images/template-previews/home.png
-->

<!doctype html>

<html>
  ...
</html>
AnnotationTypBeschreibung
templateTypeZeichenfolgeGibt an, welcher Vorlagentyp eine Datei ist. Werte sind:
isAvailableForNewContentZeichenfolgeGibt an, ob eine Vorlage bei der Erstellung von Inhalten zur Auswahl steht. Werte sind: true, false. Auf false festgelegte Vorlagen müssen die erforderlichen Variablen nicht enthalten. Vorlagen vom Typ page, die auf „false“ festgelegt sind, können ebenfalls als Standardteilvorlagen verwendet werden.
enableDomainStylesheetsZeichenfolgeGibt an, ob die Vorlage Domain-Stylesheets laden soll. Die Werte umfassen: true, false.
LabelZeichenfolgeBenutzerfreundliche Beschreibung der Vorlage, die im Bildschirm für die Vorlagenauswahl angezeigt wird. Zum Beispiel: About Page, Homepage, Pricing.
screenshotPathZeichenfolgeDer Screenshot, der angezeigt wird, wenn ein Content-Autor eine Vorlage auswählt. Anhand dieses Screenshots sollten Sie Ihre Vorlagen leicht unterscheiden können.
Bei HubSpot-Vorlagen müssen zwei Tags vorhanden sein, es sei denn, die Datei ist eine Teilvorlage. Die beiden Tags sind:
  • {{ standard_header_includes }} – Wird verwendet, um auf intelligente Weise kombinierte und minifizierte erforderliche CSS-Dateien hinzuzufügen.
  • {{ standard_footer_includes }} – Wird verwendet, um JavaScript auf intelligente Weise dynamisch am unteren Rand einer Seite hinzuzufügen, z. B. für das HubSpot-Tracking-Skript und Module.
Diese Tags müssen in einer Vorlage oder ihren untergeordneten Teilvorlagen vorhanden sein, damit sie veröffentlicht und verwendet werden können.

​
Teilvorlagen

Teilvorlagen sind HTML + HubL-Dateien, die in andere Code-Dateien eingefügt werden können. Mit Teilvorlagen können Sie einen modulareren Ansatz verfolgen, indem Sie Markups zwischen mehreren Vorlagen teilen. Ein Header kann beispielsweise zu einer Teilvorlage gemacht werden, sodass Sie ihn einfach als Komponente einbinden können, ohne ihn erneut codieren zu müssen.

​
Standardteilvorlagen

Eine Standardvorlage ist eine wiederverwendbare Vorlage oder Komponente, die Inhalte enthält, die auf einzelnen Seiten bearbeitet werden können. Dies ermöglicht es Content-Autoren, den Inhalt nach Bedarf zu ändern, im Gegensatz zu globalen Teilvorlagen, die immer Inhalte teilen. Beispielsweise würde der folgende Code das Seitenleistenmodul in eine andere Vorlagendatei ziehen. Standardteilvorlagen müssen die folgenden Annotationen oben in der Vorlagendatei enthalten:
  • templateType: page
  • isAvailableForNewContent: false
{% include "../partial/sidebar.html" %}

​
Globale Teilvorlagen

Eine globale Teilvorlage ist ein Typ von globalem Inhalt, der in mehreren Vorlagen verwendet werden kann, wobei der Inhalt in allen Instanzen des Teils gemeinsam genutzt wird. Globale Teilvorlagen werden häufig für Header und Footer verwendet, was Sie beispielsweise im Header und Footer der CMS Hub-Boilerplate sehen können. Diese Teilvorlagen werden dann in der base.html-Datei mithilfe des global_partial-Tags aufgerufen. Globale Teilvorlagen müssen die Annotation templateType: global_partial oben in der Datei enthalten. 
{% global_partial path="../partials/header.html" %}

​
Blöcke und Erweiterungen

Bei der Erstellung komplexer Vorlagen können Sie unterteilte Blöcke erstellen, die eine übergeordnete Vorlage erweitern. Sie können beispielsweise eine übergeordnete Vorlage erstellen, die die erforderlichen standard_header_includes- und standard_footer_includes-Variablen enthält. Innerhalb dieser Vorlage definieren Sie einen eindeutigen Block unter Verwendung der folgenden Syntax, wobei body ein eindeutiger Name ist: 
{% block body %}
<!-- Content to display -->
{% endblock body %}
Dann können Sie in der untergeordneten Vorlage die übergeordnete Vorlage erweitern und dann mehr Inhalt in den body-Block einfügen. 
{% extends "./layouts/base.html" %}
{% block body %}
<h3>Page Content</h3>
<ul>
  <li>Bullet 1<li>
  <li>Bullet 2<li>
  <li>Bullet 3<li>
</ul>
{% endblock %}
Diese Methode wird in der base.html-Vorlage der CMS Hub Boilerplate verwendet, die dann um die anderen Vorlagen im Vorlagen-Ordner erweitert wird.

​
Globale Gruppen

Globale Gruppen, die mit der Drag-&-Drop-Vorlagendesigner im Design-Manager erstellt wurden, können ebenfalls einbezogen werden. Die Syntax ist unten dargestellt: 
{% include "/path/to/global_header.template.json" %}