언어 탐색 구성 요소 (v1) language-navigation-component

방문자가 서로 다른 로케일에서 동일한 페이지로 이동할 수 있도록 언어 탐색 구성 요소는 사이트에 언어/국가/지역 탐색을 제공합니다.

사용량 usage

지역에 따라 여러 언어로 웹 사이트가 제공되는 경우가 있습니다. 방문자는 언어 탐색 구성 요소를 사용하여 서로 다른 언어/로케일에서 동일한 페이지로 열람할 수 있습니다. 따라서 스위스/독일어 버전의 웹 사이트를 방문하여도 미국 영어 버전의 동일한 페이지로 간편하게 전환할 수 있습니다. 언어 탐색 구성 요소는 사이트 언어 구조를 이해하고 해당 페이지를 자동으로 검색합니다.

  • 언어 탐색 구성 요소의 현지화 기능이 어떻게 작동하는지 사례를 알고 싶다면 아래 섹션을 참조하십시오.
  • 다른 핵심 구성 요소의 현지화 기능이 어떻게 서로 작동하는지 사례를 알고 싶다면 핵심 구성 요소의 현지화 기능을 참조하십시오.

편집 대화 상자를 통해 전역 사이트 루트와 탐색이 적용될 구조의 깊이를 정의할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 통해 동일한 옵션의 기본값을 설정할 수 있습니다.

버전 및 호환성 version-and-compatibility

언어 탐색 구성 요소는 2018년 1월 핵심 구성 요소 릴리스 2.0.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

CAUTION
이 문서에서는 언어 탐색 구성 요소 v1에 대해 설명합니다.
현재 버전의 언어 탐색 구성 요소에 대한 자세한 내용은 언어 탐색 구성 요소 문서를 참조하십시오.

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

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

기술 세부 사항 technical-details

언어 탐색 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.

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

디자인 대화 상자 design-dialog

편집 대화 상자를 통해 전역 사이트 루트와 탐색이 적용될 구조의 깊이를 정의할 수 있습니다.

일반적으로 이러한 구성은 페이지 템플릿 수준에서만 수행되어야 합니다. 하지만 페이지 수준에서 편집 대화 상자를 통해 변경할 수 있습니다.

속성 탭 properties-tab

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

  • 탐색 루트

    • 여기서 사이트에 대한 언어 탐색이 시작됩니다.
    • 사이트의 언어 구조는 이 루트 아래의 다음 수준에서 시작됩니다.
  • 언어 구조 깊이

    • 다음은 사이트의 언어 구조를 보여 주는 탐색 루트 아래에 있는 콘텐츠 트리의 레벨 횟수입니다. 예:

      • 일반적으로 1는 언어만 선택할 수 있음을 의미합니다.
      • 일반적으로 2는 언어와 국가를 선택할 수 있음을 의미합니다.
      • 일반적으로 3는 언어, 국가 및 지역을 선택할 수 있음을 의미합니다.

example

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

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

사이트 WKND의 경우 언어 탐색 구성 요소를 머리말의 일부로서 페이지 템플릿에 배치할 수도 있습니다. 템플릿의 일부인 경우 구성 요소의 탐색 루트 ​가 해당 사이트 현지화된 콘텐츠의 시작점이 되기 때문에 해당 루트를 /content/wknd로 설정할 수 있습니다. 구조가 두 단계로 구성되기 때문에(국가 다음 언어 순) 언어 구조 깊이 ​를 2으로 설정할 수도 있습니다.

탐색 루트 값을 사용하여 언어 구성 요소는 /content/wknd 다음 두 단계 콘텐츠 트리를 사이트 언어 탐색 구조로 인식하면서(언어 구조 깊이 ​로 정의) 언어 탐색 옵션을 생성할 수 있다고 인식하고 있습니다.

사용자가 조회 중인 페이지가 아무리 현지화되어도 언어 탐색 구성 요소는 현재 페이지 위치를 인지하면서 다른 언어로 된 해당 페이지를 찾을 수 있습니다. 루트로 거슬러 올라간 다음 순차적으로 해당 페이지로 내려옵니다.

스타일 탭 styles-tab

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

편집 대화 상자 edit-dialog

일반적으로 사이트의 페이지 템플릿에서만 언어 탐색 구성 요소를 추가하고 구성할 수 있습니다. 하지만, 언어 탐색 구성 요소를 개별 페이지에 추가해야 할 경우 콘텐츠 작성자는 디자인 편집 상자 설명에 따라 편집 대화 상자를 통해 동일한 값을 구성할 수 있습니다.

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

  • 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
  • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
  • ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.

언어 탐색 구성 요소의 편집 대화 상자

Adobe 클라이언트 데이터 레이어 data-layer

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c