Überblick über das Modulsystem

Last updated:

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:

  1. Eine Benutzeroberfläche, die aus einer Liste von Feldern besteht, die der Benutzer bei der Bearbeitung einer Modulinstanz sieht.
  2. Ein HTML+HubL-Vorlagenfragment mit zugehörigem CSS und JS, das definiert, wie HTML generiert wird

Ein Beispiel

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:

Teammitglied-Modulinstanz

Die Benutzeroberfläche für die Bearbeitung

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:

  1. ein Bildfeld für das Foto eines Teammitglieds
  2. zwei Textfelder für den Namen und die Position des Teammitglieds
  3. 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.

Teammitglied-Modul-Editor

Modul vs. Modulinstanz

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.

fields.json

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.

// fields.json [ { "name": "team_member_photo", "label": "Team Member Photo", "required": true, "responsive": true, "resizable": true, "type": "image", "default": { "src": "", "alt": "" } }, { "name": "team_member_name", "label": "Team member name", "required": true, "type": "text", "default": "Joshua Beck" }, { "name": "team_member_position", "label": "Team member position", "required": true, "type": "text", "default": "CEO, Co-Founder" }, { "name": "team_member_bio", "label": "Team member bio", "required": true, "type": "richtext", "default": "<p>Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.</p>" } ]

Weitere Informationen zu allen verfügbaren Feldern finden Sie im Artikel zu Modul- und Designfeldern.

Verwendung von Modulfelddaten zum Rendern von HTML

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.

<section class="team-member"> <img class="team-member__image" src="{{ module.team_member_image.src }}" alt="{{ module.team_member_image.alt }}"> <h3 class="team-member__name">{{ module.team_member_name }}</h3> <p class="team-member__position">{{ module.team_member_position }}</p> <div class="team-member__bio">{{ module.team_member_bio }}</div> </section>

Verwendung von Modulen in Vorlagen

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 "unique_identifier" path="/modules/team-member.module" %} {# override default values in a module instance #} {% module "unique_identifier" path="/modules/team-member.module", team_member_name="Brian Halligan", team_member_position="CEO" %}

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 sind eine großartige Option bei den Tools für Barrierefreiheit

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.

Module können die Lokalisierung erleichtern

Ä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.

Erste Schritte

Zum Einstieg können Sie sich unserer Tutorial Erste Schritte mit Modulen ansehen.

Weitergehende 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.