Konfigurieren eines Moduls

Last updated:

Beim Erstellen eines Moduls stehen eine Reihe von Optionen zur Verfügung, die sich darauf auswirken, wo ein Modul sichtbar ist, wie es identifiziert wird und wie es bearbeitet wird. Module erscheinen lokal als Ordner mit einem .module-Suffix. In diesem Ordner befinden sich die Dateien, aus denen die Einstellungen des Moduls bestehen, sowie der Code, der zum Rendern des Moduls verwendet wird. Die Konfiguration wird in der meta.json-Datei gespeichert. Felder werden separat in einer fields.json-Datei konfiguriert. Die meisten Konfigurationen können auch über den Modul-Editor im Design-Manager geändert werden. 

Lokal angezeigte Modulordnerstruktur

Hinzufügen eines Symbols

Module können über ein Symbol verfügen, das im Design-Manager und in den Seiten- und E-Mail-Editoren verwendet wird. Für Marketplace-Anbieter sind diese Symbole verpflichtend. Der Zweck des Symbols besteht darin, dem Content-Autor einen visuellen Kontext für den Zweck des Moduls zu liefern. Daher ist es am besten, wenn Sie verschiedene Symbole für die verschiedenen Modultypen in Ihrem Design verwenden. Es gibt zwei Möglichkeiten, ein Symbol hinzuzufügen: über den Design-Manager oder das CMS CLI.

Add an icon using the design manager

  1. Öffnen Sie das Modul im Design-Manager.
  2. Wenn Sie sich im Modul-Editor befinden, ist das Symbol neben dem Titel und dem Modultyp eine Schaltfläche. Wenn Sie diese Schaltfläche auswählen, wird ein Feld zum Hochladen eines Symbols angezeigt.
  3. Laden Sie Ihr Symbol hoch bzw. wählen Sie es aus, und Sie können es in Ihrem Seiten-Editor und Design-Manager sehen.
Change Icon

Ein Symbol über das CLI hinzufügen

Um bei der lokalen Entwicklung ein Symbol hinzuzufügen, öffnen Sie die meta.json-Datei des Moduls und fügen Sie den Wert des icon-Parameters hinzu oder bearbeiten Sie ihn so, dass er ein SVG vom Datei-Manager ist.

// meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." }

Erstellen eines Modulsymbols

Modulsymbole müssen als .svg-Datei vorliegen und dürfen nicht größer als 10 KB sein. Um ein optimales Ergebnis zu erzielen, sollte Ihr Symbol relativ einfach sein und nur eine Farbe verwenden. Verwendet Ihr Symbol mehr als eine Farbe, wird es automatisch für Sie umgewandelt. Das standardmäßig angezeigte Modulsymbol ist ein Schraubenschlüssel- und Pinselsymbol.

Ändern des Labels

Das Label, das bei der Anzeige von Modulen im Editor verwendet wird, kann unabhängig vom Namen des Moduls angepasst werden. Dies ist nützlich, wenn Sie lokal entwickeln, da Sie einen Namen verwenden können, der für Sie sinnvoll ist, während Sie einen anderen Namen haben, den die Autoren der Inhalte sehen. Der label-Parameter wird lokal geändert, um das Label festzulegen. Im Design-Manager gibt es ein Feld im Modul-Editor unterhalb des Modulnamens.

Modul-Editor – Label-Feld

Ein Modul global machen

Bei normalen Modulen ist der Inhalt jeder Instanz eines Moduls in einer Seite, E-Mail oder Vorlage unabhängig. In einigen Anwendungsfällen ist es sinnvoll, dass alle Instanzen eines Moduls den gleichen Inhalt haben. Dies wird durch Festlegen von global auf true bewirkt. 

Es ist auch möglich, Module in einer Drag-&-Drop-Vorlage über die Benutzeroberfläche in globale Module umzuwandeln.

Steuern, wo ein Modul zur Verwendung verfügbar ist

