장식 태그 decoration-tag

웹 페이지의 구성 요소를 렌더링할 때 HTML 요소를 생성하여 자체에 렌더링된 구성 요소를 둘러쌀 수 있습니다. 이 기능은 주로 다음 두 가지 용도로 사용됩니다.

개발자를 위해 AEM에서는 포함된 구성 요소를 감싸는 데코레이션 태그를 제어하는 분명하고 단순한 로직을 제공합니다. 데코레이션 태그가 렌더링되는지 여부와 방법은 두 가지 요소의 조합으로 정의되며, 이 페이지는 다음과 같이 분류합니다.

권장 사항 recommendations

다음은 예기치 않은 문제가 발생하지 않도록 하는 데 도움이 되는 래퍼 요소를 포함할 시기에 대한 일반적인 권장 사항입니다.

구성 요소 컨트롤 component-controls

다음 속성 및 노드를 구성 요소에 적용하여 장식 태그의 동작을 제어할 수 있습니다.

스크립트 컨트롤 script-controls

그러나 래퍼 동작은 HTL 또는 JSP 요소를 포함하는 데 사용됩니다.

HTL htl

일반적으로 HTL의 래퍼 동작은 다음과 같이 요약할 수 있습니다.

래퍼의 동작은 완전히 제어할 수도 있습니다.

HTL 스크립트에서 래퍼 태그의 동작 및 관련 로직을 완전히 제어할 수 있습니다.

HTL에서의 개발에 대한 자세한 내용은 HTL 설명서.

의사 결정 트리 decision-tree

이 의사 결정 트리에는 래퍼 태그의 동작을 결정하는 로직이 요약됩니다.

사용 사례 use-cases

다음 세 가지 사용 사례에서는 래퍼 태그가 처리되는 방식에 대한 예와 래퍼 태그의 원하는 동작을 제어하는 것이 간단한 방법을 보여줍니다.

다음의 모든 예제는 다음의 컨텐츠 구조 및 구성 요소를 가정합니다.

/content/test/
  @resourceType = "test/components/one"
  child/
    @resourceType = "test/components/two"

/apps/test/components/
  one/
    one.html
  two/
    two.html
    cq:htmlTag/
      @cq:tagName = "article"
      @class = "component-two"

사용 사례 1: 코드 재사용을 위한 구성 요소 포함 use-case-include-a-component-for-code-reuse

가장 일반적인 사용 사례는 코드 재사용을 위해 구성 요소에 다른 구성 요소가 포함된 경우입니다. 이 경우 포함된 구성 요소는 자체 도구 모음 및 대화 상자에서 편집할 수 없으므로 래퍼가 필요하지 않고 구성 요소의 cq:htmlTag 이 무시됩니다. 기본 동작으로 간주할 수 있습니다.

one.html: <sly data-sly-resource="child"></sly>

two.html: Hello World!

결과 출력 /content/test.html:

Hello World!

예로는 이미지를 표시하는 코어 이미지 구성 요소를 포함하는 구성 요소가 있습니다. 이 경우 일반적으로 합성 리소스를 사용하여 가상 하위 구성 요소를 포함하는 구성 요소는 구성 요소가 가질 모든 속성을 나타내는 Map 개체에 data-sly-resource로 전달하여 구성합니다.

사용 사례 2: 편집 가능한 구성 요소 포함 use-case-include-an-editable-component

또 다른 일반적인 사용 사례는 컨테이너 구성 요소에 레이아웃 컨테이너와 같은 편집 가능한 하위 구성 요소가 포함되는 경우입니다. 이 경우, 포함된 각 자식은 명시적으로 를 사용하여 비활성화하지 않는 한 편집기가 작동하려면 래퍼가 필요하지 않습니다 cq:noDecoration Analytics JavaScript용 URL 섹션을 참조하십시오.

포함된 구성 요소는 이 경우 독립 구성 요소이므로 편집기가 작동하고 적용할 레이아웃 및 스타일을 정의해야 합니다. 이 동작을 트리거하기 위해 다음과 같은 항목이 있습니다 decoration=true 선택 사항입니다.

one.html: <sly data-sly-resource="${'child' @ decoration=true}"></sly>

two.html: Hello World!

결과 출력 /content/test.html:

<article class="component-two">Hello World!</article>

사용 사례 3: 사용자 지정 동작 use-case-custom-behavior

HTL을 통해 명시적으로 제공할 수 있으므로 다양한 복잡한 사례가 있을 수 있습니다.

one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>

two.html: Hello World!

결과 출력 /content/test.html:

<aside class="child">Hello World!</aside>

JSP jsp

구성 요소를 포함할 때 cq:include 또는 sling:include: AEM의 기본 동작은 DIV를 사용하여 요소를 래핑하는 것입니다. 그러나 이 포장은 다음 두 가지 방법으로 사용자 지정할 수 있습니다.

의사 결정 트리 decision-tree-1

다음 의사 결정 트리는 cq:noDecoration, cq:htmlTag, cq:tagName, 및 decorationTagName 래퍼 동작에 영향을 줍니다.