Drupal 8에서 사용자 정의 레이아웃 빌더를 만드는 방법

게시 됨: 2019-10-15

Drupal 8은 콘텐츠 작성자의 작업을 훨씬 쉽게 만들어줍니다. 가장 중요한 이유 중 하나는 핵심 Drupal 8에 Layout Builder 모듈이 추가된 것입니다. 간편한 드래그 앤 드롭 인터페이스, 미리보기 및 사용자 정의 기능을 통해 레이아웃 빌더는 곧 선호하는 페이지 작성 및 디자인 도구가 됩니다.

이전 기사에서 Drupal 8의 레이아웃 빌더 설치 및 사용을 시작하는 방법에 대해 썼습니다. 여기에서 고유한 요구 사항에 맞게 레이아웃 빌더를 사용자 지정하는 방법에 대한 지식을 공유하고 싶습니다.

drupal 웹사이트에 여러 블록이 있는 여러 섹션이 필요한 경우 Drupal에서 제공하는 기본 섹션을 사용할 수 없습니다. 이를 위해 사용자 정의 레이아웃을 만들 수 있습니다.

레이아웃 빌더 시작하기:

먼저 사용자 정의 레이아웃 빌더를 위한 사용자 정의 레이아웃 빌더 모듈을 생성할 것입니다. 폴더 이름을 custom_layout으로 지정하겠습니다. 다음으로 info.yml 파일을 생성합니다. 기본 키를 지정해야 합니다. drupal 8의 커스텀 레이아웃 빌더는 레이아웃 빌더 모듈에 의존합니다. 여기에서 지정해 보겠습니다.

사용자 정의 레이아웃
 암호:
이름: '사용자 정의 레이아웃'
유형: 모듈
설명: '레이아웃 구축을 위한 방법 제공'
코어: 8.x
패키지: '맞춤형'
종속성:
 - layout_builder:layout_builder

다음으로 사용자 정의 레이아웃의 영역을 지정하기 위해 레이아웃.yml 파일을 생성합니다.

  • custom_layout: 사용자 정의 레이아웃 빌더 레이아웃의 키입니다.
  • label: 사용자 정의 레이아웃 빌더 레이아웃에 대한 레이블입니다.
  • category: 사용자 정의 레이아웃 빌더 레이아웃의 카테고리입니다.
  • default_region: 기본 영역은 모든 유형의 레이아웃에서 기본적으로 사용되는 영역입니다.
  • icon_map: 레이아웃을 선택하는 동안 표시될 아이콘입니다.

예:

사용자 정의 레이아웃

위의 아이콘 맵을 만들려면 아래 단계를 따라야 합니다.

1. 첫 번째 행은 "Header Left" 및 "Header Right"입니다.
우리는 지정했습니다 - [ header_left, header_left, header_right ] - header_left는
두 번 정의되어 화면 전체 너비의 2 부분을 차지한 다음 header_right가 나머지 부분을 차지하므로 비율은 "75%/25%"가 됩니다.
2. 두 번째 행은 "콘텐츠" 및 "사이드바"입니다.
우리는 여기에 적용된 로직과 동일한 - [ content, content, sidebar ]를 지정했습니다.
3. 세 번째 행은 "왼쪽 바닥글" 및 "오른쪽 바닥글"입니다.
우리는 - [ footer_left, footer_right] - 2개 지역만 있기 때문에 각각 50%를 차지하도록 지정했습니다.

  • 영역: 레이아웃에 필요한 영역입니다. header_left, header_right, 사이드바, 콘텐츠, footer_left, footer_right가 있습니다.
사용자 정의 레이아웃 빌더

암호:

 사용자 정의 레이아웃:
 레이블: '맞춤 레이아웃'
 카테고리: '맞춤 레이아웃'
 default_region: 콘텐츠
 icon_map:
   - [header_left, header_left, header_right]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [바닥글_왼쪽, 바닥글_오른쪽]

 지역:
   header_left:
     레이블: 헤더 왼쪽
   header_right:
     레이블: 헤더 오른쪽
   사이드바:
     레이블: 사이드바
   콘텐츠:
     레이블: 콘텐츠
   footer_left:
     레이블: 바닥글 왼쪽
   footer_right:
     레이블: 바닥글 오른쪽

다음으로 레이아웃을 위한 html 구조를 생성해 보겠습니다. 우리는 모듈 내에 "layouts"라는 폴더를 생성할 것입니다. 폴더에서 "custom_layout"이라는 다른 폴더를 만듭니다.

그리고 그 폴더 안에 "custom-layout.html.twig"라는 twig 파일을 생성합니다.

사용자 정의 레이아웃 빌더


layout.yml에 나뭇가지 파일을 지정해야 합니다.

  • 경로: HTML 구조가 작성될 폴더를 지정합니다.
  • 템플릿: 경로 아래 이 레이아웃에 사용할 나뭇가지 템플릿을 지정합니다.

