Инициализируем кастомную тему в 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 ссылки css/с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. Дальнейшие изменения уже должны производиться согласно тому, что требует конкретная задача вашего проекта.

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

Отключаем страницы терминов таксономии в Drupal

Июль 21, 2025 г.

По умолчанию Drupal генерирует маршруты для каждого термина таксономии. Это означает, что у каждого термина появляется своя страница с URL вида /taxonomy/term/123. В некоторых случаях такие страницы могут быть полезны, например, если вы используете термины ...

Читать

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

Июль 26, 2025 г.

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

Читать

Как получить определения из конфигурационных файлов схем Drupal

Апрель 6, 2025 г.

Drupal config API позволяет не только прочитать сами настройки, но и файлы их определений. В общем то это очевидно, покажу как это делается. Допустим ...

Читать

Как программно отрендерить View в Drupal и получить HTML

Август 3, 2025 г.

В некоторых случаях удобно не только встроить View через UI или блок, но и программно срендерить представление (View) и получить HTML — например, для отправки во внешнюю систему, в e-mail, или вывода в нестандартном месте. В этой статье покажем, как ...

Читать
 

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

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



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