사이트 테마

AEM 사이트 테마를 사용하여 사이트의 스타일 및 디자인을 사용자 지정하는 방법을 알아봅니다.

개요

AEM 사이트 테마는 AEM 사이트의 스타일을 정의하고 AEM 사이트 테마의 구조를 준수하는 CSS, JavaScript 및 정적 리소스가 포함된 패키지입니다.

AEM 사이트 템플릿으로 만든 사이트를 통해 손쉽게 테마를 다운로드, 사용자 지정 및 재배포할 수 있습니다.

사이트 테마 사용

사이트 테마는 다음 두 가지 방법으로 사용됩니다.

• 사이트 템플릿의 일부로 사용하여 스타일을 정의할 때 사이트 만들기
• 사이트 템플릿을 기반으로 사이트를 만든 후 다운로드되므로 프런트 엔드 개발자가 스타일을 추가로 사용자 지정할 수 있습니다.

사이트 테마 구조

사이트 테마는 패키지 컨텐츠의 목적을 명확하게 반영하는 논리 구조의 패키지입니다. 사이트 테마는 프런트 엔드 프로젝트의 일반적인 다음 구조를 갖습니다.

• src/main.ts: JS 및 CSS 테마의 기본 시작 지점
• src/site: 전체 사이트에 적용되는 JS 및 CSS 파일
• src/components: AEM 구성 요소별 JS 및 CSS 파일
• src/resources: 아이콘, 로고 및 글꼴과 같은 정적 파일

표준 사이트 테마

Adobe은 고유한 테마를 만드는 기준으로 사용할 수 있는 모범 사례 참조 테마를 제공합니다. 표준 사이트 테마는 GitHub에서 사용할 수 있습니다.

사이트 테마 개발

Adobe은 새 사이트 테마를 만들기 위한 스크립트 세트로 AEM 사이트 테마 빌더를 제공합니다.

AEM 사이트 테마 빌더는 GitHub의 사용 설명서와 함께 사용할 수 있습니다. 테마를 사용자 지정하려면 프런트 엔드 개발 경험이 필요합니다.