간단한 9단계로 맞춤형 Drupal 9 테마를 만드는 방법

Drupal 9는 개발자와 사이트 소유자에게 매력적인 디지털 경험을 구축하기 위해 조합할 수 있는 맞춤형 구성 요소를 유연하게 생성할 수 있도록 합니다. 테마는 웹사이트의 시각적 모양을 나타내는 Drupal의 디자인 블록입니다. Drupal 9에는 핵심 테마와 타사 테마 중에서 선택할 수 있으며 가장 인기 있는 것은 Bootstrap 테마입니다. 그러나 Drupal 9 테마 중 어느 것도 마음에 들지 않는다면 아마도 사용자 정의 테마 개발을 살펴봐야 할 것입니다. Drupal 9 사용자 정의 테마를 사용하면 정확한 요구 사항에 맞게 디자인을 조정할 수 있습니다.

Drupal 9는 Drupal의 프론트엔드 테마로 Bartik을 제공하지만, Drupal 9 사용자 정의 테마가 필요한 경우 고유한 Drupal 9 테마 개발을 생성하여 Drupal 테마 기술을 향상시킬 수 있습니다. Drupal 9 테마 개발을 실제로 이해하는 가장 쉬운 방법은 처음부터 연습하고 만드는 것입니다.

Drupal 8은 이제 EOL에 도달했습니다. 이제 Drupal 9로 마이그레이션할 때입니다. 그러나 Drupal 8에서 사용자 정의 테마를 만드는 데 여전히 노력하고 있다면 이 단계는 Drupal 8 설정에서도 작동합니다.

맞춤형 Drupal 9 테마 개발 시작하기

Drupal 웹사이트를 위한 Drupal 9 테마 만들기를 시작해 보겠습니다.
STEP 1 : 먼저 'web/themes/custom' 폴더에 커스텀 테마를 생성해야 합니다. 폴더 이름을 custom_theme 으로 지정하겠습니다.

2단계: 다음으로 info.yml 파일 을 생성해야 합니다 . 기본 키를 지정해야 합니다. 여기에서 지정해 보겠습니다.

 암호:
이름 : 사용자 정의 테마
유형 : 테마
설명 : '내 웹사이트의 사용자 정의 테마.'
패키지 : 기타
core_version_requirement : ^8 || ^9

3단계 : 이제 생성해 보겠습니다. 사용자 정의 Drupal 9 테마에 필요한 모든 라이브러리(CSS 및 JS)를 지정하는 라이브러리.yml 파일. 또한 여기에 링크할 CSS 및 JS 디렉토리와 해당 파일을 생성합니다. 라이브러리 이름을 global-styling 으로 지정 하겠습니다 .

 암호:
글로벌 스타일링 :
버전 : 1.x
js :
js/script.js : {}
CSS :
테마 :
css/style.css : {}

4단계: library.yml 파일을 만든 후 테마에 연결해야 합니다. 이를 위해 info.yml 파일에 추가할 것입니다. 그러면 전체 테마에 적용됩니다.

 암호:
라이브러리 :
- custom_theme/global-styling

따라서 키는 라이브러리 이고 경로는 테마 이름 - ' custom_theme ' / 라이브러리 이름 - 'global-styling'이 됩니다.

5단계: 다음으로 '기본 테마'를 상속해야 합니다. 이 경우 Drupal의 핵심 테마인 ' 고급스러운 ' 테마를 상속합니다. 따라서 키는 info.ym l의 기본 테마가 됩니다.

 암호:
기본 테마 : 고급

6단계: 이제 테마의 '지역'을 정의합니다. info.yml 에서 'regions' 키 아래에 정의해야 합니다.

 암호:
지역 :
브랜딩 : 브랜딩
네비게이션 : 메인 네비게이션
검색 : 검색
추천 : 추천
내용 : 내용
right_sidebar : 오른쪽 사이드바
footer_first : 바닥글 우선
footer_second : 바닥글 초
footer_third : 바닥글 세 번째
footer_bottom : 바닥글 하단

'지역' 키에서 맞춤형 Drupal 테마에 대한 지역을 정의할 수 있습니다. 여기,
branding: 소문자여야 하는 지역의 ID입니다.
브랜딩: 대문자가 될 수 있는 지역의 이름입니다.

7단계: 사용자 지정 Drupal 테마에 대한 영역을 정의한 후 고급 테마 대신 '영역'을 가져오기 위해 page.html.twig 를 재정의해야 합니다. 우리는 page.html.twig 를 생성할 템플릿/시스템 디렉토리를 생성할 것입니다.

 암호:
