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. Content-Autoren-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 durch die Drag-&-Drop-Funktionalität – die nur mit HTML + HubL-Vorlagen möglich ist – ein besseres Erlebnis für Content-Autoren bieten.

image1-2

Das Beispiel aus dem Screenshot stammt aus der base.html-Datei in unserer CMS Theme Boilerplate. Die Boilerplate ist als Starthilfe für Entwickler gedacht, um eine ansprechende Website mit der CMS Hub-Software zu erstellen. Die Boilerplate stellen die von HubSpot empfohlenen bewährte Methoden dar, und wir beabsichtigen, aus Ihrem Feedback und ähnlichen Projekten zu lernen. Wir hoffen, dass sie Ihnen als Inspiration dienen und Ihre Website-Projekte beschleunigen.

Vertrautheit und Tools

Da es sich bei den HTML + HubL-Vorlagen um Code-Dateien handelt, können die vorhandenen Tools, über die Entwickler bereits verfügen, zur lokalen Bearbeitung verwendet werden. Für optimales lokales Entwickeln sollten Sie unsere Tools für lokale Entwicklung verwenden. Mit ihnen können Sie Dateien hochladen, abrufen, überwachen, erstellen und anderweitig sicher im Entwickler-Dateisystem sowie im Datei-Manager verwalten.

Für Entwickler, die mit anderen Vorlagensprachen vertraut sind, ist es einfach, die Ähnlichkeiten mit anderen Vorlagensprachen zu erkennen, da bei diesen Vorlagen HTML und, wo erforderlich, ein wenig HubL zum Einsatz kommen. Dies erleichtert den Umstieg von anderen Plattformen. 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. 

Zum Beispiel: Wenn Sie CSS-Dateien laden möchten, empfehlen wir, statt <link rel="stylesheet" type="text/css" href="theme.css"> für Stylesheets „requires“ auf Vorlagenebene zu verwenden, wobei modulspezifisches CSS im Modul sowie die meta.json-Dateien in den Modulen zu behalten, um Stylesheets anzugeben, die modulübergreifend genutzt werden können.

Der Vorteil dieses Ansatzes ist, dass Sie die Arbeit des bedingten Ladens dieser CSS-Dateien von sich und Ihren Entwicklungstools auf HubSpot übertragen. CMS Hub weiß, ob ein Content-Autor eine Instanz eines Moduls zu einer Seite hinzufügt, und kann daher die erforderlichen CSS-Dateien bedingt laden. So werden die geladenen CSS-Dateien auf das Nötigste minimiert und ein schnelleres Laden sichergestellt. CMS Hub übernimmt auch diese CSS-Dateien und sorgt für eine Leistungsverbesserung, indem es die Dateien bei Bedarf minifiziert und kombiniert und sie automatisch über ein CDN bereitstellt, ohne dass Sie etwas dafür tun müssen.

Um die Entwicklung in HubSpot zu erleichtern, gibt es Tools, die sowohl von der Community als auch von HubSpot entwickelt wurden. Es lohnt sich, sich diese näher anzuschauen. Da HubL auf Jinja basiert und größtenteils der gleichen Syntax folgt, können Sie in der Regel ein Sprach-Plugin in Ihrem lokalen Editor für Jinjava verwenden, um die Syntax von HTML- und HubL-Dateien besser hervorzuheben.

Vorlagenannotationen

Vorlagenannotationen bieten eine für die lokale Entwicklung geeignete Möglichkeit, HubSpot wichtige Vorlageneinstellungen mitzuteilen.  Da die Annotation Teil des Codes ist, können Sie die Annotation zu einem späteren Zeitpunkt ändern, um den templateType zu ändern.

<!--   templateType: page   isAvailableForNewContent: false   enableDomainStylesheets: false   label: Homepage screenshotPath: ../images/template-previews/home.png --> <!doctype html> <html> ...

Diese Vorlageneinstellungen bestimmen, wie und ob Vorlagen Content-Autoren angezeigt werden und ob sie domain-weite Stylesheets verwenden.

Vorlagenannotationen
AnnotationBeschreibungMögliche Werte
templateType
Specifies which template type a file is.
isAvailableForNewContent
Specifies if a template is available for selection in the content creation process.

true, false

enableDomainStylesheets
Specifies if the template should load stylesheets defined under settings > website > pages

true, false

Label
User friendly description of the template, displayed in the template selection screen

Über-Seite, Homepage, Preisgestaltung, beliebige benutzerdefinierte Zeichenfolge

screenshotPath
String

Bezeichnet einen Screenshot, der verwendet werden soll, 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 }}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 "module_1582321314051" heading='Teilvorlagen', hx='h2', path='../modules/Guides - 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. Dies ermöglicht Entwicklern einen modulareren Ansatz für die Erstellung komplexer Dokumente und die gemeinsame Nutzung von Markup in mehreren Vorlagen. Gängige Beispiele hierfür sind Kopf- und Fußzeilen, Seitenleisten usw., die oft gleich sind, so dass die Verwendung von Teilvorlagen zur Verwaltung dieser Inhalte eine einfache Erfahrung ist. Um eine HTML-Datei zu erstellen, die nicht die standardmäßig erforderlichen Vorlagenvariablen benötigt, müssen Sie die Annotation isAvailableForNewContent: false oben in der Datei einfügen.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321382259" heading='Standardteilvorlagen', hx='h3', path='../modules/Guides - Heading' %} {% end_module_block %}
{% module_block module "module_1582321383389" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Ein Typ von Teilvorlage, der in mehreren Vorlagen verwendet werden kann und Content enthält, der auf einzelnen Seiten bearbeitet werden kann. templateType: page und 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 "module_1582321491473" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Mit dem include-Tag können Sie auch mehrere CSS-Dateien zu einer einzigen CSS-Datei kompilieren. Wenn Sie die übergeordnete Datei veröffentlichen, wird die eingeschlossene Datei in eine Datei mit dem CSS der übergeordneten und der untergeordneten Datei kompiliert und sie wird minifiziert. Dieses Verfahren wird im CSS der CMS Theme Boilerplate am Ende der Datei verwendet, um mehrere CSS-Dateien in einer Datei zu kombinieren.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321414708" heading='Globale Teilvorlagen', hx='h3', path='../modules/Guides - Heading' %} {% end_module_block %}
{% module_block module "module_1582321409527" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Eine Art von Teilvorlage, die für mehrere Vorlagen verwendet werden kann, deren Inhalt global bearbeitet wird. Globale Teilvorlagen sind für Teilvorlagen mit der Annotation templateType: global_partial vorgesehen und werden häufig für Kopf- und Fußzeilen verwendet. Dieses Verfahren wird in der CMS Theme Boilerplate für die Header- und Footer-Teilvorlagen verwendet. Diese Teilvorlagen werden dann in der base.html-Datei mithilfe des global_partial-Tags aufgerufen. Globale Teilvorlagen sind eine Form von globalem Inhalt.

{% 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 "module_1582321522737" heading='Blöcke und Erweiterungen', hx='h3', path='../modules/Guides - 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. Dieses Verfahren ist nicht jedermanns Sache, kann jedoch nützlich sein, um beim Codieren komplexer Vorlagen den Überblick zu behalten.

In einem Anwendungsfall können Sie 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 "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 CMS Theme Boilerplate in base.html verwendet. Dies wird durch die Vorlagen im Vorlagenordner erweitert.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "module_1582321662586" heading='Globale Gruppen', hx='h3', path='../modules/Guides - 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.