AEM Sites에 대한 구성 요소 매핑

이 문서에서는 AEM 사이트에 대한 구성 요소 매핑의 다양한 측면에 대해 설명합니다(복합 구성 요소 매핑 사용).

구성 요소 매핑 규칙

JSON 규칙 배열(componentmapping.json)을 사용하여 HTML을 구성 요소로 변환합니다. 가능한 단순하고 명료하며 구체적인 규칙을 유지합니다.

HTML 요소 및 해당 클래스 타깃팅

위의 요소를 정의할 때 다음을 확인하십시오.

attributeMap을 사용하여 JCR 노드의 속성 저장

출력 노드의 속성을 설정하려면 attributeMap에 항목을 추가하십시오. 각 항목은 attrs[to] = value을(를) 생성합니다.
일반적인 패턴:

// copy an attribute
{ "attribute": "src", "to": "image-src" }
// read content or tag name
{ "from": "textContent", "to": "jcr:title" }
{ "from": "outerHTML",  "to": "text" }
{ "from": "innerHTML",  "to": "text" }
{ "from": "name",       "to": "type" }  // the tag name, e.g., "h2"
// constant value
{ "value": true, "to": "textIsRich" }

다음은 이미지 요소에 대한 HTML to JSON의 예입니다.

<img src="/content/dam/aemg-docs/tragopan.svg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="">

{
    "name": "img",
    "resourceType": "core/wcm/components/image/v2/image",
    "attributeMap": [
      {
        "from": "src",
        "to": "fileReference"
      },
      {
        "value": ["fileReference"],
        "to": "path-attributes"
      }
    ]
  }

전용 항목을 통해 경로 정규화

값을 정규화(절대 값으로 지정)하려면 다음을 사용하여 정규화해야 하는 속성 키를 선언합니다.

{
  "value": ["text"],
  "to": "path-attributes"
}

다음과 같은 중요한 사항을 고려해야 합니다.

구성 요소로 분할하기 전에 HTML 값 추출

from을(를) 사용하여 문서를 별도의 구성 요소로 분할하기 전에 요소에서 값을 읽는 방법을 지정하십시오.

예:

{ "from": "textContent", "to": "jcr:title" }
{ "from": "outerHTML",  "to": "text" }
{ "from": "innerHTML",  "to": "snippet" }
{ "from": "src",        "to": "image#src" }

componentmapping.json의 최소 전체 예

[
  {
    "name": "h1, h2",
    "class": "topic-title",
    "resourceType": "core/wcm/components/title/v2/title",
    "attributeMap": [
      { "from": "textContent", "to": "text" },
      { "from": "name",        "to": "type" }
    ]
  },
  {
    "name": "img",
    "class": "hero",
    "resourceType": "weretail/components/content/heroimage",
    "attributeMap": [
      { "from": "src", "to": "image#src" },
      { "value": ["image#src"], "to": "path-attributes" }
    ]
  },
  {
    "name": "#element",
    "resourceType": "core/wcm/components/text/v2/text",
    "attributeMap": [
      { "from": "outerHTML", "to": "text" },
      { "value": true,        "to": "textIsRich" }
    ]
  }
]

대상으로 지정할 요소 및 클래스를 정의하고 attributeMap을(를) 사용하여 노드 속성을 설정하고 path-attributes 항목을 추가하여 경로를 정규화하고 추출할 값에 대해 올바른 from을(를) 선택하십시오. 위에 사용된 heroimage은(는) we-retail 사이트의 구성 요소입니다.

참고: 기본 서식 있는 텍스트에 대해 논의하고 이 텍스트가 사용되는 요소를 식별하는 것이 중요합니다.

사용자 지정 구성 요소 빌드

셀 내에 이미지를 표시하는 사용자 지정 테이블 구성 요소를 만드는 방법을 알아봅니다. 이 접근 방식을 사용하면 동적 콘텐츠에 대해 깔끔하고 재사용 가능한 디자인을 확보할 수 있습니다. 구축 내용, 효과적인 이유, 주요 사전 요구 사항, 높은 수준의 설계 등을 다룹니다.

빌드할 항목

HTML 테이블 콘텐츠를 수락하고 그 안의 모든 <img>을(를) AEM 핵심 이미지 구성 요소의 출력으로 바꾸는 사용자 지정 테이블 구성 요소입니다. 이렇게 하면 테이블 마크업을 완벽하게 제어하면서 코어 이미지의 기능(반응형 이미지, 대체 처리, 접근성)을 재사용할 수 있습니다.
이 접근 방식을 사용하면 AEM 사이트(복합 구성 요소 매핑 사용) 웹 사이트에 대한 다른 사용자 지정 구성 요소를 빌드할 수 있습니다.

이 접근 방식의 이유

사전 요구 사항

높은 수준의 디자인

