Инициализируем кастомную тему в 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

Март 17, 2025 г.

Иногда бывает потребность создать ссылку из кода. Структура ссылки довольно сложная на этапе препроцессинга шаблона меню, делюсь сниппетом кода. Потребуются следующие зависимости: [crayon-6895b94d98b60295545629/] Добавим ссылку в меню main. ...

Читать

Чтение данных из oembed провайдера

Март 11, 2025 г.

В Drupal 10/11 поддержка Oembed провайдеров в ядре (модуль media) позволяет легко и непринуждённо читать данные о медиа прямо из провайдера. Ранее я рассказывал как зарегистрировать oembed для rutube, чтобы иметь возможность оперировать видео контентом ...

Читать

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

Апрель 9, 2025 г.

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

Читать

Добавляем в page cache зависимость от значения cookie

Март 4, 2025 г.

Модуль page_cache использует http_middleware, чтобы зацепиться за объект request и произвести кеширование страницы. Работает он для анонимных пользователей. ...

Читать
 

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

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



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