Инициализируем кастомную тему в Drupal

При создании новой темы у вас есть варианты выбора начиная с того, чтобы взять готовую тему (и начать её менять под ваши задачи) до создания новой темы с «нуля». Часто также берут легаси шаблон — т.е. тему с прошлого проекта, потому что «мы там всё уже знаем и сделали как нужно».

Все эти опции имеют свои плюсы и минусы, я же расскажу о варианте близком к «теме с нуля», но всё же позволяющей быстро начать писать полезный код/стили.

Основа темы

В Drupal есть так называемый startkit, который позволяет генерировать новые темы оформления. Он базируется на core/stable9. Содержит минимальные определения и шаблоны. Stable9 удобен тем, что он почти ничего не объявляет в стилях.

Перейдите в web-root сайта и запустите скрипт:

Скрипт создаст в папке ./themes/THEMENAME новую тему. Останется только активировать её через панель управления или drush командой:

SCSS / JS + GULP

В только что собранной теме нет ничего, что помогало бы нам пользоваться сборщиками и препроцессорами. А вам вероятно потребуется обработка JS и SCSS. Т.е. в тему нужно добавить src папку, где мы будем хранить и разрабатывать исходники стилей и js, и из них получать уже рабочие библиотеки (которые будут регистрироваться в файле *.libraries.yml).

Я обычно раскладываю исходники по трем папкам

Начальные стили, которые есть в теме — размазаны по куче мелких файлов css/components/*.css, я копирую их в src/css, чтобы потом билдить из них один общий файл css/base/index.css. Нет особого смысла перекладывать работу по минификации и анализу этой мелочевки на drupal, т.к. это файл ~14кб, мы его билдим один раз, и возвращаемся к нему только тогда, когда нам требуется удалить какой то мешающийся там стиль.

В соответствии с этими изменениями нужно поменять в THEMENAME.libraries.yml ссылки сss/components/*.css на сss/base/index.css.

Для использования GULP потребуется сконфигурировать пакеты и написать gulpfile.js.

package.json

Конфигурация пакетов (package.json) прилагается ниже. Запускайте npm i для установки.

В корень темы также стоит добавить .gitignore со строкой:

Это избавит нас от попадания установленных модулей в репозиторий.

gulpfile.js

Основная функция сборщика — отслеживать изменения src файлов и билдить библиотеки.

Сборщик создаёт два css файла: уже упомянутый css/base/index.css и основной файл темы — css/styles.css (из исходных *.scss). А также он обрабатывает src/js файлы, минифицируя их в отдельные готовые *.js скрипты в папку темы /js.

Слежение запускается командой

Исходный код gulpfile.js:

Корнем сборки SCSS является файл src/scss/index.scss, который содержит в основном команды вроде @use и @forward.


В итоге мы имеем заготовку темы + настроенный препроцессор для scss и js. Дальнейшие изменения уже должны производиться согласно тому, что требует конкретная задача вашего проекта.

Мало букафф? Читайте есчо !

Как в шаблоне параграфа получить заголовок родительской ноды

Сентябрь 15, 2025 г.

Иногда возникает задача: в Twig-шаблоне параграфа (paragraph.html.twig) нужно отобразить заголовок материала (ноды), к которому этот параграф прикреплён. Нам не нужно передавать что то дополнительно в шаблон, эти данные могут быть получены из самой ...

Читать

Убираем вставку   в пустые div контейнеры в CKEditor 5

Апрель 9, 2025 г.

Неприятная особенность CKEditor - добавляет в пустые контейнера (в <div>,<p> и т.п.) html код неразрывного пробела. Покажу как можно от этого избавиться через код в кастомном плагине для CKEditor 5 в экосистеме Drupal 8+. Нам понадобится ...

Читать

Подключаем yandex cloud как s3 в Drupal

Апрель 3, 2025 г.

Облачные файловые хранилища Яндекса можно подключить и использовать в вашем проекте на drupal через модуль s3fs. А именно, хранить там т.н. юзерфайлы, ...

Читать

Эффективное кеширование по доступу к ноде: параметрический Cache Context в Drupal

Июль 26, 2025 г.

Когда мы используем кеширование в Drupal, типичный подход — добавить user в список контекстов: ['user']. Это означает, что для каждого пользователя будет ...

Читать
 

Комментарии к «Инициализируем кастомную тему в Drupal»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: