설명서

컬렉션 차단

Last update: Wed Feb 26 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

AEM 제품의 일부로 간주되는 블록 컬렉션이며, 프로젝트 블록에 대한 블루프린트로 권장됩니다.

이러한 블록은 실제 프로덕션 AEM 프로젝트에서 가져옵니다. 이 컬렉션의 일부가 되려면 블록은 많은 프로젝트에서 높은 사용률을 가져야 하며, 기본 콘텐츠 모델을 변경하지 않고도 재사용할 수 있을 만큼 충분한 추상적 기능을 제공하고 일반적이어야 합니다.

웹사이트의 필요와 디자인이 변함에 따라, 블록 컬렉션도 변하게 됩니다. 프로젝트의 새로운 요구 사항을 반영하기 위해 추가되지만 자주 사용되지 않는 블록은 제거됩니다(더 이상 사용되지 않음).

컬렉션의 블록에 대한 몇 가지 기술 원칙이 있습니다.

  • 직관적: 직관적이고 작성하기 쉬운 콘텐츠 구조
  • 사용 가능: 종속성이 없으며, 표준 버전과 호환됩니다.
  • 응답형: ​은(는) 모든 중단점에서 작동합니다.
  • 컨텍스트 인식: 텍스트 및 배경색과 같은 CSS 컨텍스트를 상속합니다.
  • 지역화 가능: 하드 코딩된 콘텐츠 없음
  • 빠르게: 성능에 부정적인 영향을 주지 않음
  • SEO 및 A11y: SEO에 친숙하고 액세스할 수 있음

모든 블록은 자신의 블록 개발을 위한 기반으로 간주될 수 있다. 프로젝트 요구 사항에 맞게 모든 .css 및 .js 코드를 변경할 수 있습니다. 이러한 블록의 주요 값은 이 블록이 제공하는 콘텐츠 구조입니다.

블록의 코드가 프로젝트에 완전히 맞게 조정된다는 점을 고려하면 컬렉션에 있는 블록이 해당 이전 버전과 역으로 호환되거나 블록을 업그레이드할 수 있게 만들 의도가 없습니다.

보일러 판

가장 일반적으로 사용되는 블록(기본 컨텐츠 유형 포함)은 AEM Boilerplate에서 조정되며 모든 AEM 프로젝트의 일부입니다. 블록이 보일러판의 일부가 되려면 대부분의 모든 AEM 프로젝트에서 블록을 사용해야 합니다.

AEM Boilerplate의 모든 블록에 대한 코드 베이스는 오픈 소스이며 GitHub adobe/aem-boilerplate에서 찾을 수 있습니다.

아래 사이드 킥 라이브러리를 사용하여 AEM Boilerplate의 블록을 찾을 수 있습니다. copy 버튼을 사용하여 해당 콘텐츠 구조를 클립보드에 복사하고 문서에 붙여 넣어 콘텐츠 구조를 확인하세요.

<h3>제목</h3>

기본 콘텐츠

머리글의 수준이 다르면 문서의 의미 체계 중추를 제공할 수 있습니다

<h3>텍스트</h3>

기본 콘텐츠

서식 있는 의미 체계 서식 옵션을 사용하여 본문 텍스트 또는 복사

<h3>이미지</h3>

기본 콘텐츠

사진을 통해 콘텐츠를 사용할 수 있습니다.

<h3>목록</h3>

기본 콘텐츠

필요한 위치에 정렬된 목록과 순서가 지정되지 않은 목록

<h3>링크</h3>

기본 콘텐츠

다른 웹 사이트 또는 자체 콘텐츠 참조

<h3>버튼</h3>

기본 콘텐츠

콜 투 액션 버튼 등

<h3>코드</h3>

기본 콘텐츠

콘텐츠에서 미리 서식이 지정된 코드 조각 강조 표시

<h3>섹션</h3>

기본 콘텐츠

페이지의 콘텐츠를 섹션으로 그룹화

<h3>아이콘</h3>

기본 콘텐츠

아이콘을 사용하여 콘텐츠를 더 재미있게 만들기

<h3>영웅</h3>

블록

페이지 상단의 영웅 처리

<h3>열</h3>

블록

응답형 방식으로 다중 열 레이아웃을 처리하는 유연한 방법

<h3>카드</h3>

블록

이미지 및 링크가 있거나 없는 카드 목록

