Globaler Content

Last updated:

Globaler Content ist Inhalt, der über Teile einer Website verteilt ist. Häufige Beispiele sind Website-Header, -Footer und Seitenleisten. Als Entwickler legen Sie fest, welche Komponenten global sein sollen, indem sie globale Teilvorlagen verwenden oder Module global machen. HubSpot stellt Content-Autoren eine andere Bearbeitungsumgebung bereit, die es ihnen erleichtert, den globalen Content zu bearbeiten und die Änderungen vor der Veröffentlichung seitenübergreifend in der Vorschau anzuzeigen. Um mehr darüber zu erfahren, wie Sie Ihren globalen Content bearbeiten können, lesen Sie bitte den Artikel über die Verwendung von globalem Content in mehreren Vorlagen in der HubSpot-Wissensdatenbank.

Editor für globalen Content

Überblick

Globaler Content wird am besten zur Anzeige der gleichen Informationen auf mehreren Seiten verwendet. Zum Beispiel den Header und Footer Ihrer Website, z. B. den Header oben auf dieser Seite.

hubspot-developers-header

Im Folgenden finden Sie einige weitere Beispiele für Bereiche, in denen Sie globalen Content verwenden können:

  • Sekundäre Navigation für verschiedene Abschnitte Ihrer Website
  • Copyright-Footer (oder Unterfußzeilen)
  • Seitenleisten für Blog-Beiträge (zur Anzeige der letzten Beiträge, Autorenlisten und mehr)

Da globaler Content an mehreren Stellen auf einer Website verwendet wird, ist es umso wichtiger, dass Sie Ihre globalen Teilvorlagen und Module barrierefrei gestalten und entwickeln.

Globale Teilvorlagen vs. Globale Module

Als Entwickler können Sie globale Teilvorlagen und globale Module erstellen, mit einigen wesentlichen Unterschieden zwischen ihnen:

  • Globale Teilvorlagen sind eine Art von Vorlage, die mit HTML & HubL erstellt wurde und auf Ihrer gesamten Website wiederverwendet werden kann. Die gebräuchlichsten Arten von globalen Teilverlagen sind Header, Seitenleisten- und Footer von Websites.
  • Globale Module sind Module, die aus einzelnen oder mehreren Inhalten bestehen, die auf mehreren Seiten Ihrer Website verwendet werden können. Einige häufige Arten von globalen Modulen können Elemente wie Blog-Abonnementformulare, sekundäre Navigationselemente und Calls-to-Action sein.
Sie sollten es vermeiden, globale Module in globale Teilvorlagen aufzunehmen, da dies zu einem negativen Bearbeitungserlebnis führen kann.

Alle Module und Felder in Ihren globalen Teilvorlagen und globalen Modulen lassen sich problemlos im Editor für globalen Content bearbeiten.

Globale Teilvorlagen

Eine globale Teilvorlage erstellen

Eine globale Teilvorlage ist ein Typ von Vorlage, den Sie lokal über das HubSpot CLI erstellen können, indem Sie den create-Befehl wie unten gezeigt verwenden.

hs create template <partial-file-name>

Wenn Sie aufgefordert werden, einen Typ von Vorlage auszuwählen, wählen Sie global partial aus.

Dadurch wird Ihre Vorlage im gewünschten Verzeichnis erstellt und die HTML-Datei enthält die folgenden Annotationen zur Vorlage.

<!-- templateType: global_partial label: Page Header -->

Ein Beispiel für eine Teilvorlage mit globalen Content bietet unsere Boilerplate bei GitHub.

Drag-&-Drop-Bereiche zu globalen Teilvon hinzufügen

Sie können Drag-&-Drop-Funktionen für Inhalte in Ihren Teilvorlage mit globalen Content aktivieren, indem Sie dnd_area-Tags hinzufügen, ähnlich wie bei der Aktivierung in Seitenvorlagen. Weitere Informationen finden Sie in der Dokumentation zum Drag-&-Drop-Bereich. 

Eine Teilvorlage in Ihrer vorhandenen Vorlage berücksichtigen

Um eine Teilvorlage mit globalen Content in eine Ihrer bestehenden Vorlagen einzufügen, verwenden Sie das HubL-Tag global_partial und verweisen dabei auf den Pfad zu Ihrer Teilvorlage. Nachfolgend finden Sie ein Beispiel aus der CMS-Boilerplate, das dieses Tag verwendet.

{% global_partial path="../partials/header.html" %}

Wenn globale Teilvorlagen ausgegeben werden, enthalten sie ein <div>-Wrapping um die globale Teilvorlage. Dies wird vom Seiten-Editor verwendet, um zu erkennen, dass es sich um eine globale Teilvorlage handelt.

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

Bitte beachten: Verwenden Sie global_partial nicht innerhalb des <head> einer Vorlage. Dies würde zu ungültigem HTML führen.

In den meisten Situationen, in denen Sie eine globale Teilvorlage im Header verwenden sollten, ist es möglicherweise sinnvoller, stattdessen ein globales Modul mit einem {%require_head%} zu verwenden, um benutzerdefinierten Code in den Header einzufügen und trotzdem Modulfelder bereitzustellen.

Globale Module

Sie können globale Module wie jedes andere Modul mithilfe des CLI erstellen, indem Sie den hs create-Befehl wie unten gezeigt ausführen.

hs create module <module_name>

Ein globales Modul unterscheidet sich durch das global-Flag in der meta.json-Datei des Moduls.

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

Sie können auch globale Module in HubSpot mithilfe des Design-Managers erstellen.

Erfahren Sie mehr über das Arbeiten mit Modulen in den folgenden verwandten Ressourcen:

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.