Начиная с этой статьи мы будем делать свою тему на друпале. В этом разделе учебника мы разберем основы темы на друпале, где что лежит, как подключать и использовать CSS, JavaScript. Делать свою тему мы будем на основе темы-конструктора ядра Stable. Если вы хотите изучать друпал, то Stable отличное начало. Не стоит начинать с Bootstrap, у вас будут постоянно возникать вопросы и ошибки. В следующем разделе учебника мы уже с багажом умений созданий темы для Drupal 8, возьмемся и за Bootstrap.
Если у вас есть желание читать мануал на английском, то вот официальная документация, можете сравнивать с моим учебником и поправлять меня в комментариях или через Ctrl + Enter.
https://www.drupal.org/theme-guide/8
Создаем папку нашей темы
Все новые темы мы кладем в папку /themes. Вы можете класть папки по старинке в sites/all/themes, но лучше всего использовать новую структура файлов Drupal 8 и класть в папку /themes.
Я создам папку /themes/drupalbook, вы можете назвать вашу тему как вам угодно:
Создаем файл с основной информацией о теме drupalbook.info.yml
В папке нашей темы создаем файл имя_темы.info.yml:
Дальше стоит сделать небольшое отступление на то что такое формат YAML (здесь подробнее ссылка на статью).
https://ru.wikipedia.org/wiki/YAML
Обратите внимание на две вещи:
1) Не используйте табуляцию для отступов, только пробелы.
2) Отступы должны быть 1 или более пробелов. (то есть name: value, но не name:value).
Вставляем в файл drupalbook.info.yml:
Давайте разберем, что каждая строчка значит.
name - название нашей темы. Машинное имя нашей темы это название папки и файла drupalbook.info.yml - drupalbook.
type - тип проекта друпал, у нас это тема.
base theme - мы наследуемся от темы stable, если тема с нуля, то пишем false.
description - описание темы, которое отображается в админке.
core - версия ядра друпала, для которого эта тема.
libraries - здесь мы поключаем библиотеки к нашему модулю. Делаем мы это через файлик, который мы создадим далее drupalbook.libraries.yml. Обратите внимание на global-styling, мы будем использовать его в drupalbook.libraries.yml.
regions - регионы нашей темы. Обязательный регион content, через него выводится содержимое друпала. Также если название региона в два или более слова, не забудьте обернуть его в кавычки. Машинные имена регионов пишутся через нижнее подчеркивание.
Раз мы заявили об библиотеке нашей темы, так давайте ее создадим.
Файл drupalbook.libraries.yml
Добавляем следующие строки в drupalbook.libraries.yml:
А теперь давайте разберем все построчно:
global-styling - именно такое имя мы задали в drupalbook.info.yml
css - здесь мы подключаем CSS файлы, заметьте, что для print версии сайта мы указали media: print.
js - здесь подключаем javascript файлы. jQuery не является обязательным для друпала, поэтому если хотим использовать jQuery в нашем пользовательском JavaScript дописываем зависимость от него
- core/jquery
Создаем папки css, js и кладем туда файлы:
css/style.css
css/print.css
js/custom.js
Так как мы наследуемся от темы stable, то и шаблоны наследуются от нее. Теперь заходим на наш сайт в раздел Оформление:
/admin/appearance
чистим кеш и включаем нашу тему:
Теперь у нас на сайте наша новая тема Drupalbook:
