8.3. Создание своей Drupal 8 темы на основе темы Stable. Drupal 8 темы bootstrap
Создание темы на основе Bootstrap 3 для Drupal 8
После обновления Drupal до восьмой версии, пришла пора написать о создании субтемы на на основе фреймворка Bootstrap 3.
Итак. Создание темы для Drupal 8, состоит из следующих этапов:
- Установка Bootstrap
- Создание субтемы
- Настройка субтемы
- Выбор типа подключения 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'Изменениям подверглись следующие строки:
Файл 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:
- Использование CDN
- Локальные файлы
Использование CDN
При использовании варианта c провайдером cdn, дополнительные настройки темы более не нужны. Большим плюсом этого варианта является то что позоляет подключить 18 вариантов тем. Минусом - у варианта с использованем cdn, более медленный отклик файлов стилей и скриптов. И как следствие меньшие возможности оптимизации и маштабирования проекта.
Использование локальных файлов.
Для использования локальной версии библиотеки bootstrap необходимо:
- Отключить cdn
- Подключить библиотеку bootstrap
- Установить и настроить модуль 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.
- В селекторе выбора версии указать "Load localy".
- Указать версию файлов минифицированную или полную.
- Выбрать тему к которой будет подключена bootstrap library
Для темизации темы как в первом так и во втором варианте редактируется файл style.css.
Вот и всё субтема создана!
delay-delo.com
Drupal 8 и своя тема на базе Bootstrap
В статье речь пойдёт о самом простом способе использования фреймворка Bootstrap под Drupal 8, а также о том, как подключить понравившуюся тему с Bootswatch и использовать все полюшки в шаблоне своего сайта.
Установка Bootstrap
Под Drupal 8 существует проект Bootstrap. На момент написания статьи он является самой популярной темой под эту версию движка. Шаблон этой темы включает 11 областей для размещения блоков, что обеспечивает неплохой задел для творчества. В то же время шаблон не сложен, а поэтому очень удобен для использования в качестве основы для своей разработки.
Скачиваем новейший релиз проекта Bootstrap (сейчас это 8.x-3.0-rc1). Распаковываем и копируем в каталог тем сайта /themes/bootstrap. Устанавливать тему через админку не нужно. Мы создадим свою подтему и именно её потом установим.
Подтема
Создание своей подтемы в Drupal — это возможность любых изменений основной темы, без её непосредственной модификации.
Создаём каталог для подтемы в каталоге тем сайта. Назвать можно, как угодно. Это будет название вашей подтемы. У меня каталог будет таким /themes/bootstrap_d1mon.
В этот каталог копируем всё содержимое из /themes/bootstrap/starterkits/cdn. Это специальный стартовый набор заботливо подготовленный разработчиками основной темы, чтобы нам легче было создавать свою подтему.
Среди скопированных файлов вы найдёте такие:
THEMENAME.theme THEMENAME.libraries.yml THEMENAME.starterkit.ymlИх нужно переименовать в соответствии с названием своей подтемы. В моём случае это будет, соответственно:
bootstrap_d1mon.theme bootstrap_d1mon.libraries.yml bootstrap_d1mon.info.ymlРедактируем в последнем файле эти параметры:
... name: 'Bootstrap Sub-Theme (CDN)' description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.' ... libraries: - 'THEMENAME/global-styling'Имя и описание задавайте любые. Последнюю ссылку, опять же, в соответствии с названием своей подтемы:
Теперь идём в админку и включаем в разделе «Оформление» свою подтему. Используем «Включить и установить по умолчанию». При этом наша подтема станет стандартной темой сайта, а основная тема Bootstrap лишь включится:
В таком состоянии обе темы и должны оставаться. Значение имеют «Настройки» лишь нашей созданной подтемы. Можете потом туда перейти и поиграться с разными параметрами. Оттуда можно менять не только логотип, favicon-значок и другие типичные параметры, но и оформление меню, кнопок и некоторые другие элементы дизайна.
Однако, перед тем, как начать менять эти настройки, давайте сделаем ещё одну вещь. Дело в том, что по умолчанию тема подгружает необходимые библиотеки из интернета. Не знаю кому как, но мне больше нравится когда сайт работает независимо. Именно поэтому я советую зайти в настройки подтемы, и там, во вкладке «Расширенные» в выпадающем списке «CDN Provider» выбрать пункт «Не указанно».
Внизу страницы нажимаем «Сохранить конфигурацию».
Теперь для локального подключения библиотек нам потребуется дополнительный модуль под названием Bootstrap Library. Скачиваем новейший релиз (сейчас это 8.x-1.2). Распаковываем и копируем в каталог модулей сайта /modules/bootstrap_library.
Дополнительно скачиваем фреймворк Bootstrap с официального сайта:
Распаковываем архив. Полностью всё что там есть помещаем в библиотеки сайта. Там три каталога (css, fonts, js). На примере js-файла структура каталогов должна быть такой: /libraries/bootstrap/js/bootstrap.min.js.
Через админку в разделе «Расширить» устанавливаем модуль Bootstrap Library. Идём в его настройки. Это в админке: «Конфигурация» → «Разработка» → «Bootstrap Library».
Проверяем, чтобы была выбрана загрузка из локальной библиотеки. Выбираем свою созданную подтему:
Ниже отмечаем, какого типа файлы мы хотим использовать из библиотеки и «Сохраняем конфигурацию»:
На всякий случай можно очистить кэш и смотреть на результат.
Подтему можно настраивать и редактировать под свои нужды. Обратите внимание, что в основной теме в каталоге /themes/bootstrap/templates лежит много файлов. Они отвечают за представление информации и за дизайн сайта. А в таком же каталоге нашей подтемы там пусто. Если вам нужно будет отредактировать любой из файлов этого каталога, то копируйте его с сохранением путей к себе в подтему и там уже меняйте.
Смысл такой, что все файлы в вашей подтеме, имеющие аналогичное расположение и имена перекрывают файлы основной темы. Только, когда вы помещаете к себе в подтему новый файл не забывайте сбрасывать кэш сайта.
Bootswatch
Есть такой замечательный сайт. На нём можно посмотреть возможности Bootstrap по оформлению разных меню, кнопок и других элементов дизайна. Для каждого элемента есть код. Можно использовать его как образец для своих нужд.
На этом же сайте есть подраздел с разными темами. По умолчанию мы используем эту тему. Если вы захотите вместо неё использовать, например, Readable. Необходимо скачать соответствующий для этой темы файл bootstrap.min.css и заменить им тот, что есть в библиотеке /libraries/bootstrap/css/bootstrap.min.css. Не забываем, как обычно, сбрасывать кэш.
Что ещё?
В основной теме Bootstrap есть подборка css-файлов с некоторыми адаптациями тем с Bootswatch под Drupal. Если мы используем на сайте уже упомянутую тему Readable и фреймворк Bootstrap в локальную библиотеку мы себе качали версии 3.3.6, то нужный нам файл мы найдём так /themes/bootstrap/css/3.3.6/overrides-readable.min.css.
Помещаем этот файл себе в подтему в каталог /css.
Подключается он через файл библиотек подтемы, в моём случае это bootstrap_d1mon.libraries.yml. Прописать нужно такую строчку:
global-styling: css: theme: css/overrides-readable.min.css: {} css/style.css: {}Отчищаем кэш.
d1mon.com
Создание темы | Get Drupal 8
Для упрощения и ускорения верстки нам надо отключить КЭШ в drupal'е и включить режим debug.
Что для этого надо сделать?
Первый способ:
1) Заходим в папку /sites/default. Копируем файл default.services.yml и переименовываем его в services.yml.
2) Заходим в этот файл. В разделе twig.config меняем:
debug: false на debug: true,
cache: true на cache: false.
3) Возвращаемся в админку. Чистим кэш.
Второй способ:
1) Заходим в папку sites. Копируем, переименовываем и переносим sites/example.settings.local.php в sites/default/settings.local.php.
2) Открываем sites/default/settings.php. Добавляем в конец следующие строки:
if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php'; }
3) Открываем sites/default/settings.local.php и добавляем в конец:
$settings['cache']['bins']['render'] = 'cache.backend.null';$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
4) Далее надо отключить кэширование Twig. Открываем sites/development.services.yml и добавляем twig.config настройки к parameters:
parameters: twig.config: debug: true auto_reload: true cache: false
Внося правки в файл development.services.yml для удобства предлагаю комментить имеющееся содержимое, чтобы знать что именно вы поменяли.
5) Очищаем кэш.
P.S. Возможно кому-то может показаться неправильным копирование необходимых строк. Ведь правильнее будет найти нужные значения в тексте и раскомментировать (убрать теги комментирования) нажатием Ctrl+?.
Мне такой подход кажется несколько неудобным. Вед если кто-то посторонний будет работать с кодом, то для того, чтобы выявить правку, ему придется просматривать весь файл целиком.
А так... Видя добавленные строки в конце документа и вам и стороннему программисту сразу будет очевидно какие изменения производились в файле.
Теперь, когда кэш отключен и активирован режим debug вам открылись новые возможности :)
В режиме разработки (F12) вы можете видеть возможные пути перезаписи TWIG шаблонов, оригинальные адреса и имена этих шаблонов и в целом контролировать правильность разметки. Эти знания пригодятся нам на пути создания темы в последующих занятиях курса.
getdrupal8.ru
Bootstrap 3 и Drupal 8
Bootstrap - это фреймворк для построения интерфейса сайта.
Особенность bootstrap
Уникальность bootstrap кроется в мультиплатформенности. Сайты с использованием данного фреймворка одинаково прекрасно смотрятся, как на мобильных девайсах, так и на персональных компьютерах.
А поскольку уже более 50% пользователей посещают сайты с мобильных устройств, то стремление в адаптивному дизайну как раз кстати.
Итак, что нам, друпалерам, надо знать о bootstrap?
Прежде всего то, что в bootstrap 3 все начинается с оберточного контейнера. В зависимости от класса container или container-fluid он может принимать фиксированную или резиновую форму. Обе формы адаптивны, то есть подстраиваются под ширину экрана, а разница лишь в том, что первая фиксируется исходя из ширины экрана, а вторая растягивается на всю его ширину. Стоит отметить, что каким бы ни был контейнер, он в любом случае будет иметь отступа от края в размере 15px.
Помимо контейнеров, которые представляют собой основную область страницы в bootstrap 3 имеется еще два не менее важных элемента: колонки и строки. Или иначе их называют ряды и блоки. Ряды - это блоки div с классом row, они служат для оборачивания адаптивных блоков (строк) div с классом col-?-?.
Давайте поговорим подробней об адаптивных блоках. Адаптивные блоки создают макет страницы и подстраиваются под особенности устройства на котором отображаются. Класс col-?-? представляет собой параметр указывающий на тип устройства и ширину колонки. Есть несколько типов устройств, используемых в bootstrap:
xs - ширина блока меньше или равна 768px.
sm - ширина блока 768px - 992px.
md - ширина блока 992px - 1200px.
lg - ширина блока больше или равна 1200px.
Ширина блока, указываемая вместо второго знака ? задает размер блока на том или ином устройстве. По умолчанию она определяется числом от 1 до 12.
Например, блок с классом "col-xs-12 col-sm-6 col-md-4 col-lg-3"будет иметь на устройстве xsширину 100% (12/12), на sm - 50% (6/12), на md - 33,3% (4/12), на lg - 25% (3/12). Надо заметить, что если в классе указывается только один тип устройства, например, "col-md-6" то данный заменяет собой все остальные диапазоны определяя блок в половину ширины контейнера на любом устройстве.
Это базовые моменты по разметке в bootstrap 3.
Особенности разметки
Адаптивные блоки по умолчанию выравниваются по левому краю. Поэтому перед блоком, который должен начинаться с новой строки необходимо ставить пустой div элемент с классом clearfix:
<div></div>.Чтобы скрыть элемент (блок) на определенных устройствах необходимо указать класс hidden-? заменив ? необходимым типом устройства.
getdrupal8.ru
Theming Drupal 8 - создаём свою первую тему
Будем создать тему с именем: admin_theme, на основе анализа темы bartik из директории: "/core/themes/".
Создадим в директории: "/themes/custom" папку admin_theme для нашей первой темы. И создадим в ней файл admin_theme.info.yml с описанием темы, следующего содержания:
# Название темы. name: Admin Theme # Это тема, а не модуль и т.п. type: theme # Описание темы. description: 'Test theme for Drupal 8.' # Для какой версии Drupal. core: 8.x # Базовая тема (используйте при необходимости). base theme: seven # Имя изображения скриншота отображаемого на странице тем Drupal. screenshot: screenshot.png # Пример (используйте при необходимости) подключения CSS и JS библиотек к теме, заданных в файле admin_theme.libraries.yml. # А так же подключение CSS для собственных стилей темы. libraries: - admin_theme/twitter-bootstrap - admin_theme/global-styling # Пример (используйте при необходимости) удаления одного из CSS стилей подключаемых Drupal на основании пути к нему. stylesheets-remove: - core/themes/stable/css/system/components/align.module.css # Определение регионов в Drupal. regions: page_top: 'Page top' page_bottom: 'Page bottom' content: 'Content' # Отключение одного из регионов, наследованного из базовой темы (используйте при необходимости, при использовании базовой темы). regions_hidden: - page_topПоместим в папку темы её сриншот (скриншот макета вёрстки) для отображения на странице включения тем, с указанным именем (screenshot.png) и размером 588 на 438 пикселей.
Создадим в папке темы файл admin_theme.breakpoints.yml с описанием "Media Queries" для модуля: Breakpoint. В дальнейшем при использовании зависимых от Breakpoint модулей, например: Responsive image, можно использовать заданные в теме "Media Queries". Для этого (на примере модуля Responsive image) достаточно на странице: /admin/config/media/responsive-image-style/add в поле "Breakpoint group" выбрать название создаваемой темы (Admin Theme).
admin_theme.mobile: label: mobile mediaQuery: '' weight: 0 multipliers: - 1x admin_theme.narrow: label: narrow mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)' weight: 1 multipliers: - 1x admin_theme.wide: label: wide mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1xОпишем подключение CSS и JS библиотек к теме на примере подключения CSS для собственных стилей темы и Bootstrap, для это создадим файл admin_theme.libraries.yml в папке темы, следующего содержания:
global-styling: version: 1.x css: theme: css/custom.css: {} twitter-bootstrap: remote: http://getbootstrap.com/ version: 3.3.6 license: name: MIT url: https://github.com/twbs/bootstrap/blob/master/LICENSE gpl-compatible: true js: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js: { type: external, minified: true } css: theme: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css: { type: external, minified: true } https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css: { type: external, minified: true }В файле admin_theme.theme (в папке темы) должны содержаться preprocess-функции используемые в создаваемой теме. Так как надобность в них пока отсутствует, не будем создавать данный файл.
Все CSS темы должны хранится в папке "css", а JS в папке "js". Изображения темы должны хранится в папке "images" (в папке темы), а необходимые шаблоны в папке "templates". Так же необходимо не забыть положить векторный логотип темы с именем logo.svg в папку темы.
При распространении темы рекомендуется создать файл LICENSE.txt в корневой паке темы с текстом лицензии, например: GNU GPL v.2.
ihighload.ru
9.2. Создание темы на основе Bootstrap. Настраиваем PhpStorm, LESS Compiler для работы с нашей темой.
В прошлых уроках мы уже разбирали как создавать тему на основе другой темы Stable. В этом уроке мы разберем как создавать тему на основе Bootstrap - популярного фреймворка для быстрого создания оформления страниц.
Я думаю у вас уже есть установленный Drupal 8. Давайте перейдем к установке Bootstrap:
https://www.drupal.org/project/bootstrap
В отличие от 7го друпала в 8ом, мы кладем все темы сайта в папку /themes в корне сайта:
Для того чтобы создать свою тему на основе Bootstrap, нужно создать подтему. Папку для подтемы нужно брать прямо из родительской темы:
/themes/bootstrap/starterkits/less
Копируем папку less в папку /themes, рядом с родительской темой bootstrap и переименовываем ее в название нашей темы, у меня это будет drupalbook. Также переименовываем файлы THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme так чтобы вместо THEMENAME было имя нашей темы, например drupalbook.libraries.yml. Только THEMENAME.starterkit.yml переименовываем в название темы.yml: drupalbook.info.yml.
Теперь зайдем в файл drupalbook.info.yml и в разделе libraries также переименуем THEMENAME:
libraries: - 'drupalbook/global-styling' - 'drupalbook/bootstrap-scripts'Имя темы тоже бы желательно переименовать:
name: 'Bootstrap Drupalbook Sub-Theme (LESS)'
Переименовать также придется файлы настроек темы:
/config/install/drupalbook.settings.yml/config/schema/drupalbook.schema.yml
Теперь осталось скопировать код самого bootstrap фреймворка:
http://getbootstrap.com/getting-started/#download
Нас интересует именно Source code версия bootstrap состоящия из еще не скомпилированных LESS файлов:
Создаем в нашей подтеме папку bootstrap и копируем туда файлы bootstrap'а.
Мы копируем именно Source code, не Bootstrap версию с компилированными CSS файлами. Это нужно для того чтобы мы могли переопределить переменные bootstrap'а у нас в друпал теме в отдельных файлах:
/less/overrides.less/less/variable-overrides.less
Также мы можем использовать SASS версию bootstrap'а, но тогда нам нужен будет SASS Compiler, мы же используем LESS CSS Compiler, потому что он встроен в PhpStorm.
Теперь мы можем зайти на страницу Оформление и включить наше тему
/admin/appearance
Сразу у нас не будет нужных нам стилей бутстрапа, их нужно еще скомпилировать. Для этого мы будет использовать плагин PhpStorm'а Less Compiler. Давайте зайдем в настройки PhpStorm File -> Settings.
- Ищем в настройках Plugins
- Переходим на страницу Plugins
- Ищем по плагинам слово LESS
- Находим плагин LESS CSS Compiler
- Устанавливаем его через Install JetBrains plugin...
- Если не получается найти плагин, то скачиваем его с официальной страницы:
И ставим плагин через Install plugin from disk...
Теперь когда у нас установлен плагин, нужно его настроить. Заходим в настройки PhpStorm и ищем в настройках слово LESS:
Нажимаем плюс, чтобы добавить LESS profile. Называем наш профайл как-нибудь, например Bootstrap, для каждого проекта PhpStorm профайл нужно создавать свой.
В настройках профиля указываем:
LESS source directory - C:\OpenServer\domains\drupal8\themes\drupalbook\lessЭто путь до папки less нашей темы, не папки less самого bootstrap'a, а именно нашей темы, потому что мы подгружаем файлы bootstrap'a из нашего файла style.less.
Include files by path - C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.lessПодключаем только файл style.less, это точка входа в компиляцию наших всех less файлов, по сути мы компилируем только один файл style.less, остальные в него включаются и компилируются автоматически.
CSS output directory - C:\OpenServer\domains\drupal8\themes\drupalbook\cssТак как мы подключаем только один файл style.less, то скомпилирован будет только один style.css файл. Что довольно удобно, нам не придется возиться с подключением кучей файлов, но с другой стороны мы компилируем всегда весь бутстрап целиком, даже когда нам нужно изменить всего одну строчку CSS в нашей теме.
Compile automatically on save - Удобная фича, компилирует заново CSS, когда мы нажимаем Ctrl + S или сохраняем файлы. Рекомендую оставить включенной.
Теперь можно нажать Ctrl + S и это запустит компиляцию LESS файлов. Также можно вызвать компиляцию вручную, кликнув на файл style.less и выбрать Compile to CSS:
Обычно компиляция занимает 5-10 секунд:
Если у вас все удачно скомпилировалось, то вы должны увидеть ваши новые стили:
Не забудьте отключить агрегацию javascript и CSS в админке друпала:
/admin/config/development/performance
По умолчанию они включены.
Все теперь вы можете приступать к верстке, к тому же у вас уже будет изначально встроенное hamburger мобильное меню и responsive верстка.
Для этого нужно разместить блок меню в регионе Navigation (Collapsible).
В следующих уроках мы сверстаем PSD макет для нашей темы на Bootstrap.
drupalbook.ru
8.3. Создание своей Drupal 8 темы на основе темы Stable.
Начиная с этой статьи мы будем делать свою тему на друпале. В этом разделе учебника мы разберем основы темы на друпале, где что лежит, как подключать и использовать CSS, JavaScript. Делать свою тему мы будем на основе темы-конструктора ядра Stable. Если вы хотите изучать друпал, то Stable отличное начало. Не стоит начинать с Bootstrap, у вас будут постоянно возникать вопросы и ошибки. В следующем разделе учебника мы уже с багажом умений созданий темы для Drupal 8, возьмемся и за Bootstrap.
Если у вас есть желание читать мануал на английском, то вот официальная документация, можете сравнивать с моим учебником и поправлять меня в комментариях или через Ctrl + Enter.
https://www.drupal.org/theme-guide/8
Создаем папку нашей темы
Все новые темы мы кладем в папку /themes. Вы можете класть папки по старинке в sites/all/themes, но лучше всего использовать новую структура файлов Drupal 8 и класть в папку /themes.
Я создам папку /themes/drupalbook, вы можете назвать вашу тему как вам угодно:
Создаем файл с основной информацией о теме drupalbook.info.yml
В папке нашей темы создаем файл имя_темы.info.yml:
Дальше стоит сделать небольшое отступление на то что такое формат YAML (здесь подробнее ссылка на статью).
https://ru.wikipedia.org/wiki/YAML
Обратите внимание на две вещи:1) Не используйте табуляцию для отступов, только пробелы.2) Отступы должны быть 1 или более пробелов. (то есть name: value, но не name:value).
Вставляем в файл drupalbook.info.yml:
name: Drupalbook type: theme base theme: stable description: My first Drupal 8 theme. core: 8.x libraries: - drupalbook/global-styling regions: header: Header content: Content # Этот регион обязателен sidebar_first: 'Sidebar first' # Не забываем добавить кавычки footer: FooterДавайте разберем, что каждая строчка значит.
name - название нашей темы. Машинное имя нашей темы это название папки и файла drupalbook.info.yml - drupalbook.
type - тип проекта друпал, у нас это тема.
base theme - мы наследуемся от темы stable, если тема с нуля, то пишем false.
description - описание темы, которое отображается в админке.
core - версия ядра друпала, для которого эта тема.
libraries - здесь мы поключаем библиотеки к нашему модулю. Делаем мы это через файлик, который мы создадим далее drupalbook.libraries.yml. Обратите внимание на global-styling, мы будем использовать его в drupalbook.libraries.yml.
regions - регионы нашей темы. Обязательный регион content, через него выводится содержимое друпала. Также если название региона в два или более слова, не забудьте обернуть его в кавычки. Машинные имена регионов пишутся через нижнее подчеркивание.
Раз мы заявили об библиотеке нашей темы, так давайте ее создадим.
Файл drupalbook.libraries.yml
Добавляем следующие строки в drupalbook.libraries.yml:
global-styling: version: 1.x css: theme: css/style.css: {} css/print.css: { media: print } js: js/custom.js: {} dependencies: - core/jqueryА теперь давайте разберем все построчно:
global-styling - именно такое имя мы задали в drupalbook.info.yml
css - здесь мы подключаем CSS файлы, заметьте, что для print версии сайта мы указали media: print.
js - здесь подключаем javascript файлы. jQuery не является обязательным для друпала, поэтому если хотим использовать jQuery в нашем пользовательском JavaScript дописываем зависимость от него
dependencies: - core/jqueryСоздаем папки css, js и кладем туда файлы:css/style.csscss/print.cssjs/custom.js
Так как мы наследуемся от темы stable, то и шаблоны наследуются от нее. Теперь заходим на наш сайт в раздел Оформление:
/admin/appearance
чистим кеш и включаем нашу тему:
Теперь у нас на сайте наша новая тема Drupalbook:
drupalbook.ru
