테마 만들기

테마를 맨 처음부터 만들어 본다.

• 반응형을 테마를 쉽게 제작하기 위해 부트스트랩을 사용한다.
• 테마명은 mulbangul로 한다.
• 어떠한 형식의 레이아웃도 제작할 수 있도록, 영역을 세분화해서 만든다.
• 테마 파일들은 기본적으로 필요한 내용을 먼저 작성하고, 만들어가면서 수정/보완 하므로 테마 파일은 테마가 완성되어야 온전한 내용을 볼 수 있다.

테마 만들기 문서

원본: https://www.drupal.org/docs/8/theming

한글 번역: https://drupalers.kr/node/291

테마 루트디렉토리 생성

테마명과 동일한 "mulbangul"이라는 디렉토리를 "themes/custom/" 디렉토리 아래 만든다.

테마의 기본 구조 만들기

테마의 기본 구조가 되는 디렉토리와 파일을 아래와 같이 생성한다. 파일의 내용은 차차 만들어 갈 것이므로, 일단은 내용이 없는 빈 파일로 만든다.

이미지 파일도 나중에 실제로 사용할 것으로 바꿀 것이므로, 일단은 빈 파일로 만들어 둔다.

  |-mulbangul.breakpoints.yml
  |-mulbangul.info.yml
  |-mulbangul.libraries.yml
  |-mulbangul.theme
  |-config
  |  |-install
  |  |  |-mulbangul.settings.yml
  |  |-schema
  |  |  |-mulbangul.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-mulbangul.js
  |-images
  |  |-buttons.png
  |-logo.png
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

테마를 정의하는 mulbangul.info.yml 파일 생성하기

https://drupalers.kr/node/292 을 참조하여 다음과 같은 내용으로 mulbangul.info.yml 의 내용을 작성한다.

테마의 영역은 자신이 원하는 구조를 잘 생각해서 만드는게 좋다.

##########################################
# 테마를 정의합니다.

name: Mulbangul
type: theme
description: '물방울 전용 테마'
core: 8.x
project: 'For Mulbangul'

base theme: classy


regions:
  slideout: 'Slideout'
  header_top_highlighted_first: 'Header Top Highlighted First'
  header_top_highlighted_second: 'Header Top Highlighted Second'
  header_top_first: 'Header Top First'
  header_top_second: 'Header Top Second'
  header_first: 'Header First'
  header: 'Header Second'
  header_third: 'Header Third'
  banner: 'Banner'
  system_messages: 'System Messages'
  content_top: 'Content Top'
  content_top_highlighted: 'Content Top Highlighted'
  content: 'Content'
  sidebar_first: 'Sidebar First'
  sidebar_second: 'Sidebar Second'
  content_bottom_first: 'Content Bottom First'
  content_bottom_second: 'Content Bottom Second'
  featured_top: 'Featured Top'
  featured: 'Featured'
  featured_bottom: 'Featured Bottom'
  sub_featured: 'Sub Featured'
  highlighted_top: 'Highlighted Top'
  highlighted: 'Highlighted'
  footer_top_first: 'Footer Top First'
  footer_top_second: 'Footer Top Second'
  footer_first: 'Footer First'
  footer_second: 'Footer Second'
  footer_third: 'Footer Third'
  footer_fourth: 'Footer Fourth'
  footer_fifth: 'Footer Fifth'
  footer_bottom: 'Footer Bottom'
  sub_footer_first: 'Subfooter First'
  footer: 'Subfooter Second'
  hidden_blocks_collection: 'Hidden blocks collection'

테마에서 로드할 라이브러리 정의하기

테마에서 로드할 라이브러리는 mulbangul.libraries.yml 에 정의합니다.

라이브러리에는 보통 자바스크립트(js), 스타일시트(css), 폰트 등이 있습니다.

자세한 내용은 mulbangul.libraries.yml 을 참조합니다.