사용자 정의 레이아웃
 암호:

사용자 정의 레이아웃:
 레이블: '맞춤 레이아웃'
 경로: 레이아웃/custom_layout
 카테고리: '맞춤 레이아웃'
 템플릿: 사용자 정의 레이아웃
 default_region: 콘텐츠
 icon_map:
   - [header_left, header_left, header_right]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [바닥글_왼쪽, 바닥글_오른쪽]

 지역:
   header_left:
     레이블: 헤더 왼쪽
   header_right:
     레이블: 헤더 오른쪽
   사이드바:
     레이블: 사이드바
   콘텐츠:
     레이블: 콘텐츠
   footer_left:
     레이블: 바닥글 왼쪽
   footer_right:
     레이블: 바닥글 오른쪽

다음으로 우리는 "custom-layout.html.twig" 파일에 우리 지역에 대한 html 구조를 작성할 것입니다.
우리는 "layout"과 "layout--custom-layout"이 있는 클래스를 설정하고 그 안에 전체 콘텐츠를 래핑할 것입니다.
layout.yml에 정의된 영역을 지정하고 "{{ content.header_left }}"와 같은 영역에 액세스할 수 있습니다.

레이아웃 빌더

암호:

{% 세트 클래스 = [
'형세',
'레이아웃--맞춤 레이아웃',
] %}
{%인 경우 %}
<div{{ 속성.addClass(클래스) }}>
{% if content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% endif %}
{% if content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% endif %}
{% if content.content %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ 콘텐츠.콘텐츠 }}
</div>
{% endif %}
{% if content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ 콘텐츠.사이드바 }}
</div>
{% endif %}
{% if content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% endif %}
{% if content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% endif %}
</div>
{% endif %}

html 구조를 작성한 후에는 각 지역에 대한 css를 작성해야 합니다. 이제 사용자 정의 모듈에서 library.yml을 생성합니다.

레이아웃 빌더

암호:

 사용자 정의 레이아웃:
버전: 버전
CSS:
   주제:
     css/custom_layout.css: {}

layout.yml에 해당 라이브러리를 정의합니다.

레이아웃 빌러

암호:

 사용자 정의 레이아웃:
 레이블: '맞춤 레이아웃'
 경로: 레이아웃/custom_layout
 카테고리: '맞춤 레이아웃'
 템플릿: 사용자 정의 레이아웃
 라이브러리: custom_layout/custom_layout
 default_region: 콘텐츠
 icon_map:
   - [header_left, header_left, header_right]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [콘텐츠, 콘텐츠, 사이드바]
   - [바닥글_왼쪽, 바닥글_오른쪽]

 지역:
   header_left:
     레이블: 헤더 왼쪽
   header_right:
     레이블: 헤더 오른쪽
   사이드바:
     레이블: 사이드바
   콘텐츠:
     레이블: 콘텐츠
   footer_left:
     레이블: 바닥글 왼쪽
   footer_right:
     레이블: 바닥글 오른쪽

이제 region 블록의 스타일을 지정하는 것으로 시작하겠습니다. 다음과 같이 각 지역에 대한 구조를 지정합니다.

레이아웃 빌더

암호:

 .layout--맞춤 레이아웃 {
 디스플레이: -webkit-box;
 디스플레이: -ms-flexbox;
 디스플레이: 플렉스;
 -ms-flex-wrap: 랩;
 플렉스 랩: 랩;
}

@미디어 화면 및 (최소 너비: 40em) {
 .layout--custom-layout .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-플렉스: 0 1 70%;
   플렉스: 0 1 70%;
 }

 .layout--custom-layout .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-플렉스: 0 1 30%;
   플렉스: 0 1 30%;
 }

 .layout--custom-layout .layout__region--content {
   -webkit-box-flex: 0;
   -ms-플렉스: 0 1 70%;
   플렉스: 0 1 70%;
 }

 .layout--custom-layout .layout__region--sidebar {
   -webkit-box-flex: 0;
   -ms-플렉스: 0 1 30%;
   플렉스: 0 1 30%;
 }

 .layout--custom-layout .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-플렉스: 0 1 50%;
   플렉스: 0 1 50%;
 }

 .layout--custom-layout .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-플렉스: 0 1 50%;
   플렉스: 0 1 50%;
 }
}

다음으로 사용자 정의 모듈을 활성화하겠습니다.

레이아웃 빌더 모듈

구조 -> 콘텐츠 유형으로 이동하여 모든 콘텐츠 유형에 대해 " 디스플레이 관리 "를 클릭합니다. 지금은 ' article ' 콘텐츠 유형을 사용할 것입니다.

편집 레이아웃 빌더

사용자 정의 레이아웃을 선택한 후-

사용자 정의 레이아웃