> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt > Use this file to discover all available pages before exploring further. # Überblick über Modul- und Designfelder > HubSpot-Module und -Designs unterstützen das Anpassen durch Content-Autoren über Felder. Entwickler erstellen und organisieren Felder über eine fields.json-Datei. Innerhalb von [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) und [Designs](/cms/start-building/building-blocks/overview) werden Felder verwendet, um Content-Autoren zu ermöglichen, die Formatierung von Modulen und Designs mit Stilen und die Funktionalität auf Ihrer Website zu steuern. Beim Entwickeln eines Moduls oder Designs fügen Sie Felder in eine `fields.json`-Datei ein, die dann in das Design und die Content-Editoren übersetzt wird. theme-settings-fields Im Folgenden erfahren Sie mehr darüber, wie Sie Optionen für Modul- und Designfelder erstellen und verwalten. Weitere Informationen zu bestimmten Feldtypen finden Sie im [Referenzleitfaden für Modul- und Feldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields). ## Erstellen und Verwalten von Feldern Sie können der `fields.json`-Datei eines [Moduls](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) lokal über das [HubSpot-CLI](/developer-tooling/local-development/hubspot-cli/reference) und im In-App-Modul-Editor Felder hinzufügen. Um Felder zu einem [Design](/cms/start-building/building-blocks/overview) hinzuzufügen, müssen Sie die `fields.json`-Datei des Designs lokal über das CLI aktualisieren. ### HubSpot-CLI Beim [lokalen Erstellen](/developer-tooling/local-development/hubspot-cli/install-the-cli) können die Felder von Modulen und Designs über eine `fields.json`-Datei im Ordner des Moduls oder Designs bearbeitet werden. Bei Modulen wird diese Datei automatisch erstellt, wenn der [`hs create module`](/developer-tooling/local-development/hubspot-cli/reference)-Befehl verwendet wird. Alle im Modul-Editor verfügbaren Feldoptionen sind als Eigenschaften verfügbar, die Sie in der `fields.json`-Datei hinzufügen oder bearbeiten können. Dazu gehören Wiederholfelder, Wiederholgruppen und Bedingungen. Einer der Vorteile der lokalen Bearbeitung ist, dass es einfacher ist, [Ihre Module in Versionskontrollsysteme wie Git einzubinden](/cms/start-building/introduction/developer-environment/github-integration). ### Modul-Editor Der [Design-Manager](/cms/start-building/introduction/developer-environment/design-manager) verfügt über eine integrierte Modul-Editor-Benutzeroberfläche, mit der Sie Modulfelder [erstellen](https://knowledge.hubspot.com/de/design-manager/create-and-edit-modules), gruppieren und [bearbeiten](https://knowledge.hubspot.com/de/design-manager/create-and-edit-modules) können. Der Modul-Editor enthält eine Modulvorschau, mit der Sie sehen können, wie das Modul alleine aussieht, und mit der Sie Ihre Felder testen können. Da Module immer in einem Kontext angezeigt werden, sollten Sie sie immer in einer Vorlage testen, die Sie verwenden möchten, um zu sehen, welche sich Stile auf Vorlagenebene möglicherweise auf sie auswirken. Beachten Sie, dass ein Modul, das sich in einem gesperrten Ordner befindet, auf diese Weise nicht bearbeitet werden kann. Modul-Editor des Design-Managers **Hinweis:** Wenn Sie hauptsächlich lokal arbeiten, den Modul-Editor jedoch zum Konfigurieren von Feldern verwenden möchten, müssen Sie sicherstellen, dass Sie Ihre Änderungen [abrufen](/developer-tooling/local-development/hubspot-cli/reference#fetch). Dies ist besonders wichtig für diejenigen, die Versionskontrollsysteme wie Git verwenden. ## Nebeneinander platzierte Felder Standardmäßig werden Modulfelder in Content-Editoren vertikal gestapelt. Sie können jedoch Modulfelder nebeneinander platzieren, indem Sie den Feldern in der `display_width`-Datei eine `fields.json`-Eigenschaft mit dem Wert `half_width` hinzufügen. side-by-side-modules0 Ein einzelnes Feld mit einer `display_width` von `half_width` wird im Content-Editor in halber Breite angezeigt. Wenn das Feld über oder unter diesem Feld in der `fields.json`-Datei auf `half_width` festgelegt ist, werden sie nebeneinander platziert. ```json theme={null} // Example module fields.json file [ { "name": "number_field", "label": "Number", "required": false, "locked": false, "display": "slider", "min": 1, "max": 10, "step": 1, "type": "number", "prefix": "", "suffix": "", "default": null, "display_width": "half_width" }, { "label": "Description", "name": "description", "type": "text", "required": true, "default": "Add a description", "display_width": "half_width" } ] ``` ## Feldgruppen Wenn Felder miteinander in Beziehung stehen, ist es oft sinnvoll, sie visuell zu gruppieren. Erstellen Sie dazu Feldgruppen, die sowohl in Modulen als auch in Designs unterstützt werden. Um lokal eine Feldgruppe zu erstellen, erstellen Sie in `fields.json` ein Objekt mit `type` `"group"`. Fügen Sie dann ein `children`-Array hinzu, das die Felder enthält, die Sie zusammenfassen möchten. simple-field-group-example ```json theme={null} [ { "id": "9c00985f-01db-ac5d-73f5-80ed6c0c7863", "name": "my_text", "display_width": null, "label": "Text", "required": true, "locked": false, "validation_regex": "", "allow_new_line": false, "show_emoji_picker": false, "type": "text", "default": "Add text here" }, { "type": "group", "name": "recipe_summary_group", "label": "Recipe summary", "expanded": true, "inline_help_text": "Summarize the recipe (title and description)", "children": [ { "type": "text", "label": "Recipe title", "name": "recipe_title", "placeholder": "Burrata salad" }, { "type": "text", "label": "Recipe description", "name": "recipe_description", "placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough" } ] } ] ``` Sie können weitere Feldgruppierungen innerhalb einer Gruppe erstellen, indem Sie ein weiteres `"group"`-Objekt innerhalb des ersten `children`-Parameters hinzufügen. Erstellen Sie dann die Feldgruppe auf die gleiche Weise wie oben, indem Sie `children` verwenden, um die Felder einzuschließen. Sie können Feldgruppen bis zu einer Tiefe von drei verschachteln. field-group-with-secondary-grouping ```json theme={null} [ { "type": "group", "name": "recipe_summary_group", "label": "Recipe summary", "inline_help_text": "Summarize the recipe (title and description)", "display": "inline", "children": [ { "type": "text", "label": "Recipe title", "name": "recipe_title", "placeholder": "Burrata salad" }, { "type": "text", "label": "Recipe description", "name": "recipe_description", "placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough" }, { "type": "group", "name": "secondary_group", "label": "Secondary group", "expanded": false, "children": [ { "name": "bg_color", "label": "Background color", "sortable": false, "required": false, "locked": false, "type": "color", "default": { "color": "#ff0000", "opacity": 100 } } ] } ] } ] ``` #### Optionen für die Anzeige von Feldgruppen Sie können folgende Anzeigeverhalten der Feldgruppen anpassen: * **Erweiterung:** Standardmäßig werden Feldgruppen im Editor ausgeblendet. Gruppen, die verschachtelte Gruppen enthalten, werden als Drilldown-Schaltflächen angezeigt, mit denen die Gruppe in einer eigenen Ansicht geöffnet wird, wobei die innerste Gruppe Trennzeichen anzeigt. default-collapsed-group * **Anzeigetyp:** Gruppen, die keine verschachtelten Gruppen enthalten, werden standardmäßig als ausblendbare Abschnitte mit visuellen Trennzeichen um ihre untergeordneten Abschnitte herum angezeigt. Gruppen, die verschachtelte Gruppen enthalten, werden als Drilldown-Schaltflächen angezeigt, mit denen die Gruppe in einer eigenen Ansicht geöffnet wird, wobei die innerste Gruppe Trennzeichen anzeigt. * **Gruppensymbol:** Falls gewünscht, können Sie ein „Font Awesome“-Symbol einfügen, das links neben dem Label angezeigt wird. icon-example ```json theme={null} [ { "type": "group", "name": "recipe_summary_group", "label": "Recipe summary", "display": "drilldown", "inline_help_text": "Summarize the recipe (title and description)", "icon": { "name": "star", "set": "fontawesome-5.14.0", "type": "SOLID" }, "children": [ { "type": "text", "label": "Recipe title", "name": "recipe_title", "placeholder": "Burrata salad" }, { "type": "text", "label": "Recipe description", "name": "recipe_description", "placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough" } ] } ] ``` | Parameter | Typ | Beschreibung | | ---------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `display` | Zeichenfolge | Der Anzeigestil der Feldgruppe. Kann eine der folgenden Optionen sein: | | `icon` | Objekt | Fügt links neben dem Label ein Symbol hinzu. Enthält die folgenden Parameter: | | `expanded` | Boolesch | Gibt an, ob die Feldgruppe standardmäßig erweitert ist | #### Ausgabe von Feldwerten innerhalb von Feldgruppen Feldgruppen erstellen Dictionaries, die die Feldwerte enthalten, die Sie ausgeben möchten. Wenn Sie Feldgruppen verschachteln, ist die verschachtelte Feldgruppe ein Dictionary innerhalb des äußeren Feldgruppen-Dictionarys. Um auf diese Daten zuzugreifen, durchlaufen Sie den Baum je nach Kontext entweder vom Stammdesign oder von der Modulvariable aus. ```html example.html theme={null}
{# printing a value from a field group `recipe_summary` is the field group, `title` is the text field. #} {{module.recipe_summary.title}}
``` ```css example.css theme={null} /* Printing a Font field's color value, when the font field is within a field group. `typography` is the field group, `h1_font` is the field */ h1{ color: {{ theme.typography.h1_font.color }}; } ``` #### Ausgewählte Elemente in Feldgruppen In Situationen, in denen eine Feldgruppe wiederholt wird, können Sie eines oder mehrere dieser Vorkommen als ausgewählt angeben, sodass Sie das Element separat formatieren können, um es hervorzuheben. Dies kann z. B. besonders nützlich für eine Produktseite sein, auf der Sie ein bestimmtes Produkt hervorheben möchten. Sie können eine maximale Anzahl von ausgewählten Elementen pro Feldgruppe festlegen. Im Editor können Content-Autoren dann bei Bedarf Elemente als ausgewählt markieren. cms-feldgruppe-featured-in-app (1) Um Feature-Elemente in einer Feldgruppe zu aktivieren, fügen Sie die `group_occurrence_meta`-Eigenschaft in die Konfiguration der Feldgruppe ein. In dieser Eigenschaft werden die folgenden Eigenschaften gespeichert: * `featured_enabled`: wird auf `true` festgelegt um ausgewählte Elemente zu aktivieren. * `featured_limit`: die maximale Anzahl an zulässigen ausgewählten Elementen. Die Feldgruppe muss auch die `occurrence`-Eigenschaft berücksichtigen. ```json theme={null} // Field group example { "label": "Card", "name": "card", "type": "group", "occurrence": { "default": 2, "min": 1, "sorting_label_field": "card.title" }, "group_occurrence_meta": { "featured_enabled": true, "featured_limit": 3 }, "children": [ { "label": "Image", "name": "image", "type": "image", "responsive": true, "resizable": true, "show_loading": true, "default": { "loading": "lazy" } }, { "label": "Content", "name": "text", "type": "richtext", "enabled_features": [ "advanced_emphasis", "alignment", "block", "emoji", "font_family", "font_size", "lists", "standard_emphasis" ], "default": "

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

" } ], "default": [ { "image": { "loading": "lazy" }, "text": "

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

" }, { "image": { "loading": "lazy" }, "text": "

This is a title

Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.

" } ] } ``` Um zu überprüfen, ob ein Element in einer wiederholten Gruppe hervorgehoben wird, können Sie die `hs_meta`-Eigenschaft abfragen. Der folgende Code verwendet eine [for-Schleife](https://developers.hubspot.de/docs/cms/reference/hubl/loops), um nach Feldgruppenelementen zu suchen, die als ausgewählt festgelegt sind, und zeigt dann den Titel jedes Elements als `h3`-Header an. `{{ repeated_group_item.hs_meta.occurrence.featured }}` ```hubl theme={null}

Check out this week's featured items:

{% for item in module.card %} {% if item.hs_meta.occurrence.featured %}

{{item.title}}

{% endif %} {% endfor %}
``` ## Stilfelder Stilfelder sind ein spezieller Feldgruppentyp in der `fields.json`-Datei eines Moduls oder Designs, der Content-Autoren die Kontrolle über das Formatieren eines Moduls oder Designs im Seiten- und Design-Editor gibt. Im Folgenden erfahren Sie, wie Sie Stilfelder zu einem Modul oder Design hinzufügen können. Informieren Sie sich über [bewährte Methoden zur Verwendung und Organisation von Stilfeldern](https://developers.hubspot.de/docs/cms/best-practices/fields). ### Modulstilfelder Stilfelder, die einem Modul hinzugefügt werden, erscheinen bei der Bearbeitung des Moduls auf der Registerkarte *Stile* des Seiten-Editors. style-field-module-editor0 Wenn Sie Stilfelder zur `fields.json`-Datei eines Moduls hinzufügen, fügen Sie sie innerhalb einer Stilgruppe hinzu. Diese Gruppe kann jedoch mehrere Gruppen enthalten, wie unten dargestellt: ```json theme={null} // Module style fields [ { "type": "group", "name": "styles", "tab": "STYLE", "children": [ { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } } ] } ] ``` Die folgenden Felder können als Stilfelder in Modulen verwendet werden. Erfahren Sie mehr über die einzelnen Feldtypen im [Leitfaden für Module und Feldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields). * [Ausrichtung](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#alignment) * [Farbverlauf](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#gradient) * [Abstand](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#spacing) * [Hintergrundbild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#background-image) * [Rahmen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#border) * [Boolescher Wert](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#boolean) * [Auswahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#choice) * [Zahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#number) * [Farbe](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#color) * [Symbol](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#icon) * [Bild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#image) * [Schriftart](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font) * [Textausrichtung](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#text-alignment) Erfahren Sie mehr über [Modul- und Designfeldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields). Ein Beispiel für ein Stilfeld in der `fields.json`-Datei eines Moduls finden Sie in der [CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/card.module/fields.json). ### Designstilfelder Stilfelder, die einem Design hinzugefügt werden, erscheinen in der linken Seitenleiste des Design-Editors: style-field-theme-editor0 Alle Stilfelder in der `fields.json`-Datei eines Designs werden in die linke Seitenleiste des Design-Editors eingefügt und müssen nicht mehr in eine Stilgruppe eingeordnet werden, wie unten dargestellt: ```json theme={null} // Theme style fields [ { "label": "Global colors", "name": "global_colors", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "default": { "color": "#494A52" } }, { "label": "Secondary", "name": "secondary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "default": { "color": "#F8FAFC" } } ] }, { "label": "Global fonts", "name": "global_fonts", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "font", "visibility": { "hidden_subfields": { "size": true, "styles": true } }, "inherited_value": { "property_value_paths": { "color": "theme.global_colors.primary.color" } }, "default": { "fallback": "sans-serif", "font": "Lato", "font_set": "GOOGLE" } }, { "label": "Secondary", "name": "secondary", "type": "font", "visibility": { "hidden_subfields": { "size": true, "styles": true } }, "inherited_value": { "property_value_paths": { "color": "theme.global_colors.primary.color" } }, "default": { "fallback": "serif", "font": "Merriweather", "font_set": "GOOGLE" } } ] }, { "name": "branding_color", "label": "branding_color", "type": "color", "default": { "color": "#3b7bc0", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.primaryColor" } } }, { "name": "secondary_branding_color", "label": "Secondary Branding color", "type": "color", "default": { "color": "#ff6b6b", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.colors[2]" } } } ] } ] ``` Die folgenden Felder können als Stilfelder in Designs verwendet werden. Erfahren Sie mehr über die einzelnen Feldtypen im [Leitfaden für Module und Feldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields). * [Boolescher Wert](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#boolean) * [Rahmen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#border) * [Auswahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#choice) * [Farbe](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#color) * [Schriftart](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font) * [Bild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#image) * [Zahl](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#number) * [Abstand](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#spacing) Erfahren Sie mehr über [Modul- und Designfeldtypen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields). Ein Beispiel für ein Stilfeld in der `fields.json`-Datei eines Designs finden Sie in der [CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json). **Hinweis:** Wenn Sie ein Marketplace-Anbieter sind, sollten Sie bestehende Inhaltsfelder nicht durch Stilfelder in bestehenden Modulen ersetzen. Eine Änderung der Feldhierarchie in einer `fields.json`-Datei kann dazu führen, dass vorhandene Modulinstanzen ihre Daten verlieren. Stattdessen sollten Sie neue Stilfelder hinzufügen oder eine neue Auflistung erstellen, in der die Felder entsprechend gruppiert sind. Dadurch wird verhindert, dass Ihre Updates Kunden, die sich auf Ihre Design verlassen, Probleme bereiten. Wenn Sie sich für Migrationspfade für alte Module einsetzen möchten, [besuchen Sie das Ideen-Forum von HubSpot](https://community.hubspot.com/t5/HubSpot-Ideas/Create-a-path-to-make-it-possible-to-migrate-existing-fields-to/idi-p/450311#M85938). ### Generiertes CSS Einige Stilfelder bieten die Möglichkeit, CSS direkt auf der Grundlage des Feldwertes auszugeben. Dies ist besonders hilfreich bei Feldern, die eine kompliziertere Formatierung wie Farbverläufe steuern können. Die folgenden Stilfelder haben eine generierte `.css`-Eigenschaft: * [Hintergrundbild](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#background-image) * [Rahmen](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#border) * [Farbe](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#color) * [Schriftart](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font) * [Farbverlauf](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#gradient) * [Abstand](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#spacing) * [Textausrichtung](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#text-alignment) ```hubl theme={null} {% require_css %} {% end_require_css %} ``` ## Wiederholungen Bei der Erstellung von Modulen, die Informationen formatieren, gibt es oft Typen von Informationen, die sich wiederholen. Ein Rezeptmodul könnte zum Beispiel ein Feld für „Zutat“ haben. Die meisten Rezepte haben aber natürlich mehr als 1 Zutat. Sie könnten ihnen ein Rich-Text-Feld bereitstellen, aber dann verlieren Sie die Möglichkeit, eine einheitliche Formatierung durchzusetzen und Funktionen für jede Zutat hinzuzufügen. Hier kommen die Wiederholungen ins Spiel. HubSpot bietet zwei Arten von Wiederholungen an: Wiederholfelder und Wiederholgruppen. ### Wiederholfelder
Wiederholfelder sind normale Felder, aber Content-Autoren können Instanzen des Feldes hinzufügen, entfernen und neu anordnen. Mit dem obigen Beispiel für ein Rezeptmodul könnte jede Zutat ein sich wiederholendes Textfeld sein.
Wiederholfeld Auf diese Weise kann der Content-Autoren so viele Zutaten hinzufügen, wie er möchte. Aus der Sicht des Entwicklers erhalten Sie ein Array, das Sie in einer Schleife durchlaufen lassen können, um die Liste der Zutaten unter Anwendung der gewünschten Formatierung und Funktionalität zu drucken. Wiederholfelder werden am besten für sehr einfache Szenarien verwendet. Häufig sind [Wiederholgruppen](#repeating-groups) sinnvoller. **Hinweis:** Es ist derzeit nicht möglich, die Standardreihenfolge von sich wiederholenden Feldern festzulegen. #### Wiederholfelder in fields.json ```json theme={null} // Repeating field example { "name": "ingredient", "label": "Ingredient", "required": false, "locked": false, "occurrence": { "min": 1, "max": null, "sorting_label_field": null, "default": 1 }, "allow_new_line": false, "show_emoji_picker": true, "type": "text", "default": ["1 cup water"] } ``` #### Elemente in Modul-HTML+HubL in einer Schleife durchlaufen ```html theme={null} ``` ### Wiederholgruppen
Wiederholgruppen sind Feldgruppen, bei denen die Wiederholungsoption aktiviert ist. Mithilfe von Wiederholgruppen können Content-Autoren Gruppen von Feldern hinzufügen, entfernen und neu anordnen. Nehmen wir das Beispiel des Rezeptmoduls: Sie möchten Ihre Zutatenliste mit einer Einkaufslistenfunktion verknüpfen.
Wiederholgruppe von Feldern Die Menge einer Zutat wäre entscheidend für die Einkaufsliste. Das könnte man zwar in das Textfeld eingeben, dann müsste das Modul jedoch das Textfeld auswerten und hoffen, dass wir die Menge erfolgreich von der Zutat trennen können. Hier sind Wiederholgruppen sehr nützlich. Die Ausgabe dieser Felder ist ein Objekt, das in einer Schleife durchlaufen werden kann. #### Wiederholgruppen in fields.json ```json theme={null} // Repeating field group example { "id": "ingredients", "name": "ingredients", "label": "Ingredients", "required": false, "locked": false, "occurrence": { "min": 1, "max": null, "sorting_label_field": "ingredients.ingredient", "default": null }, "children": [ { "id": "ingredients.ingredient", "name": "ingredient", "label": "Ingredient", "required": false, "locked": false, "validation_regex": "", "allow_new_line": false, "show_emoji_picker": false, "type": "text", "default": "Water" }, { "id": "ingredients.quantity", "name": "quantity", "label": "Quantity", "required": false, "locked": false, "display": "text", "min": 0, "step": 1, "type": "number", "default": 1 }, { "id": "ingredients.measurement", "name": "measurement", "label": "Measurement", "help_text": "Unit of measurement (cups, tbsp, etc.)", "required": false, "locked": false, "allow_new_line": false, "show_emoji_picker": false, "type": "text", "default": "cups" } ], "type": "group", "default": [ { "ingredient": "Water", "quantity": 1, "measurement": "cups" } ] } ``` #### Durchlaufen von Wiederholfeldern in Modulen in einer Schleife ```html theme={null}

Ingredients

``` ### WiederholOptionen
Um die Bearbeitung zu vereinfachen und zu verhindern, dass Content-Editoren Werte angeben, die Sie nicht programmatisch berücksichtigt haben, können Sie Mindest- und Höchstwerte für die Anzahl der Elemente festlegen, die Content-Autoren einem Wiederholfeld oder einer Wiederholgruppe hinzufügen können. Für Wiederholgruppen können Sie auch festlegen, welches Feld bei der Anzeige der Wiederholung als Label für dieses Element dient.
Maximale Anzahl der Vorkommen ```json theme={null} "occurrence" : { "min" : 1, "max" : 4, "sorting_label_field" : "ingredients.ingredient", } ``` | Parameter | Typ | Beschreibung | Standard | | --------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | `max` | Ganzzahl | Maximale Anzahl der Vorkommen dieser Gruppe. Verhindert, dass der Content-Autor mehr als diese Anzahl von Elementen auf der Benutzeroberfläche hinzufügt. | `null` | | `min` | Ganzzahl | Mindestanzahl der Vorkommen dieser Feldgruppe. Verhindert, dass Benutzer weniger als diese Anzahl von Elementen auf der Benutzeroberfläche haben. | `null` | | `sorting_label_field` | Zeichenfolge | Dies ist die Feld-ID des Feldes, aus dem der Text übernommen wird, der auf der Benutzeroberfläche auf den verschiebbaren Karten angezeigt werden soll. Standardmäßig ist dies das erste Feld in der Gruppe. | | ## Übernommene Felder Die `inherited_value`-Eigenschaft kann so konfiguriert werden, dass ein Feld seinen Standardwert von anderen Feldern übernimmt. Um festzulegen, dass der gesamte Standardwert eines Feldes vom Wert eines anderen Feldes übernommen wird, legen Sie den `default_value_path` auf den Feldnamenpfad des Zielfeldes fest. Wenn `default_value_path` festgelegt ist, werden alle `default` für das Feld ignoriert. Um auf die Werte anderer Felder zuzugreifen, müssen Pfade `module.` am Anfang enthalten, als ob Sie auf den Wert im HubL-Code des Moduls zugreifen würden. ```json theme={null} // Inherited fields { "name": "body_font", "type": "font", "default": { "font": "Helvetica", "color": "#C27BA0" } }, { "name": "h1_font", "type": "font", "default": {}, "inherited_value": { "default_value_path": "module.body_font", "property_value_paths" : { "font": "module.body_font.font", "font_set": "module.body_font.font_set" } } } ``` Da die Schriftartfamilie durch eine Kombination von `font` und `font_set` bestimmt wird, müssen Sie beide für die Vererbung von Schriftartfeldern einschließen. Erfahren Sie mehr über das [Schriftartfeld](https://developers.hubspot.de/docs/cms/reference/fields/module-theme-fields#font). Bei komplexen Feldern (Felder, deren Werte Objekte sind) können die Benutzer detaillierter steuern, welche Eigenschaften durch `property_value_path` vererbt werden. Alle Pfade, auf die in `inherited_value` verwiesen wird, können bei komplexen Feldern auch Schlüssel aus dem Wert eines Feldes enthalten. Farbfelder haben beispielsweise Objektwerte, die sowohl die Farbe selbst als auch die Deckkraft enthalten. Um also den tatsächlichen Farbwert einer Farbe ohne die Deckkraft zu erhalten, würde der Pfad mit `.color` enden. So kann beispielsweise ein Schriftartfeld nur seine Farbe von einem separaten Farbfeld erben: ```json theme={null} // Inherited fields with objects { "name": "secondary_color", "type": "color", "default": { "color": "#C27BA0", "opacity": 100 } }, { "name": "h1_font", "type": "font", "default": { "font": "Helvetica", "size": 12, "size_unit": "px" }, "inherited_value": { "property_value_paths": { "color": "module.secondary_color.color" } } } ``` Sie können auch die Auswirkungen von `default_value_path` und `property_value_paths` kombinieren, damit ein Standardwert von einem Feld übernommen wird, während ein bestimmter Eigenschaftswert von einem anderen Feld übernommen wird: ```json theme={null} // combining default_value_path and property_value_paths { "name": "body_font", "type": "font", "default": { "font": "Helvetica", "color": "#000000" } }, { "name": "secondary_color", "type": "color", "default": { "color": "#C27BA0", "opacity": 100 } }, { "name": "h1_font", "type": "font", "default": {}, "inherited_value": { "default_value_path": "module.body_font", "property_value_paths": { "color": "module.secondary_color.color" } } } ``` Wenn ein Feld von einem anderen Feld erbt, dann aber auf der Seitenebene oder in den Designeinstellungen direkt überschrieben wird, wird seine Verknüpfung mit dem kontrollierenden Feld getrennt. Alle anderen Felder, die über `default_value_path` oder `property_value_paths` zugeordnet sind, haben keinen Einfluss mehr auf den Wert des Feldes. ## Feldsichtbarkeit Wenn Sie benutzerdefinierte Modul- und Designfelder definieren, können Sie konfigurieren, wann ein Feld angezeigt wird, indem Sie das `visibility`-Objekt zu dem Feld in der `fields.json`-Datei hinzufügen. Es ist z. B. möglich, ein Formularmodul festzulegen, um bei Auswahl der Danksagung einen Rich-Text-Bereich, aber bei Auswahl einer Weiterleitung eine Seitenauswahl anzuzeigen. Sie können die Sichtbarkeit anhand des Werts eines `controlling_field_path` oder anhand einer bestimmten Eigenschaft innerhalb dieses Feldes mithilfe des `property`-Parameters festlegen. Die Sichtbarkeit lässt sich auch auf ein einzelnes Feld oder auf eine Gruppe von Feldern anwenden, um die Sichtbarkeit für alle Elemente in der Gruppe zu steuern. ```json theme={null} "visibility" : { "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "property": "src", "operator" : "EQUAL" } ``` | Parameter | Typ | Beschreibung | | ------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `controlling_field_path` | Zeichenfolge | Der Punktpfad des Feldes, der die Anzeigebedingung steuert. | | `controlling_value_regex` | Zeichenfolge | Die reguläre Ausdruck im steuernden Feld, der vorhanden sein muss, damit das Feld angezeigt wird. Der reguläre Ausdruck muss mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß-/Kleinschreibung. | | `operator` | Zeichenfolge | Der Operator, der definiert, wie der `controlling_value_regex`-Wert erfüllt werden muss. Operatoren können unter anderem sein: | | `property` | Zeichenfolge | Legt die Sichtbarkeit basierend auf einer bestimmten Eigenschaft des Zielfeldes fest. Beispielsweise können Sie die Sichtbarkeit aktivieren, wenn die `src`-Eigenschaft eines Bildfeldes einem bestimmten Wert entspricht. Wenn für dieses Feld kein Wert angegeben wird, basiert die Sichtbarkeit standardmäßig auf dem stringified-Wert von `controlling_value_regex`. | Sie können auch ein `occurrence_options`-Objekt in das `visibility`-Objekt einfügen, um die Wertanzahl eines wiederholten Feldes anzuvisieren. Dieses Objekt sollte `count` zum Vergleich und eine `operator`-Definition enthalten. Um z. B. ein Textfeld nur dann anzuzeigen, wenn ein anderes wiederholtes Feld mindestens zwei Elemente enthält, können Sie `visibility` wie folgt definieren: ```json theme={null} [ { "type": "group", "name": "ingredients", "label": "Recipe ingredients", "display": "drilldown", "children": [ { "name": "ingredient", "label": "Ingredient", "occurrence": { "min": 1, "max": null, "default": 1 }, "type": "text", "default": ["1 cup water"] }, { "type": "text", "label": "Conditional field", "name": "conditional_field", "visibility": { "controlling_field_path": "ingredients.ingredient", "occurrence_options": { "count": 2, "operator": "GREATER_THAN_OR_EQUAL" } } } ] } ] ``` Sie können einen der folgenden `operater`-Werte verwenden: * `"NOT_EQUAL"` * `"EQUAL"` * `"EMPTY"` * `"NOT_EMPTY"` * `"GREATER_THAN"` * `"GREATER_THAN_OR_EQUAL"` * `"LESS_THAN"` * `"LESS_THAN_OR_EQUAL"` ### Erweiterte Sichtbarkeit Das `visibility`-Attribut kann nur jeweils ein Kriterium unterstützen. Um mehrere Kriterien mit mehreren Operatoren sowie die Reihenfolge der Vorgänge einzuschließen, können Sie `advanced_visibility` verwenden. ```json theme={null} "visibility_rules" : "ADVANCED", "advanced_visibility" : { "boolean_operator" : "AND", "criteria" : [{ "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "operator" : "MATCHES_REGEX" }, { "controlling_field_path" : "field_name", "controlling_value_regex" : "regular_expression_in_controlling_field", "operator" : "EQUAL" }] } ``` | Parameter | Typ | Beschreibung | | ------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `visibility_rules` | Zeichenfolge | Standardmäßig ist dieser Wert auf `SIMPLE` festgelegt. Um `advanced_visibility` zu verwenden, legen Sie es auf `ADVANCED` fest. | | `boolean_operator` | Zeichenfolge | Der boolesche Operator für die bedingten Kriterien. Kann `AND` oder `OR` sein. | | `criteria` | Array | Ein Array von Sichtbarkeitsobjekten, das die bedingten Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird. | | `controlling_field_path` | Zeichenfolge | Der Punktpfad des Feldes, der die Anzeigebedingung steuert. | | `controlling_value_regex` | Zeichenfolge | Der Wert im steuernden Feld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der `MATCHES_REGEX`-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß- und Kleinschreibung. Ein Feld mit einem `controlling_field_path`, aber ohne `controlling_value_regex` ist sichtbar, wenn das steuernde Feld einen Wert hat, der nicht Null ist und nicht leer ist. | | `operator` | Zeichenfolge | Der Operator, der definiert, wie der `controlling_value_regex`-Wert erfüllt werden muss. Operatoren können unter anderem sein: Regex-Syntax ist erforderlich, wenn `MATCHES_REGEX` verwendet wird. | Als Beispiel sehen Sie unten den ersten Teil des Codes vom [Standardzahlungsmodul](https://developers.hubspot.de/docs/cms/reference/modules/default-modules). Um den vollständigen Code zu überprüfen, können Sie das Modul in HubSpot klonen und dann in Ihre lokale Umgebung herunterladen, um die `fields.json`-Datei des Moduls anzuzeigen. ```json theme={null} [ { "id": "payment", "name": "payment", "display_width": null, "label": "Payment", "required": true, "locked": false, "type": "payment", "default": { "id": null, "properties": {} } }, { "id": "checkout_location", "name": "checkout_location", "display_width": null, "label": "Checkout behavior", "required": false, "locked": false, "visibility": { "controlling_field_path": "payment", "controlling_value_regex": "id\":\\d+", "operator": "MATCHES_REGEX" }, "display": "radio", "choices": [ ["new_tab", "Open in a new tab"], ["overlay", "Sliding overlay"] ], "type": "choice", "default": "new_tab" }, { "id": "button_text", "name": "button_text", "display_width": null, "label": "Button text", "required": true, "locked": false, "validation_regex": "", "visibility": { "controlling_field_path": "payment", "controlling_value_regex": "id\":\\d+", "operator": "MATCHES_REGEX" }, "allow_new_line": false, "show_emoji_picker": false, "type": "text", "default": "Checkout" }, { "id": "icon", "name": "icon", "display_width": null, "label": "Icon", "required": false, "locked": false, "visibility_rules": "ADVANCED", "advanced_visibility": { "boolean_operator": "AND", "criteria": [ { "controlling_field_path": "payment", "controlling_value_regex": "id\":\\d+", "operator": "MATCHES_REGEX" }, { "controlling_field_path": "add_icon", "controlling_value_regex": "true", "operator": "EQUAL" } ], "children": [] }, "children": [ { "id": "icon.icon", "name": "icon", "display_width": null, "label": "Icon", "required": true, "locked": false, "icon_set": "fontawesome-5.0.10", "type": "icon", "default": { "name": "hubspot", "type": "SOLID", "unicode": "f3b2" } }, { "id": "icon.position", "name": "position", "display_width": null, "label": "Position", "required": true, "locked": false, "display": "select", "choices": [ ["left", "Left"], ["right", "Right"] ], "type": "choice", "default": "left" } ], "tab": "CONTENT", "expanded": false, "type": "group" } // rest of fields.json code ] ``` Der obige Code führt zu folgendem Verhalten: Das erste Feld (`payment`) ist ein Pflichtfeld (Dropdown-Menü), mit dem der Content-Autor einen bestimmten Zahlungslink auswählen kann. In HubSpot sieht ein Content-Autor beim ersten Hinzufügen des Moduls zur Seite Folgendes: payment-link-selector * Sobald ein Zahlungslink ausgewählt wurde, werden die drei Felder angezeigt, die folgen (`checkout_location`, `button_text` und `icon`). Dies liegt daran, dass die Felder über ein `visibility`-Attribut verfügen, das vom `payment`-Feld gesteuert wird und einen ID-Wert im `id`-Parameter des Zahlungsfeldes erfordert. Das `icon`-Feld selbst verwendet `advanced_visibility`, um nur dann angezeigt zu werden, wenn ein Zahlungslink im `payment`-Feld vorhanden ist UND wenn das `add_icon`-Kontrollkästchen aktiviert ist. Neben dem Festlegen der Sichtbarkeit innerhalb von `fields.json` können Sie auch die Sichtbarkeit im Design-Manager festlegen, indem Sie die Optionen für die *Anzeigebedingungen* eines Feldes bearbeiten. display-conditions-property Nach dem Festlegen der Sichtbarkeit im Design-Manager können Sie das Modul [mithilfe des CLI](/developer-tooling/local-development/hubspot-cli/reference#fetch) [abrufen](/developer-tooling/local-development/hubspot-cli/install-the-cli), um das `visibility`-Attribut in der `fields.json`-Datei des Moduls anzuzeigen. ## Deaktivierung von bedingten Feldern Sie können einem Feld Bedingungen hinzufügen, um das Bearbeiten zu verhindern, wenn die angegebenen Bedingungen erfüllt sind. Sie können auch eine Meldung festlegen, die über dem Feld angezeigt wird, wenn es deaktiviert wird, um Kontext im Content-Editor bereitzustellen. Screenshot 23.05.2023 um 16.10.28 Uhr Die Bedingungen und die Meldung werden im `disabled_controls`-Objekt des Feldes festgelegt. Die Bedingungen, um ein Feld bearbeitbar zu machen, werden innerhalb des `rules`-Objekts festgelegt, das dem gleichen Format wie [advanced\_visibility](#field-visibility) folgt. Der folgende Code zeigt sowohl eine einfache als auch eine erweiterte Implementierung von `rules`-Kriterien: * Das `simple_page`-Feld enthält Logik zum Deaktivieren des Feldes, wenn das `text_field` auf `testing` festgelegt ist. * Das `fancy_page`-Feld enthält Logik zum Deaktivieren des Feldes, wenn entweder `text_field` oder `text_field_2` auf einen Wert ungleich `testing` bzw. `testing2` festgelegt ist. ```json theme={null} // example fields.json [ { "type": "text", "name": "text_field", "label": "Text field" }, { "type": "text", "name": "text_field_2", "label": "Text field 2" }, { "type": "page", "label": "Simple Page", "name": "simple_page", "disabled_controls": { "message": "This field is disabled", "rules": { "criteria": [ { "controlling_field_path": "text_field", "operator": "EQUAL", "controlling_value_regex": "testing" } ] } } }, { "type": "page", "label": "Fancy Page", "name": "fancy_page", "disabled_controls": { "message": "This field is disabled", "rules": { "boolean_operator": "OR", "criteria": [ { "controlling_field_path": "text_field", "operator": "NOT_EQUAL", "controlling_value_regex": "testing" }, { "controlling_field_path": "text_field_2", "operator": "NOT_EQUAL", "controlling_value_regex": "testing2" } ] } } } ] ``` | Parameter | Typ | Beschreibung | | ------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `message` | Zeichenfolge | Die Meldung, die im Content-Editor angezeigt werden soll, wenn das Feld deaktiviert ist. | | `rules` | Objekt | Die Bedingungen für die Freigabe des Feldes für die Bearbeitung. | | `criteria` | Array | Ein Array von Bedingungsobjekten, das die Kriterien definiert, die erfüllt sein müssen, damit das Feld angezeigt wird. Dieses Array kann mehrere Bedingungsobjekte enthalten, die durch `AND`- oder `OR`-Logik über den `boolean_operator`-Parameter getrennt sind. | | `boolean_operator` | Zeichenfolge | Der boolesche Operator für die bedingten Kriterien. Kann `AND` oder `OR` sein. Wenn nicht angegeben, wird standardmäßig `AND` verwendet. | | `controlling_field_path` | Zeichenfolge | Der Punktpfad des Feldes, der die Anzeigebedingung steuert. | | `controlling_value_regex` | Zeichenfolge | Der Wert im steuernden Feld, der erfüllt werden muss, um das Feld anzuzeigen. Wenn der `MATCHES_REGEX`-Operator verwendet wird, muss der reguläre Ausdruck mit der gesamten Zeichenfolge (nicht mit einer Teilmenge) übereinstimmen und beachtet Groß- und Kleinschreibung. Ein Feld mit einem `controlling_field_path`, aber ohne `controlling_value_regex` ist sichtbar, wenn das steuernde Feld einen Wert hat, der nicht Null ist und nicht leer ist. | | `operator` | Zeichenfolge | Der Operator, der definiert, wie der `controlling_value_regex`-Wert erfüllt werden muss. Operatoren können unter anderem sein: Regex-Syntax ist erforderlich, wenn `MATCHES_REGEX` verwendet wird. | ## Hervorheben von Feldern im Design-Editor Im Design-Editor kann die Vorschau-Hervorhebung Content-Autoren helfen zu verstehen, welche Felder welche Seitenelemente steuern. Bei der Vorschau-Hervorhebung werden die Designfelder den CSS-Selektoren zugeordnet, auf die sie sich auswirken. Dabei wird ein Feld um diese Elemente hinzugefügt, wenn der Mauszeiger über das Feld im Design-Editor bewegt wird. Um die Vorschau-Hervorhebung für Designfelder zu konfigurieren, berücksichtigen Sie eine `editor-preview.json`-Datei im Stammverzeichnis des Designs, um Designfelder zu einer Liste mit CSS-Selektoren zuzuordnen. In der Datei berücksichtigen Sie für jedes Stilfeld, das Sie hervorheben möchten, ein Array mit den entsprechenden CSS-Selektoren im folgenden Format: ```json theme={null} // editor-preview.json { "selectors": { "theme.settings.path.1": [ ], "theme.settings.path.2": [ ], } } ``` Im folgenden Code wird beispielsweise hervorgehoben, welche Seitenelemente vom primären Schriftartfeld gesteuert werden. Sie können das vollständige Beispiel in der `editor-preview.json`-Datei des Standard-Growth-Designs anzeigen. ```json theme={null} // editor-preview.json { "selectors": { "fonts.primary": [ "button, .button, .hs-button", "form input[type='submit'], form .hs-button", ".error-page:before", "p", "blockquote > footer", "form td.is-today .pika-button", "form .is-selected .pika-button", "th, td", ".blog-listing__post-tag", ".blog-listing__post-author-name, .blog-post__author-name", ".pagination__link-icon svg", ".tabs__tab", "a", ".button.button--simple", ".pagination__link .pagination__link-icon svg", ".card--dark", ".card--light", ".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote", ".card--light .accordion__summary:before", "tfoot th, tfoot td", ".header__language-switcher-current-label > span", ".header__language-switcher-child-toggle svg", ".header__language-switcher .lang_list_class a:not(.button)", ".header__menu-link", ".header__menu-item--depth-1 > .header__menu-link:not(.button)", ".header__menu-item--depth-1 .header__menu-child-toggle svg", ".header__menu-toggle svg", ".header__language-switcher .header__language-switcher-current-label > span", ".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab", ".footer .hs-menu-wrapper a", ".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab", ".footer hr", "form label", "#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2", "form legend", "form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea", ".backup-unsubscribe input[type='email']", "form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p", "form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6", "button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button", "button, .button, .hs-button", ".button.button--secondary, .button.button--secondary, .button.button--secondary", ".button.button--secondary", ".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link", ".header__menu-item--depth-1 > .header__menu-link", ".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link", ".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a", ".header__menu-submenu .header__menu-link:not(.button)", ".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a", ".footer .hs-menu-wrapper a", "form .hs-richtext a", ".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)", ".footer .hs-menu-wrapper .active > a" ] } } ``` growth-theme-hover Um mit der Erstellung dieser Datei zu beginnen, führen Sie den folgenden [CLI-Befehl](/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting) aus, um die Datei zu erstellen. Während der Dateierstellung wird ein Skript ausgeführt, um die anfänglichen Feld-Selektor-Zuordnungen einzurichten. ```shell theme={null} hs theme generate-selectors ``` | Parameter | Beschreibung | | ---------------------- | ------------------------------- | | `theme-directory-path` | Der Pfad zum Designverzeichnis. | Nach dem Ausführen des Befehls müssen Sie die `editor-preview.json`-Datei überprüfen und optimieren, um sicherzustellen, dass Felder und Selektoren ordnungsgemäß zugeordnet sind. Während der [generate-selectors](/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting)-Befehl eine rudimentäre Vermutung darüber anstellt, welche Felder sich auf welche Selektoren auswirken, müssen Sie je nachdem, wie Ihr Design aufgebaut ist, Korrekturen vornehmen. Dieser Befehl kann beispielsweise nicht erkennen, wenn Module die Formatierung überschreiben oder wenn Sie Makros verwenden. Um diese Zuordnungen zu testen, laden Sie das Design in einen Account hoch und zeigen Sie dann den Design-Editor in diesem Account an (**Einstellungen** > **Website** > **Designs** > **Design anzeigen**).