Dokumentation

Ein Mehrfeld-Container generiert leere HTML- oder Duplikatblöcke im universellen Editor

Last update: Wed Jun 03 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Ein Mehrfeld-Container im universellen Editor für Edge Delivery (xwalk/xcom) rendert leere HTML-Elemente oder dupliziert Blockmarkup, wenn er mit einem mehrwertigen Container-Feld konfiguriert ist. Um das Problem zu beheben, migrieren Sie in ein Container- und Elementblockmuster.

Beschreibung description

Umgebung

  • Product: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Sites
  • Szenario: Edge Delivery (xwalk/xcom) mit universellem Editor

Problem/Symptome

  • Von Containern erstellte Elemente können nicht die erwartete HTML-Ausgabe generieren, was zu leeren <div> führt.
  • Durch Hinzufügen mehrerer Felder zur Mehrfachfeld-Komponente wird der HTML-Block für eine einzelne Container-Instanz doppelt dargestellt.
  • Beim Aktualisieren der Editor-Ansicht werden doppelte Blöcke vorübergehend entfernt, aber Duplikate werden nach nachfolgenden Bearbeitungen erneut angezeigt.

Lösung resolution

Gehen Sie wie folgt vor, um das Problem zu beheben:

  1. Entfernen Sie das mehrwertige Container-Feld aus dem vorhandenen Komponentenmodell, um die Erstellung doppelter oder leerer Markups zu stoppen.

  2. Einfache Felder wie oberer und unterer Text werden im übergeordneten Container-Blockmodell beibehalten, um Inhalte auf Layout-Ebene beizubehalten.

  3. Erstellen Sie ein dediziertes Elementblockmodell und definieren Sie einzelne Felder für jedes Element, z. B. Text- oder Bildfelder. Beispiel für Elementblock- und Container-Modellstruktur:

    code language-none 
    {
      "definitions": [
        {
          "title": "Multifield Container",
          "id": "multifield-container-component",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "multifield-container-component",
                  "model": "multifield-container-component",
                  "filter": "multifield-container-component"
                }
              }
            }
          }
        },
        {
          "title": "Multifield Container Item",
          "id": "multifield-container-item",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "multifield-container-item",
                  "model": "multifield-container-item"
                }
              }
            }
          }
        }
      ] ,
      "models": [
        {
          "id": "multifield-container-component",
          "fields": [
            {
              "component": "text",
              "name": "topText",
              "label": "Top of container",
              "valueType": "string"
            },
            {
              "component": "text",
              "name": "bottomText",
              "label": "Bottom of container",
              "valueType": "string"
            }
          ]
        },
        {
          "id": "multifield-container-item",
          "fields": [
            {
              "component": "text",
              "name": "itemText",
              "label": "Item text",
              "valueType": "string"
            },
            {
              "component": "reference",
              "name": "itemImage",
              "label": "Item image",
              "valueType": "string",
              "multi": false
            },
            {
              "component": "text",
              "name": "itemImageAlt",
              "label": "Item image alt text",
              "valueType": "string"
            }
          ]
        }
      ] ,
      "filters": [
        {
          "id": "multifield-container-component",
          "components": [ "multifield-container-item"]
        }
      ]
    }

  4. Konfigurieren Sie Filter im universellen Editor, um Elementblöcke unter dem übergeordneten Container-Block zuzulassen. In diesem Beispiel stellt der Filter sicher, dass der Container nur Elementblöcke akzeptiert:

    code language-none 
    {      "id": "multifield-container-component",
  "components": [ "multifield-container-item"]
}

    Die Container-Definition muss auf diesen Filter verweisen: "filter": "multifield-container-component", und der Filter mit id: "multifield-container-component" beschränkt den Container darauf, nur multifield-container-item zu akzeptieren.

  5. Aktualisieren Sie übergeordnete Komponenten, indem Sie mehrfeld-basierte verschachtelte Container durch untergeordnete Block-Slots ersetzen, die Elementblöcke akzeptieren.

  6. Fügen Sie Blockskripte sowohl für Container- als auch für Elementblöcke hinzu, wenn sie für die Projekteinrichtung erforderlich sind.

  7. Erstellen Sie die aktualisierten Modelle und Komponenten und stellen Sie sie über die Standard-Pipeline bereit.

  8. Erstellen Sie Inhalte im universellen Editor neu, indem Sie einen Elementblock für jeden erforderlichen Eintrag innerhalb des Container-Blocks hinzufügen.

  9. Validieren Sie die Ausgabe, um zu bestätigen, dass jeder Block einmal gerendert wird und saubere, nicht duplizierte HTML generiert.

Modellverhalten - Elementblockmodell (multifield-container-item)

  • Jeder erstellte Eintrag erstellt eine Blockinstanz mit:

    • itemText (text)
    • itemImage (reference) - wird normalerweise in ein Bild aufgelöst, wenn das referenzierte DAM-Asset ein Bild ist
    • itemImageAlt (text) - wird für Bild-Alt-Text verwendet

Hinweise:

  • Der universelle Editor behandelt das Container-Feldmuster mit mehreren Werten (component: "container", multi: true) als frühzeitigen Zugriff, was zu instabilen Rendering- und Blockduplizierungen in Edge Delivery-Umgebungen führt.
  • Das Festlegen von multi: true auf multi: false verhindert Duplizierungen, beschränkt das Authoring jedoch auf einen einzelnen Container-Eintrag.
  • Die Verwendung eines Container-Blocks mit Elementblöcken wird an unterstützten universellen Editor-Modellen ausgerichtet und stellt ein konsistentes, stabiles HTML-Rendering sicher.

Verwandtes Lesen

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f