Bootstrap для Drupal: як створити сабтему в Drupal 8

08.11.2016
Bootstrap для Drupal: як створити сабтему в Drupal 8
Автор:

На черзі — новий блог від одного з наших 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 у вказану директорію, вона має виглядати так:

    Bootstrap для Drupal: як створити сабтему в Drupal 8

    Відкрийте файловий менеджер, знайдіть директорію з вашим сайтом та відкрийте папку starterkits/ (YOUR_SITE_NAME/themes/contrib/bootstrap/starterkits/), тут ви побачите три папки:

    Bootstrap для Drupal: як створити сабтему в Drupal 8

    Вони відрізняються тим, що:

    less — має вбудовану підтримку однойменного препроцесора Less (компілятор, та папку з файлом style.less)

    sass — відповідно має підтримку SASS

    cdn — не має файлів для жодного з вказаних препроцесорів

    Наступним кроком вам потрібно скопіювати одну з цих папок в директорію YOUR_SITE_NAME/themes/custom/

    Для наглядного прикладу, я скопіюю теку cdn/

    Bootstrap для Drupal: як створити сабтему в Drupal 8

    Крок 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).

    Bootstrap для Drupal: як створити сабтему в Drupal 8

    Enjoy =)

    Bootstrap для Drupal: як створити сабтему в Drupal 8

    Якщо ви виконуєте маніпуляції зі своєю правильно встановленою саб-темою і не бачите ніяких змін, то причина може ховатися в кешуванні.

    Notice: Щоб почистити кеш в Drupal 8:

     $ drush cache-rebuild 

    Також причиною може бути увімкнена агрегація стилів (її можна вимкнути в Drupal UI за шляхом admin/config/development/performance).

    Bootstrap для Drupal: як створити сабтему в Drupal 8

    В майбутньому я рекомендую перш ніж завантажувати фреймворк, для уникнення плутанини, всередині папки themes/ створити дві директорії (custom/ та contrib/):

    Notice: команди виконуються в кореневій папці сайту, сайт на якому приведений приклад, називається “boots”:

     $ mkdir themes/contrib/
    $ mkdir themes/custom/

    a. В директорію contrib/ ми завантажуємо контрибну тему (drupal.org)

    b. В директорії custom/ розташовані наші саб-теми

    Висновок

    Дотримуючись цих кроків, ви зможете налаштувати і встановити вашу тему на основі Bootstrap всього лише за лічені хвилини).

    Голосів: 6 Рейтинг: 5

    Також по темі

    1

    Звісно, наш улюблений Drupal вміє творити дива. Але іноді ефект ще більш більш чудовий від поєднання одного фреймворка з іншим. Адже буває, що дуети звучить навіть більш переконливо, ніж соло-...

    2

    Бути потужним, безпечним та функціональним — це “те, що лікар прописав” для будь-якого хорошого сайту! Тому Drupal — це “здорова” ідея і для медичних сайтів у тому числі. Сьогодні ми підібрали...

    3

    Сьогодні ми знову пропонуємо вам блог одного з наших Drupal-розробників, а це означає багато важливих деталей та практичних порад — цього разу щодо кешування в Drupal 7....

    4

    Згідно з найкращими традиціями респонсивного дизайну, сайт ідеально підлаштовується під екран будь-якого...

    5

    Зображення лазурних морських берегів, екзотичних островів і таємничих гір в інтернеті… Наче справжній магніт, вони приковують до себе погляди. Туристичні сайти бувають просто неймовірними! Тож ми...

    Приєднуйтесь до людей, які вже підписалися!

    Хочете бути в курсі важливих і цікавих речей, що відбуваються? Ми інформуватимемо Вас про розвиток та нові події в Drupal, дизайні, тестуванні та ін.

    Відпишіться у будь-який час