Überblick über das Modulsystem
Ein Verständnis der Module ist der Schlüssel zum Verständnis von CMS Hub und seiner Leistungsfähigkeit. Module sind wiederverwendbare Komponenten, die in Vorlagen verwendet oder über Drag-&-Drop-Bereiche und flexible Spalten zu Seiten hinzugefügt werden können. Zusätzlich zu den Modulen, die HubSpot bereitstellt, können Entwickler ihre eigenen Module für alles von Kundenreferenzen bis zu Fotogalerien erstellen. Module werden mit den Tools für lokale Entwicklung oder mithilfe des Design-Managers erstellt.
Ein Modul besteht aus zwei Teilen:
- Eine Benutzeroberfläche, die aus einer Liste von Feldern besteht, die der Benutzer bei der Bearbeitung einer Modulinstanz sieht.
- Ein HTML+HubL-Vorlagenfragment mit zugehörigem CSS und JS, das definiert, wie HTML generiert wird
Um besser zu verstehen, was ein Modul ist, sehen wir uns ein einfaches „Teammitglied“-Modul an. Das Modul besteht aus einem Foto, dem Namen des Teammitglieds, seinem Titel und einem kurzen Lebenslauf und sieht wie ein Teil einer CMS-Webseite aus:

Der Entwickler erstellt die Benutzeroberfläche (UI) für Module mithilfe von Feldern. Der Entwickler wählt dann die gewünschten Felder anhand der Art des zu erstellenden Moduls, der benötigten Daten und des Bearbeitungserlebnisses aus. In diesem Fall umfasst das Modul:
- ein Bildfeld für das Foto eines Teammitglieds
- zwei Textfelder für den Namen und die Position des Teammitglieds
- und ein Rich-Text-Feld für einen kurzen Lebenslauf.
Wenn ein Content-Autor ein Modul bearbeitet, wird die Benutzeroberfläche auf der Grundlage der Felder, die der Entwickler dem Modul hinzugefügt hat, und der jeweiligen Konfiguration der einzelnen Felder aufgebaut.

Es gibt zwei Begriffe, die häufig im Zusammenhang mit Modulen verwendet werden. Es ist wichtig, den Unterschied zwischen ihnen zu kennen.
- Modul – wiederverwendbare Komponenten, die zu Vorlagen und Seiten hinzugefügt werden können.
- Modulinstanz – die einzelnen gerenderten Module auf der Seite. Sie können separate Feldwerte haben und daher anders aussehen als andere Modulinstanzen, die für dasselbe Modul verwendet werden.
Die Felder für ein Modul werden in JSON als ein Array von Objekten definiert. Jedes Feld verfügt über einen Namen, einen Typ und einen Standardwert. Je nach Art des Feldes, das die Bearbeitung steuert, sind auch andere Eigenschaften verfügbar.
Weitere Informationen zu allen verfügbaren Feldern finden Sie im Artikel zu Modul- und Designfeldern.
Die Werte für die einzelnen Felder sind im HTML+HubL-Fragment für ein Modul über eine Modulvariable
verfügbar. Die Daten für die einzelnen Felder können über die Eigenschaften der Modulvariablen abgerufen werden. Beim Beispiel des Teammitglied-Moduls kann der Name des Teammitglieds über {{ module.team_member_name }}
aufgerufen werden.
Module werden mithilfe des module-, module_block- oder dnd_module-Tags und durch Angabe des Pfades zum Modul als Parameter zu Vorlagen hinzugefügt. Die Standardwerte für Felder in einem Modul können auch auf der Vorlagenebene überschrieben werden, indem wie im zweiten Teil des folgenden Beispiels gezeigt dem module-Tag, das dem Feldnamen entspricht, Parameter hinzugefügt werden.
Module können nicht ineinander verschachtelt werden. In den meisten Fällen, in denen Sie dies vorhaben, geschieht dies in der Regel aus Layout-Gründen. Abschnitte in Drag-&-Drop-Bereichen sind oft die bessere Lösung.
Module werden auf der gesamten Website verwendet, manchmal auf mehreren Seiten, sogar mehrfach auf einer Seite. Aus diesem Grund kann die Erstellung des HTML, CSS und JS Ihres Moduls im Hinblick auf mehr Barrierefreiheit einen großen Einfluss darauf haben, wie benutzerfreundlich Ihre Website für Menschen mit und ohne Behinderungen oder Beeinträchtigungen ist.
Ähnlich wie bei der Barrierefreiheit ermöglicht die Erstellung von Modulen, bei denen der gesamte Inhalt auf Feldern basiert, eine spätere Lokalisierung. Sie können zum Beispiel ein Modul „Ausgewählte Artikel“ haben. Anstatt den Text „Ausgewählte Artikel“ zu hart zu codieren, verwenden Sie ein Text- oder Rich-Text-Feld. Dann kann der Text für andere Sprachen geändert werden. Mehr über die Lokalisierung im CMS erfahren Sie unter Mehrsprachigkeit.
Zum Einstieg können Sie sich unserer Tutorial Erste Schritte mit Modulen ansehen.
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.