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

А у меня после выполнения

А у меня после выполнения всех инструкций и попытки зайти в любое меню, вот такая бяка:
На сайте произошла непредвиденная ошибка. Пожалуйста, повторите попытку позже

Убираю папку с темой, все снова работает.

Вчера вам писал, ответа не

Вчера вам писал, ответа не было, я уже разобрался, по официальной документации. Версия 8.4.
Вместо theme: надо писать component: и не в коем случае не ставим никакие кавычки, тогда все работает.

Здравствуйте. Делаю все так

Здравствуйте. Делаю все так как у вас в статье, он темы стэйбл на сайте дропала уже нет..по этому я делаю все тоже самое создаю два юмл файла, но после того как изменяю параметр base teame выдаёт такую ошибку на странице изменения тем "На сайте произошла непредвиденная ошибка. Пожалуйста, повторите попытку позже." подскажите что сделать? и что вставлять в папки стилей и джэс если у меня их пока нет,

Скачал последние версии

Скачал последние версии друпала, тема stable лежит здесь:

/core/themes/stable/

Нужно смотреть таблицу watchdog, там друпал пишет ошибки которые происходят на сайте. Посмотреть можно через adminer или phpmyadmin.