8.3. Создание своей Drupal 8 темы на основе темы Stable.

Начиная с этой статьи мы будем делать свою тему на друпале. В этом разделе учебника мы разберем основы темы на друпале, где что лежит, как подключать и использовать 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:

drupalbook.info.yml

Дальше стоит сделать небольшое отступление на то что такое формат YAML (здесь подробнее ссылка на статью). 

https://ru.wikipedia.org/wiki/YAML

Обратите внимание на две вещи:
1) Не используйте табуляцию для отступов, только пробелы.
2) Отступы должны быть 1 или более пробелов. (то есть name: value, но не name:value).

Вставляем в файл drupalbook.info.yml:

name: Drupalbook
type: theme
base theme: stable
description: My first Drupal 8 theme.
core: 8.x
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # Этот регион обязателен
  sidebar_first: 'Sidebar first' # Не забываем добавить кавычки
  footer: Footer

Давайте разберем, что каждая строчка значит.

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:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

А теперь давайте разберем все построчно:

global-styling - именно такое имя мы задали в drupalbook.info.yml

css - здесь мы подключаем CSS файлы, заметьте, что для print версии сайта мы указали media: print.

js - здесь подключаем javascript файлы. jQuery не является обязательным для друпала, поэтому если хотим использовать jQuery в нашем пользовательском JavaScript дописываем зависимость от него

dependencies:
  - core/jquery

 Создаем папки css, js и кладем туда файлы:
css/style.css
css/print.css
js/custom.js

Так как мы наследуемся от темы stable,  то и шаблоны наследуются от нее. Теперь заходим на наш сайт в раздел Оформление:

/admin/appearance

чистим кеш и включаем нашу тему:

theme drupal 8

Теперь у нас на сайте наша новая тема Drupalbook:

drupal 8

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Насчет не влизая в дебри вряд

Насчет не влизая в дебри вряд ли получится, но можете попробовать нажать F12, откроется DOM-инспектор, через него можно будет посмотреть нужный класс или id блока нужного и потом дописать CSS в файл style.css или другой файл .css вашей темы:

#header {
  height: 300px;
}

 Вот видео по DOM-инспектору в chrome:

https://www.youtube.com/watch?v=Gk6BljF60RI

Вы не описали строку

Вы не описали строку
theme:

В других темах на этой позиции встречается много всяких разных слов. На что они влияют и как определяются?

Обычно вы пишите все стили

Обычно вы пишите все стили для сайта на основе Bootstrap, Zen, Omega сами и с нуля как вам нужно. Каждая тема по своему организует работу с CSS, но обычно это LESS/SCSS файлы из которых компилируется CSS. В каждой теме есть readme.txt, а также на youtube есть много видео о том как каждая тема на Drupal настраивается.

Доброго! Только начал

Доброго! Только начал ковырять друпал. Создаю тему. И вот вопрос по пункту "Создаем папки css, js и кладем туда файлы:"
Файлы свои пустые делать или откуда-то конкретно заимствовать ручками?

Здравствуйте, при добавлении

Здравствуйте, при добавлении в .libraries.yml

dependencies:
  - core/jquery

и последующей загрузке сайта появляется ошибка:

Fatal error: Cannot use assign-op operators with overloaded objects nor string offsets in C:\OpenServer\domains\drupal8\core\lib\Drupal\Core\Asset\LibraryDiscoveryParser.php on line 138