HTML + HubL-Vorlagen

Last updated:

HTML + HubL-Vorlagen können für jede Art von Vorlage in CMS Hub verwendet werden. Diese Vorlagen sind .html-Dateien, die die HubL-Vorlagensprache unterstützen. Da diese Code-Vorlagen HubL unterstützen, empfiehlt sich für das Anzeigen einer Vorschau die Verwendung derVorlagenvorschau im Design-Manager oder das Anzeigen von Seiten in einem Sandbox-Account. HTML + HubL-Vorlagen können Teilvorlagen enthalten, mit denen häufig verwendete Code-Abschnitte, wie Header und Footer, voneinander getrennt werden können.

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 HubSpot CMS 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="theme.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> ...
Vorlagenannotationen
AnnotationTypBeschreibung
templateType
StringGibt an, welcher Vorlagentyp eine Datei ist. Werte sind:
isAvailableForNewContent
String

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

enableDomainStylesheets
String

Gibt an, ob die Vorlage Domain-Stylesheets laden soll. Werte sind: true, false.

Label
String

Benutzerfreundliche Beschreibung der Vorlage, die im Bildschirm für die Vorlagenauswahl angezeigt wird. Zum Beispiel, „Über“-Seite, Homepage, Preise.

screenshotPath
String

Der Screenshot, der angezeigt wird, wenn ein Content-Autor eine Vorlage auswählt. Anhand dieses Screenshots sollten Sie Ihre Vorlagen leicht unterscheiden können.

Header- und Footer-Incudes

Bei HubSpot-Vorlagen müssen zwei Tags vorhanden sein, es sei denn, die Datei ist eine Teilvorlage. Die beiden Tags sind:

  • {%{{ standard_header_includes }}endraw %} – Wird verwendet, um auf intelligente Weise kombinierte und minifizierte erforderliche CSS-Dateien hinzuzufügen. 
  • {% raw %}{%{{ standard_footer_includes }}endraw %} – 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.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1670252289768" heading='Teilvorlagen', module_id=27642531648, label='Dev - Heading' %} {% end_module_block %}
{% module_block module "module_1582321309921" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

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.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1670252299270" heading='Standardteilvorlagen', hx='h3', module_id=27642531648, label='Dev - Heading' %} {% end_module_block %}
{% module_block module "module_1582321383389" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

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
{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321467478" code_snippet='{% include "../partial/sidebar.html" %}', module_id=27668713892, showLangTab=True, useLineNumbers=True, label='Code' %} {% end_module_block %}
{% module_block module "widget_1670252309414" heading='Globale Teilvorlagen', hx='h3', module_id=27642531648, label='Dev - Heading' %} {% end_module_block %}
{% module_block module "module_1582321409527" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

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 HubSpot CMS 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.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1582321452124" code_snippet='{% global_partial path="../partials/header.html" %}', module_id=27668713892, showLangTab=True, useLineNumbers=True, label='Code' %} {% end_module_block %}
{% module_block module "widget_1670252324428" heading='Blöcke und Erweiterungen', hx='h3', module_id=27642531648, label='Dev - Heading' %} {% end_module_block %}
{% module_block module "module_1582321535816" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

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:

{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321577296" code_snippet='{% block body %}\n\n{% endblock body %}', module_id=27668713892, showLangTab=True, useLineNumbers=True, label='Code' %} {% end_module_block %}
{% module_block module "widget_1670253781610" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Dann können Sie in der untergeordneten Vorlage die übergeordnete Vorlage erweitern und dann mehr Inhalt in den body-Block einfügen.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321595993" code_snippet='{% extends "./layouts/base.html" %}\n{% block body %}\n

Page Content

\n
    \n
  • Bullet 1
  • \n
  • Bullet 2
  • \n
  • Bullet 3
  • \n
\n{% endblock %}\n', module_id=27668713892, showLangTab=True, useLineNumbers=True, label='Code' %} {% end_module_block %}
{% module_block module "module_1582321619780" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Diese Methode wird in der base.html-Vorlage der CMS Hub Boilerplate verwendet, die dann um die anderen Vorlagen im Vorlagen-Ordner erweitert wird.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1670252374953" heading='Globale Gruppen', hx='h3', module_id=27642531648, label='Dev - Heading' %} {% end_module_block %}
{% module_block module "module_1582321650766" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Globale Gruppen, die mit der Drag-&-Drop-Vorlagendesigner im Design-Manager erstellt wurden, können ebenfalls einbezogen werden. Die Syntax ist unten dargestellt:

{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321683024" code_snippet='{% include "/path/to/global_header.template.json" %}', module_id=27668713892, showLangTab=True, useLineNumbers=True, label='Code' %} {% end_module_block %}
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.