文档Experience Cloud KCS

多字段容器在通用编辑器中生成空的HTML或重复块

最近更新： 2026年6月22日

Edge Delivery的通用编辑器中的多字段容器(xwalk/xcom)在配置了多值容器字段时，会呈现空的HTML元素或重复的块标记。 要解决此问题，请迁移到容器和物料块模式。

描述 description

环境

  • 产品： Adobe Experience Manager as a Cloud Service (AEMaaCS) — 站点
  • 方案：使用通用编辑器的Edge Delivery (xwalk/xcom)

问题/症状

  • 容器创作的项目无法生成预期的HTML输出，从而导致<div>元素为空。
  • 将多个字段添加到多字段组件会为单个容器实例呈现重复的HTML块。
  • 刷新编辑器视图会暂时删除重复的块，但在后续编辑后会重新显示重复。

解决方法 resolution

请按照以下步骤解决问题：

  1. 从现有组件模型中删除多值容器字段以停止生成重复或空标记。

  2. 在父容器块模型中保留简单字段（如顶部和底部文本）以维护布局级别的内容。

  3. 创建专用的项目块模型并为每个项目定义单独的字段，如文本或图像字段。 物料块和容器模型结构示例：

    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. 在通用编辑器中配置过滤器以允许父容器块下的项块。 在此示例中，过滤器可确保容器仅接受项目块：

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

    容器定义必须引用此筛选器： "filter": "multifield-container-component"，并且带id: "multifield-container-component"的筛选器将容器限制为仅接受多字段 — container-item。

  5. 将基于多字段的嵌套容器替换为接受项目块的子块插槽，以更新父组件。

  6. 如果项目安装程序需要为容器块和项块添加块脚本，请为它们添加块脚本。

  7. 通过标准管道构建和部署更新的模型和组件。

  8. 在通用编辑器中重新创作内容，方法是在容器块内为每个所需条目添加一个项目块。

  9. 验证输出以确认每个块呈现一次，并生成干净的非重复HTML。

模型行为 — 项目块模型（多字段 — 容器 — 项目）

  • 每个创作条目会创建一个块实例，其中：

    • itemText (text)
    • itemImage (reference) — 当引用的DAM资产是图像时，通常解析为图像
    • itemImageAlt (text) — 用于图像替换文本

注意：

  • 通用编辑器将多值容器字段模式(component: "container"、multi: true)视为早期访问，这导致Edge Delivery环境中的呈现不稳定并出现块重复。
  • 将multi: true设置为multi: false可防止重复，但将创作限制为单个容器条目。
  • 将容器块与项目块一起使用会与支持的通用编辑器模型保持一致，并确保一致、稳定的HTML渲染。

相关阅读

recommendation-more-help
experience-cloud-kcs-help-kbarticles