경험 조각 구성 요소 (v1) experience-fragment-component

콘텐츠 작성자는 핵심 구성 요소의 경험 조각 구성 요소를 통해 페이지에 경험 조각을 배치하면서 현지화된 사이트 구조를 지원할 수 있습니다.

사용량 usage

콘텐츠 작성자는 핵심 구성 요소의 경험 조각 구성 요소를 통해 기존 경험 조각 변형을 선택하여 콘텐츠 페이지에 배치할 수 있습니다. 경험 조각 구성 요소도 현지화된 사이트 구조를 지원합니다.

버전 및 호환성 version-and-compatibility

경험 조각 구성 요소는 2019년 9월 핵심 구성 요소 릴리스 2.6.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

현지화된 사이트 구조 지원 localized-site-structure

경험 조각 구성 요소는 현지화된 사이트 구조에 적응하고 페이지의 현지화에 따라 해당 경험 조각을 렌더링합니다. 이 작업을 수행하려면 경험 조각은 다음 조건을 충족해야 합니다.

이 경우 현지화 기능(언어, 블루프린트 또는 라이브 카피)이 현재 페이지와 같은 조각은 템플릿의 일부로 렌더링됩니다.

이 비헤이비어는 템플릿에 추가된 경험 조각 구성 요소로 제한됩니다. 개별 콘텐츠 페이지에 추가된 경험 조각 구성 요소를 사용하여 정확한 경험 조각 렌디션을 렌더링하고 구성 요소 내부에 구성합니다.

예 example

콘텐츠의 형태가 다음과 같습니다.

/content
+-- experience-fragments
   \-- wknd
      +-- language-masters
      +-- us
         +-- en
            +-- footerTextXf
            \-- headerTextXf
         \-- es
            +-- footerTextXf
            \-- headerTextXf
      \-- ch
         +-- de
            +-- footerTextXf
            \-- headerTextXf
         +-- fr
            +-- footerTextXf
            \-- headerTextXf
         \-- it
            +-- footerTextXf
            \-- headerTextXf
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   +-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

/content/experience-fragments/wknd 아래의 구조는 /content/wknd의 구조를 미러링합니다.

이 경우 경험 조각 구성 요소 /content/experience-fragments/wknd/us/en/footerTextXf를 템플릿에 배치하면 해당 템플릿을 기반으로 제작된 현지화된 페이지는 현지화된 콘텐츠 페이지에 해당되는 현지화된 경험 조각을 자동으로 렌더링합니다.

동일한 템플릿을 사용하는 /content/wknd/ch/de 아래 콘텐츠 페이지로 이동하면 /content/experience-fragments/wknd/us/en/footerTextXf 대신 /content/experience-fragments/wknd/ch/de/footerTextXf가 렌더링됩니다.

대체 fallback

경험 조각 구성 요소는 해당 현지화된 구성 요소 검색을 다음 순서로 시도합니다.

샘플 구성 요소 출력 sample-component-output

경험 조각 구성 요소를 경험하고 구성 옵션의 샘플뿐만 아니라 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 참조하십시오.

기술 세부 사항 technical-details

경험 조각 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.

구성 대화 상자 configure-dialog

콘텐츠 작성자는 구성 대화 상자를 통해 페이지에 렌더링할 경험 조각 변형을 선택할 수 있습니다.

선택 열기 대화 상자 버튼을 통해 구성 요소 선택기를 열고 콘텐츠 페이지에 추가할 경험 조각 구성 요소를 선택합니다.

경험 조각 구성 요소가 템플릿에 추가되어 경험 조각이 현지화되면 경험 조각 구성 요소는 자동으로 현지화됩니다. 이 경우 페이지에 렌더링된 내용은 명시된 구성 요소와 다를 수 있습니다. 자세한 내용은 위의 예를 참조하십시오.

ID ​를 정의할 수도 있습니다. 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.

디자인 대화 상자 design-dialog

템플릿 작성자는 디자인 대화 상자를 통해 경험 조각 구성 요소를 사용하는 콘텐츠 작성자에게 제공되는 옵션과 경험 조각 구성 요소 배치 시 설정된 기본값을 정의할 수 있습니다.

스타일 탭 styles-tab

경험 조각 구성 요소는 AEM 스타일 시스템을 지원합니다.