После обновления Drupal до восьмой версии, пришла пора написать о создании субтемы на на основе фреймворка Bootstrap 3.

Итак. Создание темы для Drupal 8, состоит из следующих этапов:

1. Установка Bootstrap
2. Создание субтемы
3. Настройка субтемы
4. Выбор типа подключения Bootstrap

1. Установка Bootstrap

Скачать тему оформления Bootstrap. Тема должна располагаться мой_домен\themes​\. Тему активировать не нужно.

2. Создание субтемы.

Внутри темы Bootstrap находиться папка starterkits. В этой папке лежат 2 варианта заготовок для субтемы CDN и LESS. Я буду использовать вариант CDN.

Копируем папку CDN в папку с темами мой_домен\themes​\. Далее начинается настройка темы.

3. Настройка субтемы.

В drupal 8  структура шаблонов значительно изменилось, рассмотрим подробнее каждый файл. Начнём с того что, переименуем папку заготовку нашей темы cdn, например в bootstrap_drupal. ​ Переходим в  bootstrap_drupal и переименовываем следующие файлы.

• THEMENAME.starterkit.yml     в  bootstrap_drupal.info.yml
• THEMENAME.theme                 в  bootstrap_drupal.theme
• THEMENAME.libraries.yml      в  bootstrap_drupal.libraries.yml 

Файл  bootstrap_drupal.info.yml отвечает за настройки темы, редактируем его следующим образом:

core: 8.x
type: theme
base theme: bootstrap

name: 'Bootstrap_drupal Sub-Theme (CDN)'
description: 'My theme.'
package: 'Bootstrap'
 

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  node_bottom: 'Node bottom'

libraries:
  - 'bootstrap_drupal/global-styling'

Изменениям подверглись следующие строки:

name: 'Bootstrap_drupal Sub-Theme (CDN)'  - добавили название своей темы

description: 'My theme.'   - произвольное описание темы

libraries:   - 'bootstrap_drupal/global-styling'   - подключена библиотека стилей для темы.

Файл bootstrap_drupal.theme - файл для дополнительных настроек темы. Аналог файла template.php в drupal 7.  Например в этом файле можно объявлять переменные при темизации как я описывал в одной из прошлых статей Путь к изображениям в Drupal 8.

Файл bootstrap_drupal.libraries.yml  - служит для подключения дополнительных библиотек, файлов css и javascrit.  Я для примера создал папку js в субтеме и поместил туда файл myscript.js. В результате получим следующие:

global-styling:
  css:
    theme:
      css/style.css: {}
  js:
    js/myscript.js: {}

Где объявлено что style.css и myscript.js подключены к теме. На этом  редактирование файлов темы заканчивается.

4. Выбор типа подключения Bootstrap

Имеются два способа подключения Bootstrap:

1. Использование CDN
2. Локальные файлы

Использование CDN

При использовании варианта c провайдером cdn, дополнительные настройки темы более не нужны. Большим плюсом   этого варианта является то что позоляет подключить 18 вариантов тем. Минусом - у варианта с использованем cdn, более медленный отклик файлов стилей и скриптов. И как следствие меньшие возможности оптимизации и маштабирования проекта.

Использование локальных файлов. 

Для использования локальной версии библиотеки bootstrap необходимо:

1. Отключить cdn
2. Подключить библиотеку bootstrap
3. Установить и настроить модуль bootstrap_library

1. Отключение провайдера cdn

Для отключения провайдера cdn нужно в настройках темы, в разделе расширенные перевести селектор в режим "Не указано" согласно изображению ниже.

2. Подключение библиотеку bootstrap.

Итак, перед тем как скачать файлы фреймворка bootstrap необходимо создать папку libraries в корне сайта, если на конечно не создана ранее. Теперь осталось скачать файлы библиотеки bootstrap. Скачать можно отсюда http://getbootstrap.com/getting-started/#download

Скаченную библиотеку следует переименовать из bootstrap-3.3.6-dist в bootstrap. Файлы в библиотеке должны иметь следующую стуртуру.

my_site/libraries/bootstrap/
├── css/
├── fonts/   
└── js/
     

3. Установить и настроить модуль bootstrap_library.

Для подключения библиотеки boostrap к субтеме поможет следующий модуль bootstrap_library. Устанавливается он как и все иные модули. После установки  настраиваем модуль, путь к конфигурации  /admin/config/development/bootstrap_library. 

1. В селекторе выбора версии указать "Load localy".
2. Указать версию файлов минифицированную или полную.
3. Выбрать тему к которой будет подключена bootstrap library

Для темизации темы как в первом так и во втором варианте редактируется файл style.css.

Вот и всё субтема создана!