설명서

다중 필드 컨테이너는 범용 편집기에서 빈 HTML 또는 중복 블록을 생성합니다.

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

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"이(가) 있는 필터는 컨테이너가 multifield-container-item만 수락하도록 제한합니다.

  5. 다중 필드 기반 중첩 컨테이너를 항목 블록을 허용하는 하위 블록 슬롯으로 대체하여 상위 구성 요소를 업데이트합니다.

  6. 프로젝트 설정에 필요한 경우 컨테이너 및 항목 블록 모두에 블록 스크립트를 추가합니다.

  7. 표준 파이프라인을 통해 업데이트된 모델 및 구성 요소를 빌드하고 배포합니다.

  8. 컨테이너 블록 내의 필요한 각 항목에 대해 하나의 항목 블록을 추가하여 유니버설 편집기에서 콘텐츠를 다시 작성합니다.

  9. 출력의 유효성을 검사하여 각 블록이 한 번 렌더링되고 중복되지 않은 깔끔한 HTML이 생성되는지 확인합니다.

모델 동작 - 항목 블록 모델(multifield-container-item)

  • 작성된 각 항목은 다음을 사용하여 하나의 블록 인스턴스를 생성합니다.

    • itemText (text)
    • itemImage (reference) - 일반적으로 참조된 DAM 자산이 이미지인 경우 이미지로 확인됩니다.
    • itemImageAlt (text) - 이미지 대체 텍스트에 사용됨

참고:

  • 유니버설 편집기에서 다중 값 컨테이너 필드 패턴(component: "container", multi: true)을 조기 액세스로 처리하면 Edge Delivery 환경에서 렌더링이 불안정해지고 블록 중복이 발생합니다.
  • multi: true을(를) multi: false(으)로 설정하면 중복이 방지되지만 단일 컨테이너 항목으로 작성이 제한됩니다.
  • 컨테이너 블록을 항목 블록과 함께 사용하면 지원되는 유니버설 편집기 모델에 맞게 정렬되고 일관되고 안정적인 HTML 렌더링이 보장됩니다.

관련 읽기

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