[AEM Forms]{class="badge positive" title="AEM Forms에 적용됩니다)."}

AEM Sites 테마에 적응형 Forms 테마 포함

적응형 Forms 테마(예: AEM Forms 캔버스 테마)를 AEM Sites 테마에 포함할 수 있습니다. 이러한 방식으로 단일 테마는 사이트 페이지와 해당 페이지에 포함된 모든 적응형 Forms을 구동하며, 하나의 빌드와 AEM 프론트엔드 파이프라인을 통한 하나의 배포가 있습니다.

이 문서는 표준(또는 사용자 지정) AEM Sites 테마를 유지 또는 사용자 지정하고 별도의 Forms 테마 배포를 관리하지 않고 적응형 양식 스타일을 포함하려는 개발자를 위한 것입니다.

사전 요구 사항 prerequisites

시작하기 전에 다음을 확인하십시오.

1단계: 적응형 양식 구성 요소 폴더 만들기 step-1-create-folder

사이트 테마 저장소에서 Forms 테마가 위치할 폴더를 만듭니다.

theme/src/components/adaptiveform/

모든 Forms 테마 자산은 이 폴더 아래에 배치되므로 기존 사이트 구성 요소와 별도로 유지됩니다.

2단계: Forms 테마 구성 요소 및 이미지 복사 step-2-copy-components-and-images

Forms 테마(예: aem-forms-theme-canvas) 및 사이트 테마 경로 사용:

3단계: 변수 및 mixin 복사 step-3-copy-variables-and-mixins

Forms 테마는 src/site/에서 공유 변수와 mixin을 사용합니다. 이 두 파일만 하위 폴더 내부가 아닌​의 adaptiveform/rootsite에 복사합니다.

Forms 테마의 나머지 폴더는​복사하지 src/site/ 마십시오. 임베드된 양식 스타일에는 이 두 파일만 필요합니다.

4단계: SCSS에서 이미지 경로 수정 step-4-fix-image-paths

Forms 테마에서 구성 요소 SCSS 파일은 종종 ./resources/ 또는 url(resources/과(와) 같은 경로를 사용하는 이미지를 참조합니다. 사이트 테마에 복사한 후 해당 경로는 theme/src/components/adaptiveform/resources/images/을(를) 가리켜야 합니다.

표준 사이트 템플릿 테마​이(가) Parcel을 사용하여 url()에서 theme/src/개 경로를 확인합니다. 따라서 이미지가 theme/src/components/adaptiveform/resources/images/에 있으면 components/adaptiveform/resources/images/​을(를) 기준으로 하여 theme/src/ 경로를 사용하십시오.

아래​마다 .scss찾기 및 바꾸기theme/src/components/adaptiveform/:

예 - 이전(Forms 테마):

.cmp-adaptiveform-button__questionmark {
  background: url(./resources/images/question.svg) center center / cover no-repeat, #969696;
}

이후(사이트 테마, adaptiveform/resources/images/의 이미지):

.cmp-adaptiveform-button__questionmark {
  background: url(components/adaptiveform/resources/images/question.svg) center center / cover no-repeat, #969696;
}

이미지(단추, 아코디언, 마법사, 컨테이너, 스크리블 등)를 참조하는 adaptiveform/ 아래의 모든 SCSS 파일에 대해 이 작업을 반복합니다. theme/src/components/adaptiveform/을(를) 초과하는 IDE에서 프로젝트 전체 찾기/바꾸기를 권장합니다.

5단계: 적응형 양식 진입점 SCSS 만들기 step-5-create-adaptiveform-scss

사이트 테마에 theme/src/components/adaptiveform/_adaptiveform.scss​을(를) 만듭니다. 이 파일은 다음과 같아야 합니다.

다음을 전체 진입점으로 사용합니다(모든 핵심 구성 요소 기반 양식 구성 요소와 표준 통합 일치).

//== Adaptive Form components (forms theme integration)
// Variables and mixins for adaptive form components
@import 'variables';
@import 'mixin';

//== Core adaptive form components
@import './button/_button.scss';
@import './checkboxgroup/_checkboxgroup.scss';
@import './container/_container.scss';
@import './datepicker/_datepicker.scss';
@import './dropdown/_dropdown.scss';
@import './fileinput/_fileinput.scss';
@import './footer/_footer.scss';
@import './image/_image.scss';
@import './numberinput/_numberinput.scss';
@import './panelcontainer/_panelcontainer.scss';
@import './radiobutton/_radiobutton.scss';
@import './text/_text.scss';
@import './textinput/_textinput.scss';
@import './accordion/_accordion.scss';
@import './tabsontop/_tabsontop.scss';
@import './pageheader/_pageheader.scss';
@import './wizard/_wizard.scss';
@import './title/_title.scss';
@import './telephoneinput/_telephoneinput.scss';
@import './emailinput/_emailinput.scss';
@import './recaptcha/_recaptcha.scss';
@import './verticaltabs/_verticaltabs.scss';
@import './checkbox/_checkbox.scss';
@import './termsandconditions/_termsandconditions.scss';
@import './switch/_switch.scss';
@import './hcaptcha/_hcaptcha.scss';
@import './turnstile/_turnstile.scss';
@import './review/_review.scss';
@import './scribble/_scribble.scss';
@import './datetime/_datetime.scss';

Forms 테마에 일부 구성 요소가 누락된 경우(예: 스크리블 또는 captcha 없음) 해당 @import줄을 제거하거나 주석 처리하여 빌드 오류를 방지하십시오. 위의 목록은 캔버스 테마 구조와 일치합니다.

6단계: 사이트 테마에서 적응형 양식 테마 가져오기 step-6-import-in-theme-scss

theme/src/theme.scss​에서 파일의 end​에 단일 가져오기를 추가합니다(다른 구성 요소 가져오기 후).

//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';

예 - theme.scss의 끝:

// ... existing site component imports ...
@import './components/embed/_embed.scss';
@import './components/pdfviewer/_pdfviewer.scss';
@import './components/socialmediasharing/_social_media_sharing.scss';

//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';

이는 기존 사이트 테마 구조에서 필요한 유일한 변경 사항입니다. 모든 폼별 코드는 src/components/adaptiveform/에 남아 있습니다.

7단계: 빌드 및 배포 step-7-build-and-deploy

문제 해결 troubleshooting

추가 참조 see-also