Створення субтеми DXPR Theme (Drupal 11).

Вивчення DXPR ThemeСтворення субтеми

DXPR Theme змінює кольори, шрифти, шапку, відступи й макет з панелі налаштувань, тож більшості сайтів ніколи не знадобиться жоден рядок CSS. Субтема для решти: власна таблиця стилів, перевизначення шаблонів, додаткові бібліотеки або палітра кольорів, яку ви постачаєте разом із кодом. Субтема успадковує кожну таблицю стилів і шаблон DXPR Theme, отримує власні налаштування, а оновлення DXPR Theme її не чіпають.

Цей посібник охоплює DXPR Theme 8.2 на Drupal 10.3 і Drupal 11. Стартовий набір, який він використовує, постачається всередині теми за адресою dxpr_theme/dxpr_theme_STARTERKIT; команда ядра Drupal generate-theme не використовується, адже DXPR Theme приносить власний стартовий набір і команду.

Перш ніж почати

Додайте DXPR Theme й увімкніть її допоміжний модуль, потрібний темі, щоб Drupal її встановив:

composer require drupal/dxpr_theme
drush en dxpr_theme_helper

1. Згенеруйте субтему зі стартового набору

Найшвидший спосіб: команда Drush, яку надає DXPR Theme Helper. Виконайте її з кореня свого проєкту; вона перевірить машинне ім’я, скопіює стартовий набір у теку themes/custom і перейменує все за вас:

drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"

Без аргументів команда запитає обидві назви. Без Drush скористайтеся скриптом, що постачається з темою: перейдіть у теку web/themes/contrib/dxpr_theme, одноразово зробіть скрипти виконуваними командою chmod +x scripts/*, виконайте ./scripts/create_subtheme.sh і введіть людську назву й машинне ім’я, коли запитають. Скрипт працює лише з цієї теки.

У будь-якому разі ви отримаєте web/themes/custom/northwind_theme із файлами й конфігурацією стартового набору, перейменованими під ваше машинне ім’я, і заміненим заповнювачем THEMETITLE у файлах info та schema.

2. Увімкніть її й один раз збережіть налаштування

  1. Перейдіть до розділу Зовнішній вигляд і виберіть Встановити й зробити за замовчуванням для своєї субтеми.
  2. Відкрийте Налаштування субтеми й натисніть Зберегти конфігурацію нічого не змінюючи.

Це перше збереження згенерує таблицю стилів налаштувань для нової теми. Субтема починає зі стандартних налаштувань стартового набору, а не з налаштувань, які ви зробили в DXPR Theme. Щоб перенести їх, експортуйте їх із DXPR Theme й імпортуйте в субтему:

drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_theme

Відтепер панель працює так само, як для DXPR Theme: кольори, типографіка, шапка, підвал і відступи належать субтемі.

Тримайте регіони субтеми ідентичними регіонам базової теми. Стартовий набір оголошує ті самі чотирнадцять регіонів, що й DXPR Theme, а опція DXPR Theme Helper Приховати регіони на контенті посилається на них за іменем.

3. Що дає стартовий набір

  • northwind_theme.info.yml: base theme: dxpr_theme, регіони й одна бібліотека, global-styling, що завантажує вашу таблицю стилів. Закоментований блок libraries-override перелічує бібліотеки DXPR Theme, які ви найімовірніше вимикатимете, від dxpr_theme/bootstrap-5 до dxpr_theme/helper-classes.
  • css/dxpr_theme_subtheme.css: завантажується на кожній сторінці після власних таблиць стилів теми. Ваш CSS сюди.
  • templates/: порожня, крім README. Скопіюйте сюди будь-який шаблон із теки dxpr_theme/templates, щоб перевизначити його.
  • config/install і config/schema: стандартні налаштування та їхня схема, перейменовані під вашу тему.
  • color-settings.json: ваші власні іменовані палітри кольорів, показані у списку колірних схем поруч із вбудованими.
  • logo.svg, favicon.ico, screenshot.png: замініть їх своїми.

4. Пишіть CSS за налаштуваннями

DXPR Theme записує свої налаштування у змінні CSS: --dxt-color-* для палітри й --dxt-setting-* для типографіки, відступів і макета, а також відображає їх на змінні Bootstrap --bs-*. Використовуйте змінні у своїй таблиці стилів замість фіксованих значень, і ваш CSS і далі слідуватиме за панеллю, коли хтось змінить колір чи шрифт.

/* css/dxpr_theme_subtheme.css */
.card {
  border-radius: 1rem;
  border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent);
}

