Создание темы оформления для Drupal

Несмотря на то, что CMS Drupal довольно популярная система для создания веб-приложений, для неё практически нет качественных свободных тем оформления. В лучшем случае это довольно красивые темы, которые трудно настроить так, чтобы она выглядела уникально. Точнее, это вполне возможно, но это почти равносильно тому, что создать новую тему. Именно поэтому разработчики Drupal используют свободные и качественные базовые темы, на основе которых можно довольно быстро создать совершенно уникальное и потрясающе выглядящее оформление сайта. Именно такой способ и будет рассмотрен в данной статье.

С чего начать?

Любой веб-дизайнер или веб-разработчик со временем обзаводится какими-то шаблонами и заготовками. Использование которых экономит кучу времени при реализации новых, оригинальных проектов. В случае с вёрсткой тем оформления это может быть готовый набор шаблонов, не имеющих оформления, но хорошо адаптированных для отображения элементов дизайна на разных разрешениях экрана. С автоматически показывающимися и скрывающимися регионами, блоками и т. д.

Для Drupal существует достаточное количество таких тем для разработки. Самой популярной является тема Zen, которая доступна для загрузки по адресу http://www.drupal.org/project/zen. Вообще, правильно её называть не темой оформления (поскольку никакого оформления она не имеет), а базовым набором (Starter Kit), который имеет универсальный адаптивный HTML-каркас. Этот каркас изначально построен на спецификации HTML5, поддерживает работу на мобильных устройствах и абсолютно «резиновый» для корректного отображения на экранах с различным разрешением. Не будет большим секретом, что профессиональные веб-разработчики Drupal для создания шедевров используют именно базовый набор Zen.

Что для этого нужно?

Тема Zen доступна для Drupal версий 7 и 8, хотя для последней пока в виде альфа-выпуска. В данной статье будет рассмотрен вариант для Drupal 7 при обязательном наличии утилиты Drush. Она понадобится для автоматической генерации собственного стартового набора новой темы на основе темы Zen. Это можно выполнить вручную, но это неоправданно долго и нудно. Разумнее воспользоваться Drush. Общий порядок действий следующий:

1. загрузка и установка (включение) стартового набора Zen;
2. генерация стартового набора собственной темы на базе Zen;
3. включение сгенерированного набора как темы по-умолчанию;
4. установка дополнительных инструментов разработчика для задания CSS-стилей;
5. добавление CSS-стилей шаблонам темы, т. е. её оформление.

Последний пункт в данной статье рассматриваться не будет, поскольку это отдельная и специфическая тема.

Создание стартового набора новой темы

Пусть имеется «чистый» сайт на Drupal 7. Имя хоста drupal-site и расположен сайт в каталоге виртуального хоста по адресу /home/john/htdocs/drupal-site/.
Для более удобного использования утилиты Drush следует перейти в каталог виртуального хоста drupal-site:

$ cd ~/htdocs/drupal-site

Теперь нужно скачать стартовый набор Zen:

$ drush dl zen
Project zen (7.x-6.4) downloaded to /home/john/htdocs/drupal-site/sites/all/themes/zen. [success]

Как можно видеть, по-умолчанию темы оформления устанавливаются в /sites/all/themes/. Однако, в каталоге themes можно создавать подкаталоги для тем — Drupal их просканирует и определит имеющиеся темы. Стартовый набор для новой темы целесообразнее сгенерировать в новом подкаталоге custom, отдельно от остальных тем. Это удобно, т. к. все собственные темы можно хранить раздельно. Создание подкаталога custom:

$ mkdir sites/all/themes/custom

Путь указан относительно каталога ~/htdocs/drupal-site, поскольку ранее командой cd этот каталог был сделан текущим (активным).
Автоматическая генерация стартового набора для новой темы возможна благодаря предоставляемой набором Zen команде zen. Которую может использовать утилита Drush. Сама команда zen имеет несколько ключей. Благодаря которым можно задавать машинное имя, название, описание. А также расположение установки новой темы. Команда zen будет доступной только после включения набора Zen:

$ drush en zen
The following extensions will be enabled: zen
Do you really want to continue? (y/n): y
zen was enabled successfully.

Теперь можно сгенерировать и собственный начальный набор для новой темы. Он будет иметь все необходимые Drupal файлы шаблонов с «резиновым» и полностью адаптивным каркасом, а также главный CSS-файл, в который будут компилироваться стили CSS при создании оформления новой темы:

$ drush zen my_theme "My Theme" --path=sites/all/themes/custom --description="Custom Theme"
Starter kit for "My Theme" created in: /home/john/htdocs/drupal-site/sites/all/themes/custom/my_theme

