После обновления Drupal до восьмой версии пришла пора написать о создании субтемы на на основе фреймворка Bootstrap 3.
Итак, создание темы для Drupal 8 состоит из следующих этапов:
- Установка Bootstrap.
- Создание субтемы.
- Настройка субтемы.
- Выбор типа подключения 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:
- Использование CDN.
- Локальные файлы.
Использование CDN
При использовании варианта c провайдером cdn, дополнительные настройки темы более не нужны. Большим плюсом этого варианта является то, что мы можем подключить 18 вариантов тем. Минусом - у варианта с использованием cdn более медленный отклик файлов стилей и скриптов. И, как следствие, меньшие возможности оптимизации и масштабирования проекта.

Использование локальных файлов
Для использования локальной версии библиотеки bootstrap необходимо:
- Отключить cdn.
- Подключить библиотеку bootstrap.
- Установить и настроить модуль 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.
- В селекторе выбора версии указать "Load localy".
- Указать версию файлов минимизированную или полную.
- Выбрать тему, к которой будет подключена bootstrap library.

Для темизации темы как в первом, так и во втором варианте, редактируется файл style.css.
Вот и всё, субтема создана!
- Оставить комментарий
- 4842 просмотра
"2. Подключение библиотеку botstrap." {botstrap} -наверно нужно добавить букву "о"?
Если вот тут вставить новый регион
regions:
navigation_top: 'Navigation_top'
navigation: 'Navigation'
то в блоках Navigation_top выводится, а главной страницы регион отсутствует.
Подскажите как его настроить для отображения.
Для создания региона нужно следующие.
1. THEMENAME.info.yml - объявить его, что вы уже сделали.
2. Вставить в шаблон page.html.twig такую конструкцию:
{% if page.navigation_top %}
{{ page.navigation_top }}
{% endif %}
3. Очистить кеш.
Спасибо за оперативный ответ!
А как тепереча правильно прописать стили для нового региона.
По умолчанию он отображается на всю страницу ...
Как это сделать корректно?
Сделал вот так:
{% if page.navigation_top %}
{{ page.navigation_top }}
{% endif %}
Не отображаются теги (тут) странно...
{% if page.navigation_top %}
-
-
-
{{ page.navigation_top }}
-
-
-
{% endif %}
Третия попытка, без тегов
{% if page.navigation_top %}
div class='container'
div class='row'
div class='col-sm-12'
{{ page.navigation_top }}
/div
/div
/div
{% endif %}
Спасибо большое, помогли. Ломал голову в основном о переименовании файла THEMENAME.starterkit.yml и ещё полезно про подключение библиотеки.
После проделанных манипуляций вышла ошибка в админке сайта "На сайте произошла непредвиденная ошибка. Пожалуйста, повторите попытку позже."
Вот бы ещё про less статью - был бы весьма благодарен. Спасибо очень полезно. И всётаки какие есть преимущества у Less?
"Скачать тему оформления Botstrap." {Botstrap} -наверно нужно добавить букву "о"?