테이블이 한 번 출력되며 이미 핵심 이미지 마크업이 들어 있습니다. 클라이언트측 DOM 조작이 필요하지 않습니다.

폴더 구조 및 키 파일(이 저장소)

구현 단계

테이블 구성 요소(구성 요소 노드) 정의

apps/guides-components/components/table 아래에 구성 요소를 만듭니다. 아직 없는 경우 아래와 같이 최소 .content.xml을(를) 추가하여 사이드 패널에 등록합니다.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Component"
          jcr:title="Table"
          componentGroup="Guides - Custom"/>

작성자가 페이지에 추가할 수 있는 구성 요소임을 AEM에 표시합니다.

HTL로 렌더링 및 스타일 포함

Sling 모델을 사용하여 처리된 HTML을 출력합니다. CSS/JS에 대한 clientlib 범주를 포함합니다.

<sly data-sly-use.model="com.adobe.guides.aem.components.core.models.TableModel"
     data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
</sly>
<sly data-sly-call="${clientLib.css @ categories='guides-components.table'}"></sly>
<sly data-sly-test="${wcmmode.edit && !model.hasContent}">
  <div class="cq-placeholder" data-emptytext="${component.title}"></div>
</sly>
<div data-sly-test="${model.hasContent}"
     class="gu-table-wrapper ${model.enableResponsive ? 'gu-table--responsive' : ''} gu-table--style-${model.tableStyle}"
     id="${model.componentId}">
  ${model.processedTableHtml @ context='unsafe'}
</div>

모델은 이미 렌더링된 핵심 이미지가 있는 전체 HTML을 반환하므로 HTL은 단지 인쇄만 합니다.

HTML을 처리하고 핵심 이미지를 렌더링할 슬링 모델을 추가

이 모델은 대화 상자 필드를 읽고, HTML 테이블을 구문 분석하고, 각 <img>을(를) 찾아 서비스를 통해 핵심 이미지 HTML으로 대체합니다.

다음은 TableModel에 대한 몇 가지 중요한 방법입니다.

@Model(adaptables = {Resource.class, SlingHttpServletRequest.class},
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class TableModel {
  @ValueMapValue private String tableHtml;
  @ValueMapValue private boolean enableResponsive;
  @ValueMapValue private String tableStyle;
  @OSGiService private ImageComponentRenderer imageRenderer;
  // ...
  @PostConstruct
  protected void init() {
    // parse HTML, for each <img> build image props (fileReference, alt, title)
    // call imageRenderer.renderImageComponent(...)
    // replace <img> with returned Core Image HTML
  }
  public String getProcessedTableHtml() { /* return final HTML */ }
}

이렇게 하면 서버에서 논리를 중앙 집중화하고 핵심 이미지 동작을 다시 사용합니다.

서비스를 통해 코어 이미지 렌더링(서버측 포함)

ImageComponentRenderer에서 핵심 이미지 구성 요소를 렌더링하고 출력을 캡처합니다. It

@Component(service = ImageComponentRenderer.class)
public class ImageComponentRenderer {
  private static final String IMAGE_RESOURCE_TYPE = "core/wcm/components/image/v2/image";
  public String renderImageComponent(Resource base, Map<String,Object> props,
                                     SlingHttpServletRequest req, SlingHttpServletResponse resp) {
    // create wrapped resource with IMAGE_RESOURCE_TYPE and props
    // dispatcher.include(...) with a response wrapper to capture HTML
    // return captured HTML
  }
}

이렇게 하면 하위 구성 요소뿐만 아니라 필요한 경우 언제든지 핵심 이미지를​에 넣을 수 있습니다.

클라이언트 라이브러리

소규모 스타일 또는 향후 JS에 대한 clientlib을 만듭니다. 위의 HTL은 guides-components.table 범주를 로드합니다.

clientlibs/css.txt
  #base=css
  table.css
clientlibs/js.txt
  #base=js
  table.js

이렇게 하면 스타일/스크립트를 모듈화하고 검색할 수 있습니다.

대화 상자 필드(작성자 입력)

다음 속성 이상이 포함된 대화 상자를 추가합니다.

이러한 매핑 1:1은(는) Sling 모델의 속성 및 제어 렌더링에 매핑됩니다.

템플릿에서 구성 요소 허용

템플릿 편집기에서 레이아웃 컨테이너 정책 > 허용된 구성 요소 > 안내서 - 사용자 지정​에서 테이블 구성 요소를 편집합니다.

정책이 허용할 때까지 작성자가 구성 요소를 추가할 수 없습니다.

작성 팁

제한

빠른 참조(구현)

이 패턴은 핵심 논리를 재사용하는 동안 마크업을 유지하면서 핵심 구성 요소 서버측을 사용하여 사용자 지정 구성 요소를 구성하는 방법을 보여 줍니다.