탐색 구성 요소

탐색 구성 요소를 사용하면 글로벌라이제이션 사이트 구조를 쉽게 탐색할 수 있습니다.

사용량

탐색 구성 요소에는 사이트 사용자가 사이트 구조를 쉽게 탐색할 수 있도록 페이지 트리가 나열됩니다.

탐색 구성 요소는 사이트의 글로벌라이제이션 사이트 구조를 자동으로 감지하고 현지화된 페이지에 자동으로 맞출 수 있습니다. 또한 그림자 리디렉션 페이지를 사용하여 기본 컨텐츠 구조가 아닌 다른 구조를 표시하여 임의의 사이트 구조를 지원할 수 있습니다.

편집 대화 상자에서는 내용 작성자가 탐색 심도와 함께 탐색 루트 페이지를 정의할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 사용하여 탐색 루트 및 깊이의 기본값을 정의할 수 있습니다.

현지화된 사이트 구조 지원

웹 사이트는 서로 다른 지역에 대해 여러 언어로 제공되는 경우가 많습니다. 일반적으로 현지화된 각 페이지에는 페이지 템플릿의 일부로 포함된 탐색 요소가 포함됩니다. 탐색 구성 요소를 사용하면 사이트의 모든 페이지에 대한 템플릿에 한 번 배치할 수 있으며, 그러면 글로벌라이제이션 사이트 구조에 따라 로컬라이즈된 개별 페이지에 자동으로 적용됩니다.

• 탐색 구성 요소의 현지화 기능이 작동하는 방법의 예는 아래 섹션을 참조하십시오.
• 핵심 구성 요소의 현지화 기능이 함께 작동하는 방법에 대한 예는 핵심 구성 요소 페이지의 현지화 기능을 참조하십시오.

예

귀하의 컨텐츠가 다음과 같은 모습이라고 가정하겠습니다.

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

사이트 WKND의 경우 탐색 구성 요소를 페이지 템플릿의 일부로 배치하려고 할 수 있습니다. 템플릿의 일부분이 되면 해당 사이트에 대한 마스터 컨텐츠가 시작되는 지점이므로 구성 요소의 내비게이션 루트​를 /content/wknd/language-masters/en로 설정할 수 있습니다. 구성 요소에 의해 전체 컨텐츠 트리를 표시하지 않고 처음 두 개 수준을 개괄적으로 표시하도록 하려는 경우에는 내비게이션 구조 깊이​를 2로 설정할 수도 있습니다.

내비게이션 루트 값을 사용하면 탐색 구성 요소는 /content/wknd/language-masters/en 이후에 탐색이 시작되고 내비게이션 구조 깊이 값으로 정의된 대로 사이트의 구조가 2단계 아래로 반복되어 탐색 옵션을 생성할 수 있음을 알게 됩니다.

사용자가 보고 있는 현지화된 페이지에 관계없이 탐색 구성 요소는 현재 페이지의 위치를 알고 루트로 거꾸로 작업한 다음 해당 페이지로 이동하여 해당 현지화된 페이지를 찾을 수 있습니다.

따라서 방문자가 /content/ch/de/experience/arctic-surfing-in-lofoten을(를) 보고 있는 경우 구성 요소는 /content/wknd/language-masters/de을(를) 기반으로 탐색 구조를 생성하는지 파악합니다. 마찬가지로 방문자가 /content/us/en/experience/arctic-surfing-in-lofoten을 보고 있는 경우에도 구성 요소는 /content/wknd/language-masters/en을 기반으로 탐색 구조를 생성하는지 알고 있습니다.

그림자 사이트 구조 지원

실제 사이트 구조와 다른 방문자에 대한 탐색 메뉴를 만들어야 할 때가 있습니다. 판촉 행사에서는 컨텐츠 목록을 다시 정렬하여 메뉴의 특정 컨텐츠를 강조 표시해야 할 수도 있습니다. 다른 컨텐츠 페이지로 간단히 리디렉션하는 그림자 페이지를 사용하는 경우 탐색 구성 요소는 필요한 임의 탐색 구조를 생성할 수 있습니다.

이렇게 하려면 다음을 수행해야 합니다.

1. 원하는 사이트 구조를 나타내는 빈 페이지로 어두운 페이지를 만듭니다. 이를 그림자 사이트 구조라고 합니다.
2. 이러한 페이지의 페이지 속성에 있는 리디렉션 값을 실제 컨텐트 페이지를 가리키도록 설정합니다.
3. 그림자 페이지의 페이지 속성에서 내비게이션에서 숨기기 옵션을 설정합니다.
4. 탐색 구성 요소의 탐색 루트 값을 새 그림자 사이트 구조의 루트를 가리키도록 설정합니다.

