> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt > Use this file to discover all available pages before exploring further. # HTML- + HubL-Vorlagen > CMS Hub-Vorlagen sind in HTML und HubL geschrieben. Diese Vorlagen können Bereiche enthalten, die von den Content-Autoren leicht selbst bearbeitet werden können. HTML + HubL-Vorlagen können für [jede Art von Vorlage](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types) in CMS Hub verwendet werden. Diese Vorlagen sind .html-Dateien, die die [HubL-Vorlagensprache](/cms/reference/hubl/operators-and-expression-tests) unterstützen. Da diese Code-Vorlagen HubL unterstützen, empfiehlt sich für das Anzeigen einer Vorschau die Verwendung der [Vorlagenvorschau im Design-Manager](https://knowledge.hubspot.com/de/website-pages/understand-a-hubspot-template-setup) oder das Anzeigen von Seiten in einem Sandbox-Account. HTML + HubL-Vorlagen können [Teilvorlagen](#partials) 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](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates). Entwickler wiederum können Content-Autoren durch die [Drag-&-Drop-Funktionalität](/cms/reference/hubl/tags/dnd-areas), die nur mit HTML + HubL-Vorlagen möglich ist, ein besseres Erlebnis bieten. image1-2 Die obige Vorlage ist die [base.html-Vorlage](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), die in der [CMS Hub-Boilerplate](/cms/start-building/building-blocks/themes/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](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli) von HubSpot zu verwenden, damit Sie Dateien [hochladen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#upload), [abrufen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#fetch), [überwachen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#watch), [erstellen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#create) 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 `` zu verwenden, das Stylesheet über `css_assets` in die [meta.json-Datei des Moduls](/cms/reference/modules/configuration#adding-css-and-javascript-dependencies) 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](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow). ## 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. ```html theme={null} ... ``` | Annotation | Typ | Beschreibung | | -------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `templateType` | Zeichenfolge | Gibt an, welcher Vorlagentyp eine Datei ist. Werte sind:
| | `isAvailableForNewContent` | Zeichenfolge | 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](/cms/reference/hubl/variables#required-page-template-variables) nicht enthalten. Vorlagen vom Typ `page`, die auf „false“ festgelegt sind, können ebenfalls als [Standardteilvorlagen](#partials) verwendet werden. | | `enableDomainStylesheets` | Zeichenfolge | Gibt an, ob die Vorlage [Domain-Stylesheets](https://knowledge.hubspot.com/de/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level) laden soll. Die Werte umfassen: `true`, `false`. | | `Label` | Zeichenfolge | Benutzerfreundliche Beschreibung der Vorlage, die im Bildschirm für die Vorlagenauswahl angezeigt wird. Zum Beispiel: `About Page`, `Homepage`, `Pricing`. | | `screenshotPath` | Zeichenfolge | 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 }}` – 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](#partials) 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](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) oben in der Vorlagendatei enthalten: * `templateType: page` * `isAvailableForNewContent: false` ```hubl theme={null} {% include "../partial/sidebar.html" %} ``` ### Globale Teilvorlagen Eine globale Teilvorlage ist ein Typ von [globalem Inhalt](/cms/start-building/building-blocks/global-content#global-partials), 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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html) und [Footer](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html) der CMS Hub-Boilerplate sehen können. Diese Teilvorlagen werden dann in der [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)-Datei mithilfe des `global_partial`-Tags aufgerufen. Globale Teilvorlagen müssen die [Annotation](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: global_partial` oben in der Datei enthalten. ```hubl theme={null} {% 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`](/cms/reference/hubl/variables#required-page-template-variables)- und [`standard_footer_includes`](/cms/reference/hubl/variables#required-page-template-variables)-Variablen enthält. Innerhalb dieser Vorlage definieren Sie einen eindeutigen Block unter Verwendung der folgenden Syntax, wobei `body` ein eindeutiger Name ist: ```hubl theme={null} {% block body %} {% endblock body %} ``` Dann können Sie in der untergeordneten Vorlage die übergeordnete Vorlage erweitern und dann mehr Inhalt in den `body`-Block einfügen. ```hubl theme={null} {% extends "./layouts/base.html" %} {% block body %}

Page Content

{% endblock %} ``` Diese Methode wird in der [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)-Vorlage der CMS Hub Boilerplate verwendet, die dann um die anderen Vorlagen im [Vorlagen-Ordner](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) erweitert wird. ### Globale Gruppen [Globale Gruppen](https://knowledge.hubspot.com/de/design-manager/use-global-content-across-multiple-templates), die mit der Drag-&-Drop-Vorlagendesigner im Design-Manager erstellt wurden, können ebenfalls einbezogen werden. Die Syntax ist unten dargestellt: ```hubl theme={null} {% include "/path/to/global_header.template.json" %} ```