На черзі — новий блог від одного з наших Drupal-розробників про Drupal 8. Вони уже присвятили немало постів новій версії CMF — про створення модулів у Drupal 8, темізацію, конфігурацію, створення попапів, використання Twig, модуль Commerce 2.x. Сьогодні ж розберемося, як створити сабтему Bootstrap у Drupal 8. Почнемо!
Bootstrap — найпопулярніший набір безкоштовних інструментів для створення зовнішнього вигляду та інтерактивності веб-сторінок.
На сайті https://www.drupal.org/project/bootstrap є стабільний реліз фреймворку для Drupal 7 і 8.
Зараз ми розглянемо процес підключення Bootstrap до вашого сайту на Drupal 8.
Крок 1: завантажте Bootstrap
Процес завантаження:
- за допомогою Drush
$ drush dl bootstrap
- АБО, якщо Drush не встановлено, то завантажте архів з сайту https://www.drupal.org/project/bootstrap, та розпакуйте його за шляхом YOUR_SITE_NAME/themes/ (в цьому прикладі boots/themes/ ).
УВАГА!!! Не вмикайте завантажену вами тему в Drupal UI!
Крок 2: створіть свою саб-тему Bootstrap
Після того як ви розпакували завантажений раніше архів з Bootstrap у вказану директорію, вона має виглядати так:
Відкрийте файловий менеджер, знайдіть директорію з вашим сайтом та відкрийте папку starterkits/ (YOUR_SITE_NAME/themes/contrib/bootstrap/starterkits/), тут ви побачите три папки:
Вони відрізняються тим, що:
● less — має вбудовану підтримку однойменного препроцесора Less (компілятор, та папку з файлом style.less)
● sass — відповідно має підтримку SASS
● cdn — не має файлів для жодного з вказаних препроцесорів
Наступним кроком вам потрібно скопіювати одну з цих папок в директорію YOUR_SITE_NAME/themes/custom/
Для наглядного прикладу, я скопіюю теку cdn/
Крок 3: налаштуйте саб-тему (перейменуйте)
1. Перейменуйте папку cdn/ → YOUR_THEME_NAME (напр. boots_theme)
Важливо!!! Ім’я папки з вашою темою має бути в такому форматі, як в прикладі, тому що воно є машинним ім’ям теми.
2. Відкрийте папку з темою та перейменуйте наступні файли:
● THEMENAME.libraries.yml в boots_theme.libraries.yml (всі бібліотеки вказуються в цьому файлі)
● THEMENAME.starterkit.yml в boots_theme.info.yml
● THEMENAME.theme в boots_theme.theme
● config/install/THEMENAME.settings.yml в config/install/boots_theme.settings.yml (використовується для перебивання існуючих налаштувань)
● config/schema/THEMENAME.schema.yml в config/schema/boots_theme.schema.yml (схема для файлу конфігурації налаштування теми даної теми)
3. Змініть дані в boots_theme.info.yml
core: 8.x type: theme base theme: bootstrap name: 'Boots' // Може відрізнятися від машинного імені (цю назву ви побачите при включенні теми в Drupal UI). description: 'Uses the Bootstrap framework LESS source files and must be compiled (not for beginners).' 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' libraries: - 'boots_theme/global-styling' - 'boots_theme/bootstrap-scripts'
Крок 4: встановіть тему в Drupal UI (в адмінку Drupal )
Відкрийте сторінку /admin/appearance/ та встановіть вашу саб-тему (Install and set to default).
Enjoy =)
Якщо ви виконуєте маніпуляції зі своєю правильно встановленою саб-темою і не бачите ніяких змін, то причина може ховатися в кешуванні.
Notice: Щоб почистити кеш в Drupal 8:
$ drush cache-rebuild
Також причиною може бути увімкнена агрегація стилів (її можна вимкнути в Drupal UI за шляхом admin/config/development/performance).
В майбутньому я рекомендую перш ніж завантажувати фреймворк, для уникнення плутанини, всередині папки themes/ створити дві директорії (custom/ та contrib/):
Notice: команди виконуються в кореневій папці сайту, сайт на якому приведений приклад, називається “boots”:
$ mkdir themes/contrib/ $ mkdir themes/custom/
a. В директорію contrib/ ми завантажуємо контрибну тему (drupal.org)
b. В директорії custom/ розташовані наші саб-теми
Висновок
Дотримуючись цих кроків, ви зможете налаштувати і встановити вашу тему на основі Bootstrap всього лише за лічені хвилини).