설명서AEM핵심 구성 요소 안내서

목록 구성 요소 (v2) list-component

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 개발자
  • 관리자
  • 사용자

핵심 구성 요소의 목록 구성 요소를 사용하여 동적 목록과 정적 목록을 간단히 만들 수 있습니다.

사용 usage

목록 구성 요소를 사용하여 하위 페이지에 대한 동적 목록 또는 임의로 정의된 항목에 대한 정적 목록을 만들 수 있습니다. 템플릿 작성자는 디자인 대화 상자에서 사용 가능한 목록 유형 및 서식 지정 옵션을 정의할 수 있습니다. 콘텐츠 편집기는 편집 대화 상자에서 사용 가능한 목록 유형 및 목록 요소 서식 지정 방법을 선택할 수 있습니다.

버전 및 호환성 version-and-compatibility

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

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

목록에서 리디렉션 redirects

페이지에 리디렉션 대상이 있으면(외부 URL 또는 다른 AEM 페이지 지정 여부에 관계없이) 목록에는 리디렉션 대상의 URL을 직접 지정하는 링크가 포함됩니다.

예 redirect-example

  • 페이지 B로 리디렉션하는 페이지 A를 만듭니다.
  • https://aemcomponents.dev로 리디렉션하는 페이지 C를 만듭니다.
  • 페이지 D에서 페이지 A 및 C가 포함된 목록 구성 요소를 삽입합니다.
  • 그때 생성된 해당 링크는 페이지 B 및 https://aemcomponents.dev를 직접 지정합니다.

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

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

기술 세부 정보 technical-details

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

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

편집 대화 상자 edit-dialog

콘텐츠 작성자는 편집 대화 상자를 통해 목록 및 목록 항목을 구성할 수 있습니다.

목록 설정 탭 list-settings-tab

다른 방식으로 목록을 빌드할 수 있습니다.

목록의 빌드 방법에 관계없이 언제든지 구성할 수 있는 정렬 및 ID 옵션이 있습니다.

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

콘텐츠 작성자의 목록 빌드 선택에 따라 추가 구성 옵션이 변경됩니다.

하위 페이지 child-pages

현재 페이지나 다른 페이지의 하위 페이지에서 목록을 빌드할 수 있습니다.

하위 페이지 옵션

  • 상위 페이지

    • 목록을 작성하는 페이지의 하위 페이지
    • 현재 페이지를 사용하려면 비워 둡니다.

  • 하위 깊이
    사용되는 계층 구조의 레벨 횟수

고정 목록 fixed-list

항목의 고정 목록 통해 목록을 빌드할 수 있습니다.

고정 목록 옵션

추가 버튼을 탭하거나 클릭하여 새 항목을 목록에 삽입합니다.

  • 목록에 항목의 텍스트를 입력하거나 선택 대화 상자 ​를 사용하여 AEM에서 항목을 선택합니다.
  • 드래그 핸들을 사용하여 목록의 항목을 재배열합니다.
  • 휴지통을 사용하여 목록에서 항목을 삭제합니다.

검색 search-options

AEM 콘텐츠 검색 결과를 통해 목록을 빌드할 수 있습니다.

검색 목록 옵션

  • 검색 쿼리
    전체 텍스트 검색에 대한 문자열을 실행하여 목록 요소를 생성합니다.

  • 검색
    검색이 실행되는 위치

    • 선택 대화 상자 ​를 사용하여 AEM에서 위치를 선택합니다.
    • 비워 두면 현재 페이지를 사용합니다.

태그 tags

특정 위치에서 특정 태그와 일치하는 페이지를 사용하여 목록을 빌드할 수 있습니다

태그 목록 옵션

  • 상위 페이지
    태그 일치의 시작 위치

    • 선택 대화 상자 ​를 사용하여 AEM에서 위치를 선택합니다.
    • 비워 두면 현재 페이지를 사용합니다.

  • 태그
    태그가 일치하는 위치

    • 검색 대화 상자를 통해 태그를 선택합니다.

  • 일치
    목록에 포함되는 페이지의 자격을 충족하는 일치 유형을 정의합니다.

    • 임의의 태그
    • 모든 태그

정렬 옵션 sort-options

목록의 빌드 방법에 관계없이 언제든지 정의할 수 있는 특정 정렬 옵션이 있습니다.

정렬 옵션

  • 항목별 순서
    요소 순서를 변경하는 방법

    • 제목
    • 마지막으로 수정한 날짜

  • 항목별 순서
    항목을 지정하는 순서

    • 오름차순
    • 내림차순

  • 최대 항목 - 목록에 표시되는 최대 항목 수

    • 모든 항목을 반환하려면 비워 둡니다.

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

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

항목 설정 탭 item-settings-tab

항목 설정 탭을 사용하여 목록 요소 서식 설정을 구성할 수 있습니다.

항목 설정

  • 항목 연결
    해당 페이지에 항목 연결
  • 설명 표시
    항목 연결에 대한 설명 표시
  • 날짜 표시
    항목 연결의 수정 날짜 표시

디자인 대화 상자 design-dialog

템플릿 작성자는 디자인 대화 상자를 통해 콘텐츠 작성자에게 허용된 목록 유형과 사용 가능한 설정을 정의할 수 있습니다.

목록 설정 list-settings

목록 설정 탭에서 날짜 형식을 정의하고, 구성 요소에서 콘텐츠 작성자가 사용할 수 있는 목록 유형을 정의할 수 있습니다.

목록 구성 요소의 디자인 대화 상자 목록 설정

  • 날짜 형식
    마지막 수정 날짜 표시에 사용할 형식
  • 하위 목록 유형 비활성화
    구성 요소의 하위 목록 유형을 비활성화합니다.
  • 정적 목록 유형 비활성화
    구성 요소의 정적 목록 유형을 비활성화합니다.
  • 검색 목록 유형 비활성화
    구성 요소의 검색 목록 유형을 비활성화합니다.
  • 태그 목록 유형 비활성화
    구성 요소의 태그 목록 유형을 비활성화합니다.

항목 설정 item-settings

항목 설정 탭에서, 콘텐츠 작성자가 구성 요소에서 사용할 수 있는 개별 목록 요소에 대한 서식 옵션을 정의할 수 있습니다.

목록 구성 요소의 디자인 대화 상자 항목 설정

스타일 탭 styles-tab

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

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

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

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