Собственная тема Drupal 8 - Bootstrap без дополнительных модулей.
В отличие от Drupal 7, Drupal 8 использует шаблонизатор TWIG. По началу это казалось немного непривычным. Но в последствии, ты начинаешь понимать насколько это удобно. И так по порядку.
Структура
В начале рассмотрим структуру шаблона Drupal 8.
Как и в 7, 8 Drupal имеет такую же структуру папок:
/css - Папка со стилями
/fonts - Папка со шрифтами
/images - Папка где размещаются картинки исключительно касающиеся непосредственно оформление темы
/js - Папка где находятся скрипты .js
/templates - папка где находятся файлы *.html.twig, например page.html.twig (хотя его можно оставить и в корне шаблона) html.html.twig, block.html.twig и т.п.
Также рассмотрим файлы касающиеся непосредственно шаблона вашего сайта
Во первых создаем папку с названием нашего шаблона. Например в моем сайте используется шаблон webgoal. Хочу заметить что нельзя писать в названии тире, разве что нижнее подчёркивание.
Далее идёт:
/[Название шаблона].info.yml - Например webgoal.info.yml, в которой находиться информация - название шаблона, его описание, версия, информация о регионах в шаблоне
/[Название шаблона].libraries.yml - Набример webgoal.libraries.yml. Здесь подключается стили и скрипты.
/screenshot.png - Если файл screenshot.png находится в папке темы, он будет использоваться на странице «Внешний вид»
/logo.svg - Если в папке темы находится векторный файл SVG логотипа вашей темы, он может использоваться в заголовке веб-сайта.
/templates/page.html.twig - Этот файл отвечает за вёрстку самого шаблона. За основу можно скачать из ядра Drupal 8 - drupal-8.3.7\core\modules\system\templates\* Здесь находятся необходимые стартовые файлы для шаблона.
/templates/html.html.twig - Здесь HTML разметка шаблона до и после <boody> здесь также можете подключать дополнительные стили, скрипты и метатеги.
От теории к практике
Давайте создадим тему на основе Bootstrap 4, так как вышла бета версия. Идём по ссылке http://getbootstrap.com/docs/4.0/getting-started/download/ и скачиваем последнюю версию
И распаковываем его в наш сайт /themes/ И назовём шаблон shop
Далее добавляем нужные нам папки (fonts, images, templates), Затем из \core\modules\system\templates\ копируем page.html.twig и html.html.twig в папку /templates/
И скопируем из \core\themes\bartik\ файлы bartik.info.yml, bartik.libraries.yml и переименуем их в shop.info.yml, shop.libraries.yml соответственно. И создадим screenshot.png.
Работаем с кодом
Теперь начинаем редактировать каждый файл
shop.info.yml
Убираем от туда строки
libraries:
- bartik/global-styling
ckeditor_stylesheets:
- css/base/elements.css
- css/components/captions.css
- css/components/table.css
- css/components/text-formatted.css
И ставим вместо них
libraries:
- shop/global-css
- shop/global-js
stylesheets-remove:
- core/assets/vendor/normalize-css/normalize.css
- core/modules/system/css/system.module.css
- core/modules/system/css/system.theme.css
- core/modules/views/css/views.module.css
Таким образом мы удаляем лишние стили из нашего шаблона
Далее в name: пишем shop
А в regions: ставим те регионы какие нам необходимы в шаблоне
Далее редактируем каждый файл
shop.libraries.yml
Прописываем туда
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/common.js: {}
dependencies:
- core/jquery
Затем подключаем CSS и js файлы как нам нужно в
html.html.twig
Ну и наконец
page.html.twig
Расставляем все регионы так как нам надо
Для этого мы используем
Такие команды
{% if page.нужный нам регион %} - Проверяет пустой или нет этот регион
{% elseif page.нужный нам регион %} - Тоже самое но если нужно второе условие а так его не используют
{{ page.нужный нам регион }} - Вывод нужного нам региона
{% endif %} - Конец условия
Получился
<div class="pagewrap">
{% if page.primary_menu %}
<div class="block-wrap primary_menu">
<div class="container">
<div class="row">
{{ page.primary_menu }}
</div>
</div>
</div>
{% endif %}
{% if page.header %}
<div class="block-wrap header">
{{ page.header }}
</div>
{% endif %}
{% if page.secondary_menu %}
<div class="block-wrap secondary_menu">
<div class="container">
<div class="row">
{{ page.secondary_menu }}
</div>
</div>
</div>
{% endif %}
{% if page.breadcrumb %}
<div class="block-wrap breadcrumb">
<div class="container">
<div class="row">
{{ page.breadcrumb }}
</div>
</div>
</div>
{% endif %}
{% if page.page_top %}
<div class="block-wrap page_top">
<div class="container">
<div class="row">
{{ page.page_top }}
</div>
</div>
</div>
{% endif %}
<div class="block-wrap content-text">
<div class="container">
<div class="row">
{% if page.sidebar_first %}
{% if page.sidebar_second %}
<div class="col-3">{{ page.sidebar_first }}</div>
<div class="col-6">{{ page.content }}</div>
<div class="col-3">{{ page.sidebar_second }}</div>
{% else %}
<div class="col-3">{{ page.sidebar_first }}</div>
<div class="col-6">{{ page.content }}</div>
{% endif %}
{% else %}
{% if page.sidebar_second %}
<div class="col-9">{{ page.content }}</div>
<div class="col-3">{{ page.sidebar_second }}</div>
{% else %}
<div class="col-12">{{ page.content }}</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% if page.block_one %}
<div class="block-wrap block_one">
<div class="container">
<div class="row">
{{ page.block_one }}
</div>
</div>
</div>
{% endif %}
{% if page.block_two %}
<div class="block-wrap block_two">
{{ page.block_two }}
</div>
{% endif %}
{% if page.footer %}
<div class="block-wrap footer">
<div class="container">
<div class="row">
{{ page.footer }}
</div>
</div>
</div>
{% endif %}
</div>
{% if page.modal %}
<div class="block-wrap modal">
{{ page.modal }}
</div>
{% endif %}
Ну вот базовый шаблон готов. В следующий раз мы буде уму подключать Bootstrap обертку полям, кнопкам и всему остальному
