탐색 구성 요소

탐색 구성 요소를 사용하면 세계화된 사이트 구조를 쉽게 탐색할 수 있습니다.

사용량

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

탐색 구성 요소는 사이트의 세계화된 사이트 구조를 자동으로 감지하고 현지화된 페이지에 을 자동으로 적용할 수 있습니다. 또한 그림자 리디렉션 페이지를 사용하여 기본 컨텐츠 구조 이외의 다른 구조 를 나타내어 임의의 사이트 구조를 지원할 수 있습니다.

편집 대화 상자를 사용하면 컨텐츠 작성자가 탐색 깊이와 함께 탐색 루트 페이지를 정의할 수 있습니다. 디자인 대화 상자를 사용하면 템플릿 작성자가 탐색 루트와 깊이에 대한 기본값을 정의할 수 있습니다.

현지화된 사이트 구조 지원

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

  • 탐색 구성 요소의 로컬라이제이션 기능 작동 방법의 예는 아래의 섹션을 참조하십시오.
  • 핵심 구성 요소의 로컬라이제이션 기능이 함께 작동하는 방식의 예는 핵심 구성 요소 페이지의 로컬라이제이션 기능을 참조하십시오.

컨텐츠가 다음과 유사하다고 가정합니다.

/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 이후에 탐색이 시작되고, 탐색 구조 깊이 값으로 정의된 대로 사이트의 구조를 두 수준 아래로 반복하여 탐색 옵션을 생성할 수 있음을 알게 됩니다.

사용자가 보고 있는 현지화된 페이지에 관계없이 탐색 구성 요소는 현재 페이지의 위치를 파악하여 루트로 이전 방식으로 이동한 다음 해당 페이지로 전달하여 현지화된 해당 페이지를 찾을 수 있습니다.

따라서 방문자가 /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. 새 섀도 사이트 구조의 루트를 가리키도록 탐색 구성 요소의 탐색 루트 값을 설정합니다.

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

노트

그림자 페이지를 사용하면 탐색 옵션이 훨씬 더 유연하지만 이 구조의 유지 관리가 완전히 수동적이므로 주의하십시오. 실제 사이트 컨텐츠를 다시 배열하거나 컨텐츠를 추가/제거하는 경우 필요에 따라 그림자 구조를 수동으로 업데이트해야 합니다.

노트

섀도 사이트 구조를 렌더링할 때 탐색 논리에 의해 섀도 페이지만 반복됩니다. 로직은 리디렉션 대상의 구조를 반복하지 않습니다.

탐색의 리디렉션

페이지에 리디렉션 대상이 있는 경우(외부 URL을 가리키는지 아니면 다른 AEM 페이지를 가리키는지 여부에 관계없이), 해당 링크에 대한 링크가 포함된 탐색 구성 요소는 리디렉션 대상의 URL을 직접 가리킵니다.

  • 페이지 B로 리디렉션되는 페이지 A를 만듭니다.
  • https://aemcomponents.dev으로 리디렉션되는 페이지 C를 만듭니다.
  • 페이지 D에서 페이지 A와 C가 포함된 또는 탐색 구성 요소를 삽입합니다
  • 생성된 각 링크는 페이지 B와 https://aemcomponents.dev을 직접 가리킵니다

버전 및 호환성

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

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

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

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

샘플 구성 요소 출력

탐색 구성 요소를 경험하고 구성 옵션의 예와 HTML 및 JSON 출력을 보려면 구성 요소 라이브러리를 방문하십시오.

기술 세부 정보

탐색 구성 요소 에 대한 최신 기술 설명서는 GitHub에 있습니다.

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

노트

코어 구성 요소 릴리스 2.1.0부터 탐색 구성 요소는 schema.org 마이크로 데이터를 지원합니다.

편집 대화 상자

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

속성 탭

탐색 구성 요소의 편집 대화 상자 속성 탭

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

액세스 가능성 탭

탐색 구성 요소의 편집 대화 상자 액세스 가능성 탭

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

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

디자인 대화 상자

디자인 대화 상자에서는 템플릿 작성자가 컨텐츠 작성자에게 표시되는 탐색 루트 페이지와 탐색 깊이의 기본값을 설정할 수 있습니다.

속성 탭

탐색 구성 요소의 디자인 대화 상자

  • 탐색 루트 - 탐색 트리를 생성하는 데 사용되는 탐색 구조의 루트 페이지의 기본값으로, 컨텐츠 작성자가 페이지에 구성 요소를 추가할 때 기본적으로 사용됩니다.
  • 루트 수준 제외 - 종종 루트가 탐색에 포함되지 않아야 합니다. 이 옵션을 사용하면 루트에서 제외할 수준 수의 기본값을 지정할 수 있습니다. 예:
    • 0 = 루트 수준 표시
    • 1 = 루트 수준 제외
    • 2 = 루트 제외 및 1개 이상의 수준 향상
    • 등이 됩니다.
  • 모든 하위 페이지 수집 - 탐색 루트의 하위 페이지인 모든 페이지를 수집하기 위한 옵션의 기본값.
  • 탐색 구조 깊이 - 탐색 구조 깊이의 기본값입니다.
  • 공유 비활성화 - 탐색 구성 요소를 추가할 때 공유를 비활성화해야 하는 경우 기본값은 입니다

스타일 탭

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

Adobe 클라이언트 데이터 레이어

탐색 구성 요소는 Adobe 클라이언트 데이터 계층을 지원합니다.

이 페이지에서는