1. 1. Установка Bootstrap.
2. 2. Створення субтеми.
3. 3. Налаштування субтеми.
4. 4. Вибір типу підключення Bootstrap.
5. Використання CDN
6. Використання локальних файлів
7. 1. Відключення провайдера cdn.
8. 2. Підключення бібліотеку bootstrap.
9. 3. Встановити і налаштувати модуль bootstrap_library.

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

Ось і все, субтема створена!