목차 구성 요소

목차 구성 요소는 독자가 페이지를 빠르게 탐색할 수 있도록 페이지 콘텐츠의 제목을 기반으로 목차를 만듭니다.

사용량

목차 구성 요소는 사이트 방문자가 페이지 콘텐츠의 제목을 기반으로 효율적으로 생성된 목차를 통해 페이지 콘텐츠를 빠르게 탐색할 수 있는 기능을 제공합니다.

  • ToC는 서버측에서 생성됩니다.
  • 빠른 전달을 위해 Dispatcher에 의해 완전히 캐시됩니다.
  • 핵심 구성 요소뿐만 아니라 페이지의 모든 구성 요소에서 작동합니다.

편집 대화 상자를 통해 콘텐츠 작성자는 목차에서 사용할 제목 범위를 정의할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 사용하여 콘텐츠 작성자가 페이지에 목차 구성 요소를 추가할 때 제목의 기본값을 설정할 수 있으며 클래스 이름을 기반으로 목차에 포함된 제목을 제한할 수 있습니다.

버전 및 호환성

현재 버전의 목차 구성 요소는 2022년 5월 핵심 구성 요소 릴리스 2.20.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

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

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

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

노트

AEM as a Cloud Service에서 관리자는 구성 요소의 콘텐츠를 렌더링하기 위해 구성 요소에 대한 필터를 활성화해야 합니다.

자세한 내용은 구성 요소의 GitHub 설명서를 참조하십시오.

기술 세부 사항

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

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

편집 대화 상자

콘텐츠 작성자는 편집 대화 상자를 통해 목차 구성 요소가 목차로 렌더링해야 하는 제목 수준 범위를 정의할 수 있습니다.

목차 구성 요소의 편집 대화 상자

목록 유형 - 이 옵션은 목록이 글머리 기호 목록이어야 하는지 아니면 번호가 매겨진 목록이어야 하는지 정의합니다.

  • 제목 시작 수준 - 이 옵션은 목차 구성 요소가 렌더링해야 하는 가장 높은 수준의 제목을 정의합니다.
  • 제목 중단 수준 - 이 옵션은 목차 구성 요소가 렌더링해야 하는 가장 낮은 수준의 제목을 정의합니다.
  • ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
    • 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
    • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
    • ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 사용하여 목차 구성 요소의 제목 범위에 대한 기본값을 설정하고 클래스 이름을 기반으로 목차에 포함된 제목을 제한할 수 있습니다.

속성 탭

빠른 검색 구성 요소의 디자인 대화 상자

  • 목록 유형 제한 - 이 옵션은 구성 요소가 생성할 목록 유형을 정의합니다. 이 옵션을 선택하면 콘텐츠 작성자가 다른 목록 유형을 선택할 수 있는 기능이 제한됩니다.
  • 시작 수준 제한 - 이 옵션은 콘텐츠 작성자가 목차를 정의하기 위해 선택할 수 있는 가장 높은 제목 수준을 정의합니다.
  • 중단 수준 제한 - 이 옵션은 콘텐츠 작성자가 목차를 정의하기 위해 선택할 수 있는 가장 낮은 제목 수준을 정의합니다.
  • 클래스 이름 포함 - 이 옵션이 설정되면 목차 구성 요소에서 지정된 클래스 이름을 사용하거나 지정된 클래스 이름의 요소 내에 포함된 제목만 고려합니다.
    • 추가 아이콘을 탭하거나 클릭하여 하나 이상의 클래스 이름을 추가합니다.
    • 클래스 이름 옆에 있는 삭제 아이콘을 탭하거나 클릭하여 삭제합니다.
  • 클래스 이름 무시 - 이 옵션이 설정되면 목차 구성 요소에서 지정된 클래스 이름을 사용하거나 지정된 클래스 이름의 요소 내에 포함된 제목을 무시합니다.
    • 추가 아이콘을 탭하거나 클릭하여 하나 이상의 클래스 이름을 추가합니다.
    • 클래스 이름 옆에 있는 삭제 아이콘을 탭하거나 클릭하여 삭제합니다.

스타일 탭

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

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

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

이 페이지에서는