이동 경로 구성 요소 (v1) breadcrumb-component-v

핵심 구성 요소의 이동 경로 구성 요소는 콘텐츠 계층 구조의 페이지 위치에 따라 링크의 이동 경로를 빌드하는 탐색 구성 요소입니다.

사용량 usage

이동 경로 구성 요소의 사이트 계층 구조 내부에 현재 페이지 위치가 표시되면 페이지 방문자는 현재 위치에서 페이지 계층 구조를 탐색할 수 있습니다. 이는 종종 페이지 머리글이나 바닥글에 통합됩니다.

템플릿 작성자는 디자인 대화 상자에서 기본 탐색 수준과 현재 페이지 또는 숨겨진 페이지 표시하기 기능 등 사용 가능한 옵션을 정의할 수 있습니다. 그런 다음 콘텐츠 편집기는 숨겨진 페이지 표시 여부를 선택하고 편집 대화 상자에서 구성 요소의 실제 탐색 수준을 선택할 수 있습니다.

버전 및 호환성 version-and-compatibility

이 문서에서는 AEM 6.3을 포함하는 핵심 구성 요소 릴리스 1.0.0과 함께 최초 도입된 이동 경로 구성 요소 v1에 대해 설명합니다.

다음 표에서 이동 경로 구성 요소 v1의 호환성을 확인할 수 있습니다.

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

다음은 We.Retail에서 얻은 샘플입니다.

스크린샷 screenshot

HTML html

<div class="cmp cmp-breadcrumb aem-GridColumn aem-GridColumn--default--12">

<ol class="breadcrumb">
    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us.html">
            United States
        </a>
    </li>

    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us/en.html">
            English
        </a>
    </li>

    <li class="breadcrumb-item active">

            Experience

    </li>
</ol>

</div>

JSON json

"breadcrumb": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/breadcrumb"
            }

편집 대화 상자 edit-dialog

콘텐츠 작성자는 편집 대화 상자를 통해 이동 경로의 숨겨진 페이지 및 활성 페이지뿐만 아니라 표시할 계층 구조의 깊이를 표시하지 않을 수 있습니다.

디자인 대화 상자 design-dialog

템플릿 작성자는 디자인 대화 상자를 통해 이동 경로의 숨겨진 페이지 및 활성 페이지뿐만 아니라 표시할 계층 구조의 깊이를 표시하지 않도록 옵션의 기본값을 정의할 수 있습니다.

기술 세부 사항 technical-details

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

GitHub에서 전체 핵심 구성 요소 프로젝트를 다운로드할 수 있습니다.

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