Module können durch die Konfiguration von hostTemplateTypes auf bestimmte Inhaltstypen beschränkt werden. Module können außerdem ausgeblendet werden, sodass sie nicht direkt zu Seiten hinzugefügt werden können, indem is_available_for_new_content auf false festgelegt wird. Module, die für Navigationsmenüs und die Suche entwickelt wurden, sind gute Kandidaten für das Ausblenden mittels is_available_for_new_content.

Beides kann auch über den Modul-Editor verwaltet werden.

Hinzufügen von CSS- und JavaScript-Abhängigkeiten

Zusätzlich zur Verwendung von module.css und module.js zum Hinzufügen von CSS und JavaScript, das zu allen Seiten hinzugefügt wird, die eine Modulinstanz enthalten, können Abhängigkeiten, die zwischen Modulen geteilt werden, mithilfe von css_assets und js_assets hinzugefügt werden. Die Pfade können absolut oder relativ zur meta.json-Datei sein.

// meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] }

Warnung: Wenn relative Pfade verwendet werden, um auf Abhängigkeiten zu verweisen, überschreibt die Ausführung von hs fetch --overwrite zur Aktualisierung des Moduls für die lokale Entwicklung die relativen Pfade mit absoluten Pfaden.

meta.json

Sie können die Parameter in der folgenden Tabelle in die mea.json-Datei eines Moduls einfügen.

ParameterTypeDescription Default
icon
String

URL zu einem Bild, das als Symbol für ein Modul verwendet werden soll.

 null
label
String

Label, das verwendet wird, wenn Module in den Content Editoren angezeigt werden
module_id
Number

Eindeutige ID für das Modul, die unabhängig vom Pfad ist.
is_available_for_new_content
Boolean

Der Wert für den Umschalter in der oberen rechten Ecke des Modul-Editors in HubSpot. Bestimmt, ob das Modul im Inhalt verwendet werden kann.

 true
global
Boolean

Gibt an, ob das Modul global ist oder nicht

 false
host_template_types
Array

Ein array von Inhaltstypen, in denen das Modul verwendet werden kann. Eine oder mehrere von [ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ].

 ["PAGE", "BLOG_POST", "BLOG_LISTING"]
css_assets
Array

Ein array von CSS-Dateien, von denen das Modul abhängt. Unterstützt relative Pfade.

z. B. "css_assets": [{ "path": "../path/to/file.css" }]

 []
css_render_options
Object

Legt mit async fest, ob das Modul CSS asynchron gerendert wird: true, false 

 {"async": false}
js_assets
Array

Ein array von JavaScript-Dateien, von denen das Modul abhängt. Unterstützt relative Pfade.

z. B. "js_assets": [{ "path": "../path/to/file.js" }]

 []
js_render_options
Object

Ändert das JavaScript-Tag des Moduls, das der gerenderten Seite hinzugefügt wurde. Die Optionen umfassen:

  • position: head , footer
  • async: true, false 
  • defer: true, false 
  • type: string

 

 {"position":"footer"}
inline_help_text
String

Hilfetext, der am oberen Rand des Moduls in einem blauen Infokasten angezeigt wird (maximal 300 Zeichen).

Am besten geeignet, um die für die Verwendung des Moduls erforderlichen Informationen bereitzustellen. Wenn Sie feldspezifische Hilfetextinformationen übermitteln möchten, lesen Sie bitte unsere Dokumentation zu Hilfetext für Felder.

 null
master_language
String

Der Sprachcode der Sprache, in der die Felder des Moduls ursprünglich geschrieben wurden.

z. B. en
placeholder
Object

Legt Platzhalterinhalt für das Modul fest. Umfasst die folgenden Eigenschaften:

  • show_module_icon: ob das Modulsymbol angezeigt wird. true, false.
  • title: der Titel, der im Editor für das Modul erscheint. Zeichenfolge.
  • description: die Beschreibung, die im Editor für das Modul erscheint. Zeichenfolge.
 False
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.