Создание темы на основе Bootstrap 3 для Drupal 8

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

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

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

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

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

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

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

cnd files

Копируем папку 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, более медленный отклик файлов стилей и скриптов. И как следствие меньшие возможности оптимизации и маштабирования проекта.

cdn varriant

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

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

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

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

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

отключение cdn

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

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

boostrap

 

Скаченную библиотеку следует переименовать из 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
Настройки bootstrap library

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

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

 

Александр 20 марта, 2016

"Скачать тему оформления Botstrap." {Botstrap} -наверно нужно добавить букву "о"?

Александр 20 марта, 2016

"2. Подключение библиотеку botstrap." {botstrap} -наверно нужно добавить букву "о"?

Александр 18 апреля, 2016

Если вот тут вставить новый регион
regions:
navigation_top: 'Navigation_top'
navigation: 'Navigation'

то в блоках Navigation_top выводится, а главной страницы регион отсутствует.
Подскажите как его настроить для отображения.

SuperAdmin 18 апреля, 2016

Для создания региона нужно следующие.
1. THEMENAME.info.yml - объявить его, что вы уже сделали.
2. Вставить в шаблон page.html.twig такую конструкцию:
{% if page.navigation_top %}

{{ page.navigation_top }}

{% endif %}
3. Очистить кеш.

Александр 19 апреля, 2016

Спасибо за оперативный ответ!

А как тепереча правильно прописать стили для нового региона.
По умолчанию он отображается на всю страницу ...
Как это сделать корректно?

Александр 19 апреля, 2016

Сделал вот так:
{% if page.navigation_top %}

{{ page.navigation_top }}

{% endif %}

Александр 19 апреля, 2016

Не отображаются теги (тут) странно...
{% if page.navigation_top %}
-
-
-
{{ page.navigation_top }}
-
-
-
{% endif %}

Александр 19 апреля, 2016

Третия попытка, без тегов
{% if page.navigation_top %}
div class='container'
div class='row'
div class='col-sm-12'
{{ page.navigation_top }}
/div
/div
/div
{% endif %}

SuperAdmin 19 апреля, 2016

Могу предложить такой вариант решения. Из базовой темы bootstrap скопировать шаблон региона или шаблон блока. Добавить в папку templates своей темы. И настроить как удобно.

Алексей 18 апреля, 2016

Спасибо большое, помогли. Ломал голову в основном о переименовании файла THEMENAME.starterkit.yml и ещё полезно про подключение библиотеки.

Дмитрий 10 августа, 2016

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

SuperAdmin 11 августа, 2016

Предположу пропущен какой то шаг. Попробуйте ещё раз создать тему.

Гость 05 октября, 2016

Вот бы ещё про less статью - был бы весьма благодарен. Спасибо очень полезно. И всётаки какие есть преимущества у Less?

Оставить комментарий

Похожие материалы