목록 구성 요소 list-component
핵심 구성 요소의 목록 구성 요소를 사용하여 동적 목록과 정적 목록을 간단히 만들 수 있습니다.
사용 usage
목록 구성 요소를 사용하여 하위 페이지에 대한 동적 목록 또는 임의로 정의된 항목에 대한 정적 목록을 만들 수 있습니다. 템플릿 작성자는 디자인 대화 상자에서 사용 가능한 목록 유형 및 서식 지정 옵션을 정의할 수 있습니다. 콘텐츠 편집기는 편집 대화 상자에서 사용 가능한 목록 유형 및 목록 요소 서식 지정 방법을 선택할 수 있습니다.
버전 및 호환성 version-and-compatibility
현재 버전의 목록 구성 요소는 2023년 2월 핵심 구성 요소 릴리스 2.22.0과 함께 도입된 v4입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.
다음 표에서 구성 요소의 모든 지원 버전, 구성 요소 버전과 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 살펴볼 수 있습니다.
핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오.
목록에서 리디렉션 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
항목의 고정 목록 통해 목록을 빌드할 수 있습니다.
추가 버튼을 탭하거나 클릭하여 새 항목을 목록에 삽입합니다.
-
링크 필드에 다음 중 하나를 입력합니다.
- 정규화된 URL
- 기존 AEM 콘텐츠에 대한 상대 URL
- 선택 대화 상자 를 사용하여 AEM에서 항목을 선택할 수 있습니다.
-
텍스트 필드에 목록의 링크에 표시할 텍스트를 입력합니다.
-
링크가 새 브라우저 탭에서 열리도록 하려면 확인란을 선택합니다.
목록에 대해 두 개 이상의 항목이 생성되면 목록을 정렬할 수 있습니다.
- 드래그 핸들을 사용하여 목록의 항목을 재배열합니다.
- 휴지통을 사용하여 목록에서 항목을 삭제합니다.
검색 search-options
AEM 콘텐츠 검색 결과를 통해 목록을 빌드할 수 있습니다.
-
검색 쿼리
전체 텍스트 검색에 대한 문자열을 실행하여 목록 요소를 생성합니다. -
검색
검색이 실행되는 위치- 선택 대화 상자 를 사용하여 AEM에서 위치를 선택합니다.
- 비워 두면 현재 페이지를 사용합니다.
태그 tags
특정 위치에서 특정 태그와 일치하는 페이지를 사용하여 목록을 빌드할 수 있습니다
-
상위 페이지
태그 일치의 시작 위치- 선택 대화 상자 를 사용하여 AEM에서 위치를 선택합니다.
- 비워 두면 현재 페이지를 사용합니다.
-
태그
태그가 일치하는 위치- 검색 대화 상자를 통해 태그를 선택합니다.
-
일치
목록에 포함되는 페이지의 자격을 충족하는 일치 유형을 정의합니다.- 임의의 태그
- 모든 태그
정렬 옵션 sort-options
목록의 빌드 방법에 관계없이 언제든지 정의할 수 있는 특정 정렬 옵션이 있습니다.
-
항목별 순서
요소 순서를 변경하는 방법- 제목
- 마지막으로 수정한 날짜
-
항목별 순서
항목을 지정하는 순서- 오름차순
- 내림차순
-
최대 항목 - 목록에 표시되는 최대 항목 수
- 모든 항목을 반환하려면 비워 둡니다.
-
ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
- 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
- ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
- ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.
항목 설정 탭 item-settings-tab
항목 설정 탭을 사용하여 목록 요소 서식 설정을 구성할 수 있습니다.
- 항목 연결 - 해당 페이지에 항목 연결
- 설명 표시 - 항목 연결에 대한 설명 표시
- 날짜 표시 - 항목 연결의 수정 날짜 표시
- 티저로 표시 - 확인 표시가 되어 있으면 항목이 티저로 표시됨
스타일 탭 styles-tab-edit
목록 구성 요소는 AEM 스타일 시스템을 지원합니다.
드롭다운을 사용하여 구성 요소에 적용할 스타일을 선택합니다. 편집 대화 상자에서 선택한 항목은 구성 요소 툴바에서 선택한 항목과 동일한 효과를 가집니다.
드롭다운 메뉴를 사용하려면 디자인 대화 상자에서 이 구성 요소에 대한 스타일을 구성해야 합니다.
디자인 대화 상자 design-dialog
템플릿 작성자는 디자인 대화 상자를 통해 콘텐츠 작성자에게 허용된 목록 유형과 사용 가능한 설정을 정의할 수 있습니다.
목록 설정 list-settings
목록 설정 탭에서 날짜 형식을 정의하고, 구성 요소에서 콘텐츠 작성자가 사용할 수 있는 목록 유형을 정의할 수 있습니다.
- 날짜 형식
마지막 수정 날짜 표시에 사용할 형식 - 하위 목록 유형 비활성화
구성 요소의 하위 목록 유형을 비활성화합니다. - 정적 목록 유형 비활성화
구성 요소의 정적 목록 유형을 비활성화합니다. - 검색 목록 유형 비활성화
구성 요소의 검색 목록 유형을 비활성화합니다. - 태그 목록 유형 비활성화
구성 요소의 태그 목록 유형을 비활성화합니다.
항목 설정 item-settings
항목 설정 탭에서, 콘텐츠 작성자가 구성 요소에서 사용할 수 있는 개별 목록 요소에 대한 서식 옵션을 정의할 수 있습니다.
스타일 탭 styles-tab
이미지 구성 요소는 AEM 스타일 시스템을 지원합니다.
Adobe 클라이언트 데이터 레이어 data-layer
목록 구성 요소는 Adobe 클라이언트 데이터 레이어를 지원합니다.