그러면 내비게이션 구성 요소가 그림자 사이트 구조에 따라 메뉴를 렌더링합니다. 구성 요소로 렌더링되는 링크는 그림자 페이지 자체가 아니라 그림자 페이지로 리디렉션되는 실제 컨텐트 페이지에 대한 링크입니다. 또한 구성 요소는 실제 페이지의 이름을 표시하며, 내비게이션이 어두운 페이지를 기반으로 하는 경우에도 활성 페이지를 올바르게 강조 표시합니다. 탐색 구성 요소를 사용하면 그림자 페이지를 방문자에게 완전히 투명하게 만들 수 있습니다.

버전 및 호환성

탐색 구성 요소의 현재 버전은 v1이며, 2018년 1월에 핵심 구성 요소 릴리스 2.0.0에 도입되었으며 이 문서에 설명되어 있습니다.

다음 표에서는 구성 요소의 지원되는 모든 버전, 구성 요소 버전이 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 설명합니다.

구성 요소 버전	AEM 6.4	AEM 6.5	AEM as a Cloud Service
v1	호환 가능	호환 가능	호환 가능

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전 문서를 참조하십시오.

샘플 구성 요소 출력

탐색 구성 요소를 경험할 수 있을 뿐만 아니라 구성 옵션의 예 및 HTML 및 JSON 출력을 보려면 구성 요소 라이브러리를 방문하십시오.

기술 세부 정보

탐색 구성 요소 에 대한 최신 기술 문서는 GitHub에서 찾을 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서에서 확인할 수 있습니다.

편집 대화 상자

컨텐츠 작성자는 편집 대화 상자에서 탐색 루트 페이지와 탐색 구조의 심도를 정의할 수 있습니다.

속성 탭

• 탐색 루트 - 탐색 트리를 생성하는 데 사용할 루트 페이지입니다.
• 루트 레벨 제외 - 탐색에 루트가 포함되지 않아야 하는 경우가 많습니다. 이 옵션을 사용하면 루트에서 제외할 수준 수를 지정할 수 있습니다. 예:
  • 0 = 루트 수준 표시
  • 1 = 루트 레벨 제외
  • 2 = 루트 제외 및 1개 이상의 상위 레벨
  • 등이 됩니다.
• 모든 하위 페이지 수집 - 탐색 루트의 하위 항목인 모든 페이지를 수집합니다.
• 탐색 구조 깊이 - 구성 요소가 탐색 루트를 기준으로 내비게이션 트리 아래에 표시되는 수준 수를 정의합니다(모든 하위 페이지 수집을 선택하지 않은 경우에만 사용 가능).
• 그림자 비활성화 - 계층 구조의 페이지가 리디렉션인 경우 대상 대신 리디렉션 페이지의 이름이 표시됩니다. 자세한 내용은 그림자 사이트 구조 지원을 참조하십시오.
• ID - 이 옵션을 사용하면 HTML 및 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
  • 비워 두면 자동으로 고유 ID가 생성되며 결과 페이지를 검사하여 찾을 수 있습니다.
  • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
  • ID를 변경하면 CSS, JS 및 데이터 레이어 추적에 영향을 줄 수 있습니다.

액세스 가능성 탭

액세스 가능성 탭에서 구성 요소에 대한 ARIA 액세스 가능성 레이블에 대해 값을 설정할 수 있습니다.

• 레이블 - 구성 요소에 대한 ARIA 레이블 속성의 값입니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 사용하여 컨텐츠 작성자에게 제공되는 탐색 루트 페이지 및 탐색 깊이의 기본값을 설정할 수 있습니다.

속성 탭

• 탐색 루트 - 컨텐츠 작성자가 페이지에 구성 요소를 추가할 때 탐색 트리를 생성하고 기본값을 설정하는 데 사용되는 탐색 구조의 루트 페이지의 기본값입니다.
• 루트 레벨 제외 - 탐색에 루트가 포함되지 않아야 하는 경우가 많습니다. 이 옵션을 사용하면 루트에서 제외할 수준 수의 기본값을 지정할 수 있습니다. 예:
  • 0 = 루트 수준 표시
  • 1 = 루트 레벨 제외
  • 2 = 루트 제외 및 1개 이상의 상위 레벨
  • 등이 됩니다.
• 모든 하위 페이지 수집 - 탐색 루트의 하위 페이지인 모든 페이지를 수집하는 옵션의 기본값입니다.
• 탐색 구조 깊이 - 탐색 구조 심도의 기본값입니다.
• 그림자 사용 안 함 - 탐색 구성 요소를 추가할 때 쉐도닝을 사용하지 않도록 설정해야 하는 경우의 기본값

스타일 탭

탐색 구성 요소는 AEM 스타일 시스템을 지원합니다.