< 헤더 aria-label ="사이트 헤더" 클래스 ="헤더" id ="헤더" 역할 ="배너" >
{{ 페이지.브랜딩 }}
{{ 페이지.내비게이션 }}
{{ 페이지.검색 }}
</ 헤더 >
< 섹션 클래스 ="기능" id ="기능" 역할 ="보완" >
{{ 페이지.추천 }}
</ 섹션 >
< 섹션 클래스 ="메인" id ="메인" >
< 메인 aria-label ="사이트 메인 컨텐츠" 클래스 ="컨텐츠" id ="컨텐츠" 역할 ="메인" >
{{ 페이지.콘텐츠 }}
</ 메인 >
< 제쳐두고 클래스 ="right--sidebar" id ="사이드바" 역할 ="상보" >
{{ page.right_sidebar }}
</ 제쳐두고 >
</ 섹션 >
< 바닥글 aria-label ="사이트 바닥글" 클래스 ="바닥글" id ="바닥글" 역할 ="콘텐츠 정보" >
< div 클래스 ="바닥글--상단" >
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
</ div >
< div 클래스 ="바닥글--하단" >
{{ page.footer_bottom }}
</ div >
</ 바닥글 >

page.html.twig에서 지역에 대한 HTML 구조를 생성합니다. {{ page.branding }}에서 볼 수 있듯이 – 여기,

page - 페이지에서 '영역'을 렌더링하는 키입니다.

branding- 우리가 info.yml 파일에 정의한 지역입니다.

이제 영역을 만들고 페이지에 렌더링했습니다.

8단계: Drupal 사이트에서 Appearance 로 이동합니다. 제거된 테마 섹션에 있는 사용자 지정 Drupal 테마를 볼 수 있습니다.

사이트에 Drupal 테마를 설치하려면 ' 설치 및 기본값으로 설정 ' 옵션을 클릭해야 합니다.

설치 후 Structure -> Block Layout 으로 이동합니다. 사용자 정의 테마는 블록 레이아웃 아래에 나타납니다.

' 블록 영역 표시(사용자 정의 테마) '에 대한 링크가 표시됩니다. 링크를 클릭하십시오. info.yml에 선언하고 page.html.twig에 추가한 모든 지역을 볼 수 있습니다.

9단계: 이제 Drupal 9에서 테마 설정이 거의 완료되었습니다! 다음으로, 디자인에 따라 각 영역의 CSS에 스타일을 적용해야 합니다. 이 경우 CSS 를 사용합니다. 원하는 경우 SCSS를 사용할 수도 있습니다. 브랜딩 영역을 검사하기만 하면 됩니다. 영역 클래스를 확인한 다음 해당 클래스에 CSS를 추가해야 합니다.

 . 헤더 {
 디스플레이 : 플렉스 ;
 justify-content : 사이의 공백 ;
 패딩 : 10 픽셀 ;
}


. 헤더 . 지역 {
 패딩 : 5 픽셀 ;
}


. 헤더 . 지역 브랜딩 {
 플렉스 : 0 1 20 %;
}


. 헤더 . 지역 탐색 {
 플렉스 : 0 1 50 %;
}


. 헤더 . 지역 검색 {
 플렉스 : 0 1 30 %;
}


. 지역 . 블록 영역 {
 패딩 : 15 픽셀 ;
}


. 추천 {
 패딩 : 40 픽셀 20 픽셀 ;
 배경색 : 인도적색 ;
}
		



. 메인 {
 패딩 50 PX 0;
 디스플레이 : 플렉스 ;
 justify-content : 사이의 공백 ;
}


. 메인 . 내용 {
 플렉스 : 0 1 65 %;
}


. 메인 . 오른쪽 -- 사이드바 {
 플렉스 : 0 1 30 %;
}


. 바닥글-상단 {
 디스플레이 : 플렉스 ;
 justify-content : 사이의 공백 ;
 패딩 : 10 픽셀 ;
}


. 바닥글-상단 . 지역 {
 패딩 : 5 픽셀 ;
}


. 영역 바닥글 우선 , . 지역 바닥글 초 , . 지역 바닥글 세 번째 {
 플렉스 : 0 1 30 %;
}

결과:

Drupal 9 사용자 정의 테마가 준비되었습니다!

후크를 작성하거나 나뭇가지 파일에 대한 제안을 작성해야 하는 경우 사용자 정의 Drupal 테마에 .theme 파일을 추가할 수 있습니다(아래 참조).