<h3>헤더</h3>

블록

유연한 헤더 및 탐색 예

<h3>바닥글</h3>

블록

간단하게 확장 가능한 바닥글 블록

<h3>메타데이터</h3>

필요한 경우 페이지에 메타데이터 추가

<h3>섹션 메타데이터</h3>

섹션의 모든 콘텐츠 강조 표시 또는 구조

블록 컬렉션

블록 컬렉션에는 일반적으로 사용되는 블록이 포함되어 있지만 보일러판으로 간주할 만큼 일반적이지는 않습니다. 일반적으로 블록 컬렉션에 포함하려면 모든 AEM 프로젝트의 절반 이상에서 블록을 사용해야 합니다.

블록 컬렉션은 상용구 코드의 시작 경로가 될 수 있습니다. 마찬가지로 보일러판의 블록이 더 이상 많이 사용되지 않으면, 이 컬렉션으로 이동할 수 있습니다.

AEM 블록 컬렉션의 모든 블록에 대한 코드 베이스는 오픈 소스이며 GitHub adobe/aem-block-collection에서 찾을 수 있습니다.

아래 사이드 킥 라이브러리를 사용하여 AEM 블록 컬렉션의 블록을 검색할 수 있습니다. copy 단추를 사용하여 해당 콘텐츠 구조를 클립보드에 복사하고 문서에 붙여 넣어 콘텐츠 구조를 확인하십시오.

<h3>임베드</h3>

블록

소셜 미디어 콘텐츠를 AEM 페이지에 임베드하는 간단한 방법

<h3>조각</h3>

블록

여러 페이지에서 컨텐츠 조각 공유

<h3>테이블</h3>

블록

테이블 형식 데이터를 행과 열로 구성하는 방법

<h3>비디오</h3>

블록

AEM에서 바로 비디오 표시 및 재생

<h3>아코디언</h3>

블록

관련 전체 콘텐츠를 표시하도록 전환할 수 있는 설명 레이블의 스택입니다

<h3>이동 경로</h3>

추가 기능 차단

에서 현재 페이지의 위치를 보여 주는 페이지 제목 및 관련 링크 목록 탐색 계층

<h3>슬라이드</h3>

블록

선택 사항으로 일련의 이미지를 매끄럽게 전환하는 동적 표시 도구입니다 텍스트 컨텐츠

<h3>양식</h3>

자동 차단

다른 사이트 콘텐츠 위에 표시되는 팝업

<h3>인용</h3>

블록

내의 특정 경로("풀 따옴표")에 대한 따옴표 또는 강조 표시 문서

<h3>검색</h3>

블록

사용자가 검색어를 입력하여 사이트 콘텐츠를 찾을 수 있습니다.

<h3>탭</h3>

블록

여러 레이블이 지정된(또는 "탭") 패널로 정보를 세그먼트화합니다.

<h3>양식</h3>

블록(사용하지 않음)

사용자가 정보를 제출할 수 있도록 그룹화된 입력 컨트롤 집합

블록 컬렉션은 AEM 커뮤니티의 피드백을 기반으로 지속적으로 발전하고 있습니다. 블록 컬렉션에 포함해야 하는 블록이 있다고 생각되면 AEM 담당자에게 문의하십시오. 블록 컬렉션에 포함할 현재 후보는 다음과 같습니다.

  • 동의 배너

아직 컬렉션에 포함되지 않은 블록이 필요한 경우 GitHub에서 위의 모든 후보에 대한 예제 구현이 있는 AEM 프로젝트를 비교적 쉽게 찾을 수 있습니다.

파티 차단

차단 파티는 AEM 개발자 커뮤니티가 AEM 사이트에 구축한 내용을 선보이는 자리입니다. 또한 다른 사용자가 휠을 재발명하지 않고 커뮤니티에서 구축한 이러한 블록/코드 조각/통합을 재사용하고 자체 프로젝트에 맞게 필요에 따라 코드를 조정할 수 있습니다. 제공하는 모든 항목을 보려면 파티 차단을 참조하세요.

참고: AEM 개발자 커뮤니티를 사랑하고 지원하지만 Adobe은 차단 파티에 표시되는 코드를 유지 관리하거나 업데이트할 책임이 없습니다. 자신의 판단에 따라 코드를 사용하십시오.

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec