다중 영역 레이아웃에 대한 사용자 지정 템플릿 만들기

이 페이지에서는 다중 영역 레이아웃에 대한 사용자 지정 템플릿을 만드는 방법을 보여 줍니다.

중요 고려 사항

다중 영역 레이아웃에서 사용자 지정 템플릿을 만들기 전에 알아 두어야 할 두 가지 중요한 고려 사항이 있습니다.

고정 픽셀 크기 또는 백분율:

사용자 지정 레이아웃에 대해 서로 다른 영역에 대해 고정된 픽셀 크기를 사용할지 또는 백분율을 사용하여 사용자 지정 레이아웃을 작성할지 여부를 결정해야 합니다.

노트

백분율을 사용하여 사용자 정의 레이아웃의 영역을 설정할 수 있으므로 다양한 화면 크기에서 템플릿을 재사용할 수 있습니다.

명명 규칙:

AEM Screens 프로젝트에서 사용할 사용자 정의 다중 영역 템플릿을 만드는 방법을 이해하려면 먼저 만들려는 템플릿의 용어를 이해하는 것이 좋습니다.

레이아웃 이름	설명
Left20-LandscapeHD3Zone	왼쪽에서 가로 및 세로 화면의 20%로, 가로 화면의 80%로, 세로 화면의 20%로, 가로 화면의 100%로, 세로 화면의 80%로, 가로 및 세로 화면의 80%로 가로 비율 16:9의 가로율을 갖는 3개 영역을 만들 수 있는 3개 영역 가로 레이아웃을 나타냅니다.
Upper20-PortraitHD2Zone	화면 상단에서 화면의 20%를 차지하는 2영역 세로 템플릿을 나타내며 종횡비는 16:9입니다.
Right20-LandscapeSD3Zone	오른쪽에서 화면의 20%를 차지하는 3영역 템플릿을 나타내며 종횡비는 4:3입니다.

중요

사용자 지정 레이아웃 내에 정의된 영역이 전체 레이아웃의 전체 종횡비와 일치하지 않을 수 있습니다. 이 문서에서 따르는 명명 규칙은 전체적으로 사용자 정의 레이아웃의 종횡비를 지정합니다.

예제 사용 사례 Left20-LandscapeHD3Zone 레이아웃

사용자 지정 템플릿을 만들려면 아래 섹션을 따르십시오. Left20-LandscapeHD3Zone 다음 구성을 사용하여

Left20 는 가로 및 세로 화면 크기의 20%를 포함하는 왼쪽 상단 영역을 나타냅니다.
가로 은 화면 방향을 나타냅니다.
HD 종횡비를 16:9로 나타냅니다.
3Zone 디스플레이의 세 영역 참조

다중 영역 레이아웃의 시각적 표현

Left20-LandscapeHD3Zone 레이아웃을 사용하면 프로젝트에서 다음과 같은 다중 영역 레이아웃을 만들 수 있습니다.

Left20-LandscapeHD3Zone 레이아웃 만들기

AEM Screens 프로젝트에 대한 Left20-LandscapeHD3Zone 레이아웃을 만들려면 아래 단계를 따르십시오.

제목이 인 AEM Screens 프로젝트 만들기 사용자 지정 템플릿.
다음으로 이동 CRXDE Lite AEM 인스턴스에서 —> 도구 —> CRXDE Lite.
아래에 폴더 만들기 앱 제목이 다음으로 지정됨 사용자 지정 템플릿. 마찬가지로 이라는 다른 폴더를 만듭니다. 템플릿 아래에 사용자 지정 템플릿을 참조하십시오.

노트

을(를) 클릭하는 것이 좋습니다 모두 저장 컨텐츠를 만들거나 편집하거나 노드에 복사할 때마다 CRXDE Lite의 작업 표시줄에서 를 클릭하면 업데이트를 커밋할 수 없습니다.
에서 왼쪽 막대 템플릿 복사 /libs/screens/core/templates/splitscreenchannel/lbar-left 끝 /apps/customtemplate/template.
복사된 항목 이름 바꾸기 lbar-left (/apps/customtemplate/template) 받는 사람 내 사용자 지정 레이아웃.
다음으로 이동 /apps/customtemplate/template/my-custom-layout 및 속성 업데이트 jcr:description 끝 Left20-LandscapeHD3Zone용 템플릿 및 jcr:title 끝 Left20-LandscapeHD3Zone.
다음 위치로 이동 offline-config 노드: 부터 /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config 및 업데이트 jcr:title 끝 Left20-LandscapeHD3Zone.
다음 위치로 이동 jcr:content 다음의 속성 my-custom-template 출처: /apps/customtemplate/template/my-custom-layout/jcr:content 및 업데이트 cq:cssClass 다음으로 속성: aem 레이아웃 내 사용자 지정 레이아웃.
막대 왼쪽 템플릿을 복사한 단계 (4)를 참조하면 아래에 3개의 응답형 그리드가 표시됩니다. my-custom-layout/jcr:content. 사용자 지정 css 클래스를 의 각 응답형 격자에 추가합니다. cq:cssClass 속성(예: ) my-custom-layout - 왼쪽 상단 대상 r1c1 노드.

마찬가지로 를 추가합니다 my-custom-layout - 오른쪽 위 대상 r1c2 및, my-custom-layout - bottom 대상 r2c1 노드.

노트

이러한 사용자 지정 클래스는 css에서 이러한 응답형 그리드의 너비/높이를 설정하는 데 사용됩니다.

노트

원하는 총 격자선 수에 따라 응답형 격자선을 추가하거나 제거할 수 있습니다. 이 예제에서는 첫 번째 행에 2개의 격자와 두 번째 행에 1개의 격자를 표시하므로 총 3개의 반응형 격자(r1c1, r1c2, r2c1)가 있습니다.
복사 /libs/settings/wcm/designs/screens 끝 /apps/settings/wcm/designs/ 복사된 디자인의 이름을 로 변경합니다. 사용자 지정 템플릿 디자인.
다음으로 이동 /apps/settings/wcm/designs/custom-template-designs 속성 업데이트 jcr:title / 사용자 지정 템플릿 디자인 끝 customtemplate-design.
다음으로 이동 /apps/settings/wcm/designs/custom-template-designs static.css 파일을 만듭니다.

콘텐츠 복사 대상 static.css 파일:

    /*my-custom-layout styles*/
   .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
    width:20%;
    height: 36%;
   float: left !important;
   }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
   width:80%;
   height: 36%;
  float: left !important;
  }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
  width:100%;
  height: 64%;
  }

노트

사용자 지정 템플릿에 대한 요구 사항과 일치하도록 백분율을 업데이트할 수 있습니다.

다음으로 이동 /apps/<project>/templates/my-custom-layout/jcr:content 속성 업데이트 cq:designPath 끝 /apps/settings/wcm/designs/customtemplate-designs static.css에 구성된 스타일을 로드하려면

노트

복사 또는 붙여넣기가 아닌 모든 스타일을 입력하면 공백이 발생하여 css 스타일 문제가 발생할 수 있습니다.

결과 보기

AEM Screens 프로젝트에서 위의 사용자 지정 템플릿을 사용하려면 아래 단계를 따르십시오.

(1)단계에서 만든 Screens 프로젝트로 이동한 다음 채널 폴더를 삭제합니다.
클릭 만들기 작업 표시줄에서 템플릿을 선택합니다 Left20-LandscapeHD3Zone 다음에서 만들기 마법사.
맞춤화된 템플릿으로 채널을 만들고 나면 편집기에서 채널에 에셋을 추가할 수 있습니다. 다음 미리 보기는 사용자 지정 템플릿의 이미지를 보여 줍니다.