После обновления 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.

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