Как видно, с помощью ключей «—path» и «—description» были заданы путь установки (в каталог custom), а также краткое описание новой темы оформления. Параметр my_theme задаёт машинное имя темы в Drupal, по которому система её (тему) идентифицирует. А параметр «My Theme» это название темы.

Подключение темы

Далее, используя панель администрирования Drupal, в разделе «Оформление» (по адресу http://drupal-site/admin/appearance) нужно включить новую тему «My Theme» по-умолчанию:

Без дополнительных блоков и элементов интерфейса данная тема выглядит так:

С дополнительными блоками, добавленными во вторую боковую (справа) панель HTML-каркаса:

Для разрешений экранов мобильных устройств все блоки и дополнительные элементы «съезжают» друг под другом, выстраиваясь в одну колонку:

При этом никаким оформлением новая тема «My Theme» как видно, не обладает. Далее, уникальный внешний вид для неё предстоит создать. Сначала нарисовать дизайн в качестве макета. Затем реализовать его с помощью CSS и, возможно, косметических правок HTML-каркаса в файлах шаблонов.

Установка и использование дополнительных инструментов

Набор Zen (как и сгенерированные на его основе новые темы) поддерживает работу с фронтенд-окружением Gulp.js. Это позволяет выполнять многие, свойственные для фронтент-разработчика рутинные задачи автоматически. Те, кто тесно знаком с веб-дизайном понимают, о чём идёт речь. Поэтому нет необходимости останавливаться на этом подробно.
Для начала нужно установить фреймворк Node.js и его пакетный менеджер npm. В Ubuntu 18.04 соответствующие пакеты доступны в стандартном репозитории:

$ sudo apt install npm

Автоматически, как зависимость, будет предложено установить пакет nodejs.
Для организации фронтенд-окружения Gulp для новой темы «My Theme» в её каталоге /sites/all/themes/custom/my_theme существует файл package.json. Для установки всех требуемых пакетов нужно выполнить в этом каталоге команду:

$ npm install

Будут загружены все необходимые для работы Gulp модули в подкаталог node_modules. Теперь, для выполнения команд и заданий Gulp необходимо глобально установить интерпретатор gulp-cli, используя пакетный менеджер npm:

$ sudo npm install -g gulp-cli

Глобальная установка удобна, чтобы не делать этого для каждой разрабатываемой темы. Далее, в каталоге с темой my_theme в конфигурационном файле gulpfile.js нужно задать URL, используемый виртуальным хостом, при помощи опции options.drupalURL:

options.drupalURL = ‘http://drupal-site’;

Теперь можно выполнять задачи по-умолчанию для новой темы «My Theme» используя команду:

$ gulp

Нужно заметить, что задач для Gilp, сформированных по-умолчанию полностью хватает, чтобы задать любое оформление для темы. Сами же стили компилируются в результате выполнения задач Gulp в файл /my_theme/styles.css и его не нужно редактировать вручную. Сами же стили задаются в соответствующих файлах *.scss в подкаталоге /sass темы оформления. А файлы шаблонов — в подкаталоге /templates. Эти шаблоны можно создавать «с нуля» самостоятельно или скопировать готовые из аналогичного каталога родительской темы Zen:

$ cp ~/htdocs/drupal-site/sites/all/themes/zen/templates/*.tpl.php templates

Если оставить подкаталог templates новой темы «My Theme» пустым, то по-умолчанию будут подключены файлы шаблонов из родительской темы Zen, на основе которой она была сгенерирована. Это очень важный момент, нельзя упустить его из виду.
Например, для задания бордюров для блоков новой темы нужно в файле sass/components/box/_box.scss раскомментировать блок кода:

[class$=”sidebar”] {
.block {
@extend %box;
}
.block__title {
@extend %box__title;
}
}

Далее нужно выполнить команду gulp и просмотреть результат в веб-браузере, обновив страницу:

В результате все блоки для сайдбаров будут иметь бордюры. Данный код присутствует в файле sass/components/box/_box.scss в качестве примера, для демонстрации механизма работы Gulp для ведения фронтенд-разработки. Далее, внося собственные правки для разных компонент темы оформления в соответствии с разработанным макетом создаётся полноценная, оригинальная тема в полном соответствии со спецификацией Drupal.

Заключение

В заключение очень важно отметить, что в данном случае для разработки тем для Drupal используется метаязык Sass. Разработанный на основе CSS. Основное предназначение Sass – сократить использование повторяющегося кода разработчиком и возложить его генерацию на специализированные утилиты, такие как Gulp. Таким образом, создание тем оформления предложенным в данной статье способом тесно связано со знанием и умением применения метаязыка Sass.