구성 요소 정의 component-definition

구성 요소 정의와 범용 편집기 간의 JSON 계약에 대해 자세히 알아봅니다.

개요 overview

component-definition.json 파일은 프로젝트에 대해 콘텐츠 작성자가 사용할 수 있는 구성 요소를 정의합니다. 이 문서는 이 파일의 목적과 범용 편집기가 이 파일을 사용하여 작성자에게 페이지 작성 구성 요소를 제공하는 방법을 자세히 설명합니다.

구성 요소 정의 예 example

다음은 완전하지만 간단한 component-definition.json 예입니다.

{
  "groups":[
    {
      "title":"General Components",
      "id":"general",
      "components":[
        {
          "title":"Text",
          "id":"text",
          "model": "text",
          "filter": "texts",
          "plugins":{
            "aem":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            },
            "aem65":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            }
          }
        }
      ]
    }
  ]
}

groups groups

groups는 새 구성 요소를 페이지에 추가하기 위해 편집기의 속성 패널에서 추가 아이콘을 클릭할 때 작성자에게 범용 편집기에 표시되는 구성 요소 그룹을 정의합니다. 그룹은 구성 요소를 구성하는 데 도움이 됩니다. 일반적인 그룹으로는 일반 구성 요소 와 고급 구성 요소 ​가 있습니다.

components components

components는 그룹에 속하는 구성 요소를 정의합니다.

plugins plugins

plugins는 구성 요소를 유지하는 역할을 하는 플러그인을 정의합니다. 일반적인 플러그인은 다음과 같습니다.

page 또는 cf page-cf

plugin이 정의되면 페이지 관련인지 또는 조각 관련인지 여부를 표시해야 합니다.

page page

구성 요소가 페이지의 콘텐츠인 경우, 다음 정보를 제공할 수 있습니다.

template template

선택적 키/값 쌍을 제공하면 template이 이러한 쌍을 새 구성 요소에 자동으로 기록할 수 있습니다. 또한 다음과 같은 선택 값도 지정할 수 있습니다.

cf cf

구성 요소가 콘텐츠 조각 내 콘텐츠와 관련이 있는 경우 다음 정보를 제공할 수 있습니다.

cf는 암시될 수 있습니다. cf-implied

페이지가 참조 필드를 가리키도록 계측된 경우 cf가 가정됩니다.

<div data-aue-resource="urn:aem:/content" data-aue-type="container" data-aue-prop="field"></div>

이러한 경우 data-aue-prop이 참조 필드를 가리키므로 cf가 가정됩니다. data-aue-prop이 없으면 구성 요소가 참조 필드를 통해 연결되지 않으므로 범용 편집기는 page로 가정합니다.

<div data-aue-resource="urn:aem:/content" data-aue-type="container"></div>

구성 요소는 리소스 아래의 하위 노드입니다.