Службові класи.

Вивчення DXPR BuilderКерування сайтомАдаптація під бренд

Кожен елемент має поле HTML classes зі списком іменованих класів. Утиліти Bootstrap 5 і тіні вже вбудовано. Ваша тема може додати власну групу через свій файл .info.yml, а модуль через хук alter. Ця сторінка пояснює, що містить список і як зареєструвати власні класи, щоб редактори обирали брендовий вигляд за назвою, а не вводили імена класів.

Застосування класу

  1. Відкрийте налаштування елемента й знайдіть HTML classes унизу панелі General.
  2. Натисніть поле й виберіть клас зі списку. Введення у полі фільтрує список.
  3. Щоб увести клас, якого немає у списку, натисніть Edit as text і введіть його.
  4. Натисніть Save у діалоговому вікні, потім Save на панелі інструментів конструктора.

Класи потрапляють в атрибут class елемента у збереженому HTML. Типові застосування редакторам показує сторінка HTML ID та класи.

Що містить список

Редактор будує список під час запуску. Він об’єднує три джерела в такому порядку:

  1. Вбудований список. Він містить групу Drop shadows, коротку групу Bootstrap classes та утиліти Bootstrap 5, згруповані за призначенням: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors тощо.
  2. Група для кожної встановленої теми, чий файл .info.yml має ключ dxpr_builder_classes. Група підписана назвою теми.
  3. Зміни від модулів, див. Реєстрація класів з модуля.

Відкритий список HTML classes на панелі General елемента Text, прокручений до групи DXPR Theme із записами на кшталт Inline Form і Background color: DXPR Theme accent1

Отже, кожен сайт має класи для відступів, наприклад mt-3 і px-4, для відображення, наприклад d-none, і для тексту, наприклад text-center і fw-bold. Налаштовувати для них нічого не потрібно.

Реєстрація класів у темі

Додайте відповідність dxpr_builder_classes до файлу .info.yml теми. Кожен ключ містить ім’я класу або кілька імен, розділених пробілами; кожне значення містить мітку, яку бачать редактори. DXPR Theme реєструє свої класи саме так:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. Додайте відповідність до themes/custom/mytheme/mytheme.info.yml:

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. Напишіть CSS для класів у бібліотеці, яку тема завантажує на кожній сторінці; див. Власний CSS.

  3. Очистьте кеші командою drush cr, щоб Drupal знову прочитав файл info.

  4. Відкрийте налаштування елемента й перевірте, що HTML classes показує групу з назвою вашої теми та двома записами.

Кожна встановлена тема з цим ключем додає свою групу, не лише типова тема. Група завжди має назву теми; файл info не може її перейменувати.

Реєстрація класів з модуля

Власний модуль може додавати класи або вилучати класи, зареєстровані темою, за допомогою хука alter. Він не може вилучити вбудовані записи Bootstrap, бо редактор додає їх у браузері. Код наведено в Довіднику Hooks API.

Версія Bootstrap

Вбудований список це Bootstrap 5. Якщо ваша тема не завантажує Bootstrap 5, установіть Sideload Bootstrap files у значення Bootstrap 5 у розділі Bootstrap за шляхом DXPR Studio > DXPR Builder > General Settings, щоб класи мали CSS за собою. Що саме це завантажує, див. на сторінці Продуктивність.

Якщо ви не бачите своїх класів

  • Групи вашої теми немає в HTML classes. Drupal досі використовує стару копію файла info теми. Натисніть Clear all caches у Configuration > Development > Performance (/admin/config/development/performance) або виконайте drush cr.
  • Тема з ключем не додає групи. Враховуються лише встановлені теми. Встановіть тему в Appearance (/admin/appearance); вона не мусить бути типовою темою.
  • Елемент виглядає так само після вибору класу. На сторінці не завантажується CSS для цього класу. Додайте правила до бібліотеки, яку завантажує ваша тема, див. Власний CSS. Про класи Bootstrap див. Версія Bootstrap.

Що далі?