Друпал - это не только CMS, это платформа для разработки вашего веб-приложения. Если вы решили создать свою тему оформления, то вы найдете несколько фреймворков для этого. В этой статье мы рассмотрим самые популярные из них.

Bootstrap
https://www.drupal.org/project/bootstrap
http://getbootstrap.com/

На друпале очень мало готовых красивых и функциональных тем оформления. Но друпал очень легко интегрируется со всеми сторонними библиотеками и сервисами. Так например вы можете делать свою тему на основе Bootstrap и использовать всю мощь друпала. В этом разделе сайта drupalbook.ru мы разберем как создавать темы быстро и удобно из любого макета.

PSD макет:
http://drupalbook.ru/sites/default/files/blueasy-freebie.zip

Очень часто нас не устраивает шаблон Views, поэтому мы можем переопределить шаблоны для Views. К сожалению пока нет UI для поиска нужного шаблона во Views, но мы можем использовать паттерны для переопределения шаблонов.

Подробнее про темизацию Views смотрите в этом видео:

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

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

Подробнее о паттернах в этой статье:

Для начала давайте вернемся к тому как подключать кастомные javascript файлы к нашей теме. В файле .libraries.yml нужно подключить js:

Для того чтобы у вас появился новый регион, через который вы сможете выводить блоки, вам нужно:

• Добавить данные о регионе в файл theme.info.yml
• Отредактировать page.html.twig, добавив в него вывод нового региона

Добавляем данные о регионе в файл drupalbook.info.yml

Все регионы объединены ключем regions:

Мы уже рассмотрели, что в 8ом друпале у нас встроен Twig и как им пользоваться. В этой статье мы разберем как работать с шаблонами друпала, какие есть шаблоны в теме Stable, как переопределять шаблоны Stable и как переопределять шаблоны различных сущностей друпала.

Итак, давайте начнем с шаблонов темы Stable, перейдем в папку templates темы Stable:

скриншот

Шаблоны разбиты по функциональному признаку:

В прошлых уроках мы уже подключили CSS к нашей теме. Для этого мы указали в файле drupalbook.info.yml:

Дальше мы создали файл drupalbook.libraries.yml, где уже указали какой файл CSS подключать:

Если вы откроете файл шаблона page.html.twig темы Stable:

/core/themes/stable/templates/layout/page.html.twig

То вы обнаружите, что он отличается от шаблона Drupal 7 page.tpl.php, во-первых, расширением и во-вторых, обилием фигурных скобок {}. Это все из-за того что в Drupal 8 используется шаблонизатор Twig.

Начиная с этой статьи мы будем делать свою тему на друпале. В этом разделе учебника мы разберем основы темы на друпале, где что лежит, как подключать и использовать CSS, JavaScript. Делать свою тему мы будем на основе темы-конструктора ядра Stable. Если вы хотите изучать друпал, то Stable отличное начало. Не стоит начинать с Bootstrap, у вас будут постоянно возникать вопросы и ошибки. В следующем разделе учебника мы уже с багажом умений созданий темы для Drupal 8, возьмемся и за Bootstrap.

В друпал 7 можно было быстро и легко сделать под тему на Zen и начать верстать свой сайт. На 8ом друпале тоже есть несколько тем-конструкторов для создания своих тем. Но прежде чем делать на них подтемы нужно будет немного разобраться, где что лежит.

Разработчики Drupal 8 предлагают нам рассмотреть тему-пример Stark. Эта тема добавлена в друпал, только для ознакомления как устроена тема. Давайте посмотрим что лежит внутри этой темы:

Скриншот