Globaler Content

Last updated:

Globaler Content ist Inhalt, der über Teile einer Website verteilt ist. Gängige Beispiele sind Header, Footer, Seitenleisten, Logos oder andere Komponenten. Entwickler legen fest, welche Komponenten global sein sollen, indem sie globale Teilvorlagen verwenden oder Module global machen. Bei der Bearbeitung einer globalen Komponente steht Content-Autoren eine andere Bearbeitungsfunktion zur Verfügung, die es ihnen erleichtert, den globalen Content zu bearbeiten und die Änderungen vor der Veröffentlichung seitenübergreifend in der Vorschau anzuzeigen. Wenn Sie mehr darüber erfahren möchten, wie Sie Ihren globalen Content bearbeiten können, lesen Sie bitte unseren Wissensdatenbank-Artikel über die Verwendung von globalem Content in mehreren Vorlagen.

Editor für globalen Content

Wann und wo sollte ich globalen Content verwenden?

Globaler Content wird am besten in Bereichen einer Website verwendet, in denen Sie über mehrere Seiten hinweg konsistente Informationen anzeigen lassen möchten. Ein gutes Beispiel dafür sind die Header und Footer Ihrer Website. Ein weiteres Beispiel für globalen Content finden Sie oben auf dieser Seite. Der Header der Entwicklerseite verwendet globalen Content, um den obersten Header zu erstellen, den Sie unten abgebildet sehen.

HubSpot-Entwickler-Website Globaler 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

Globale Teilvorlagen sind Teile von HTML & HubL-Inhalt, die auf Ihrer gesamten Website wiederverwendet werden können. 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.

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

Erstellen einer Teilvorlage mit globalen Content mithilfe der Tools für lokale Entwicklung

Sie können eine neue Teilvorlage mit globalen Content erstellen, indem Sie den create-Befehl verwenden und global-partial als Vorlagentyp angeben, wie unten dargestellt.

hs create template <partial-file-name>

Sie werden aufgefordert, einen Vorlagentyp 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.

Hinzufügen von Drag-&-Drop-Bereichen zu Teilvorlage mit globalen Content

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

Einbinden Ihrer Teilvorlage mit globalen Content in Ihre bestehende Vorlage

Um Ihre 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 unserer 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>

Verwenden Sie global_partial nicht innerhalb des <head> einer Vorlage. Dies würde zu ungültigem HTML führen und kann Nebenwirkungen haben.

In den meisten Situationen, in denen man eine globale Teilvorlage im Header verwenden sollhte, kann es sinnvoller sein, stattdessen ein globales Modul mit einem {%require_head%} zu verwenden, um benutzerdefinierten Code in den Header einzufügen und trotzdem Modulfelder bereitzustellen.

Erstellen eines globalen Moduls

Globale Module können wie jedes andere Modul mit Ihren CLI-Tools erstellt werden. Der Hauptunterschied zwischen der Kennzeichnung eines Moduls als globales Modul und als Standardmodul ist das global-Flag in der meta.json-Datei des Moduls (siehe Zeile 5 in den Code-Beispielen unten).

Globales Modul

// 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 }

Nicht-globales Modul

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

Wenn Sie ein Modul mit dem hs create module <name> <dest>-Befehl erstellen und dieses Flag in der meta.json-Datei auf true setzen, weiß das System, dass das Modul ein globales Modul ist. Um mit der Verwendung von Modulen loszulegen, besuchen Sie unsere Seite mit dem Überblick über Module. Sie können globale Module auch über den Design-Manager erstellen. Wenn Sie mehr über die Erstellung von Modulen (sowohl globale als auch benutzerdefinierte) erfahren möchten, lesen Sie bitte unseren Wissensdatenbank-Artikel über das Erstellen und Bearbeiten von Modulen.


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.