.dxpr-theme-footer h2 {
  font-family: var(--dxt-setting-headings-font-face);
  color: var(--dxt-color-footertext);
}

Базовий колір, акцентні кольори, текст, заголовки, посилання, картки й підвал усі мають змінну. Повний список є в README теми під заголовком CSS Custom Properties (Variables) Reference.

5. Перевизначте шаблони й бібліотеки

Скопіюйте шаблон, який хочете змінити, з теки themes/contrib/dxpr_theme/templates у теку templates своєї субтеми, збережіть ім’я файлу, відредагуйте його й очистьте кеші. Drupal спершу бере копію субтеми.

Щоб прибрати таблицю стилів або скрипт базової теми, розкоментуйте рядок libraries-override: у своєму info-файлі разом із рядками бібліотек, які хочете прибрати; для них уже встановлено false. Щоб додати власні, оголосіть більше бібліотек у файлі northwind_theme.libraries.yml і перелічіть їх під ключем libraries в info-файлі, як це робить стартовий набір для global-styling.

6. Дайте редакторам свої класи в DXPR Builder

Класи, оголошені під ключем dxpr_builder_classes: в info-файлі субтеми, з’являються у виборі класів DXPR Builder, тож редактори застосовують вашу темну смугу чи скляну панель, не вводячи назви класу. Стилізуйте клас у файлі dxpr_theme_subtheme.css, обмеживши його елементами DXPR Builder, для яких його призначено.

7. Постачайте палітру кольорів разом із темою

Додайте іменовані схеми у файл color-settings.json у корені субтеми. Кожна схема встановлює ті самі ключі, що використовує панель: base, basetext, link, accent1, accent2, text, headings, card, footer, header, pagetitle та решту. Схема з’являється у списку колірних схем форми налаштувань, тож сайт може перейти на брендову палітру в один клік.

8. Подальше оновлення DXPR Theme

  1. Оновіть базову тему за допомогою Composer: composer update drupal/dxpr_theme --with-dependencies.
  2. Виконайте оновлення бази даних і очистьте кеші.
  3. Відкрийте форму налаштувань субтеми й збережіть її ще раз, щоб таблиця стилів налаштувань перегенерувалася з новими змінними.
  4. Прочитайте нотатки до релізу щодо змін шаблонів або регіонів і порівняйте кожен перевизначений вами шаблон із новою версією.

Дозвольте AI-агенту зайнятися оформленням

DXPR Theme 8.1.1 і новіші постачають агентську навичку. Виконайте drush dxt:setup-ai у своєму проєкті, і ваш кодувальний агент (Claude Code, Codex, Gemini CLI або Cursor) вивчить налаштування теми та їхнє значення. Опишіть бренд, і агент встановить кольори, типографіку, макет шапки й відступи через ті самі налаштування, куди пише панель, а ви перевірите результат на сайті. Він також може створити субтему командою drush dxt:subtheme:create.

Навичка DXPR Builder робить те саме для сторінок, а Drush Webmaster для контенту й Views. Перегляньте агентські навички в дії.

Запитання про субтеми DXPR Theme

Ні. Кольори, шрифти, шапка, підвал, відступи й макет є налаштуваннями в панелі DXPR Theme. Субтема потрібна лише для власного CSS, перевизначень шаблонів, додаткових бібліотек або палітри, яку ви постачаєте разом із кодом.

Так. Після команди drush dxt:setup-ai агент знає налаштування теми й змінює їх за брифом, а також може сам створити субтему командою drush dxt:subtheme:create. Результат ви перевіряєте на сайті.

Ті самі, що й DXPR Theme 8.2: Drupal 10.3 і новіші, а також Drupal 11. Info-файл стартового набору оголошує й старіші версії, але DXPR Theme 8.2 залежить від модулів, яким потрібен Drupal 10.3.

Ні. Composer замінює лише теку themes/contrib/dxpr_theme; ваша субтема живе в теці themes/custom. Після оновлення збережіть форму налаштувань субтеми ще раз, щоб її таблиця стилів підхопила нові змінні.