Klasy narzędziowe.

Poznaj DXPR BuilderZarządzaj witrynąDopasuj do marki

Każdy element ma pole HTML classes z listą nazwanych klas. Narzędzia Bootstrap 5 i cienie rozwijane są wbudowane. Twój motyw może dodać własną grupę przez swój .info.yml, a moduł przez hook alter. Ta strona wyjaśnia zawartość listy i rejestrację własnych klas, aby redaktorzy wybierali wygląd marki po nazwie zamiast wpisywać nazwy klas.

Zastosowanie klasy

  1. Otwórz ustawienia elementu i znajdź HTML classes na dole panelu General.
  2. Kliknij pole i wybierz klasę z listy. Pisanie w polu filtruje listę.
  3. Aby wpisać klasę spoza listy, kliknij Edit as text i ją wpisz.
  4. Kliknij Save w oknie, potem Save na pasku narzędzi kreatora.

Klasy trafiają do atrybutu class elementu w zapisanym HTML. HTML ID i klasy prowadzą redaktorów przez typowe zastosowania.

Zawartość listy

Edytor buduje listę przy starcie. Łączy trzy źródła w tej kolejności:

  1. Listę wbudowaną. Zawiera grupę Drop shadows, krótką grupę Bootstrap classes i narzędzia Bootstrap 5, pogrupowane według zadania: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors i inne.
  2. Grupę dla każdego zainstalowanego motywu, którego .info.yml ma klucz dxpr_builder_classes. Grupa jest oznaczona nazwą motywu.
  3. Zmiany z modułów, zobacz rejestrację klas z modułu.

Lista klas HTML otwarta w panelu General elementu Text, przewinięta do grupy o nazwie DXPR Theme z pozycjami takimi jak Inline Form i Background color: DXPR Theme accent1

Każda witryna ma więc klasy odstępów, takie jak mt-3 i px-4, wyświetlania, takie jak d-none, i tekstu, takie jak text-center i fw-bold. Niczego dla nich nie konfigurujesz.

Rejestracja klas w motywie

Dodaj mapowanie dxpr_builder_classes do .info.yml motywu. Każdy klucz to nazwa klasy albo kilka oddzielonych spacjami; każda wartość to etykieta widziana przez redaktorów. Motyw DXPR rejestruje swoje klasy tak:

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. Dodaj mapowanie do themes/custom/mytheme/mytheme.info.yml:

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

  2. Napisz CSS dla klas w bibliotece wczytywanej przez motyw na każdej stronie; zobacz własny CSS.

  3. Wyczyść pamięci podręczne poleceniem drush cr, aby Drupal ponownie odczytał plik info.

  4. Otwórz ustawienia elementu i sprawdź, czy HTML classes pokazuje grupę z nazwą twojego motywu i dwoma pozycjami.

Każdy zainstalowany motyw z kluczem dodaje swoją grupę, nie tylko motyw domyślny. Grupa zawsze nosi nazwę motywu; plik info nie może jej zmienić.

Rejestracja klas z modułu

Własny moduł może dodać klasy albo usunąć klasy zarejestrowane przez motyw hookiem alter. Nie może usunąć wbudowanych wpisów Bootstrapa, ponieważ edytor dodaje je w przeglądarce. Kod znajduje się w dokumentacji hooków API.

Wersja Bootstrapa

Lista wbudowana to Bootstrap 5. Jeśli twój motyw nie wczytuje Bootstrap 5, ustaw Sideload Bootstrap files na Bootstrap 5 w Bootstrap w DXPR Studio > DXPR Builder > General Settings, aby klasy miały CSS za sobą. Zobacz wydajność, aby poznać ładowane pliki.

Jeśli nie widzisz swoich klas

  • Grupy twojego motywu brakuje w HTML classes. Drupal nadal używa starej kopii pliku info motywu. Kliknij Clear all caches w Configuration > Development > Performance (/admin/config/development/performance) albo uruchom drush cr.
  • Motyw z kluczem nie dodaje grupy. Liczą się tylko zainstalowane motywy. Zainstaluj motyw w Appearance (/admin/appearance); nie musi być motywem domyślnym.
  • Element wygląda tak samo po wybraniu klasy. Żaden CSS dla tej klasy nie ładuje się na stronie. Dodaj reguły do biblioteki wczytywanej przez motyw, zobacz własny CSS. Dla klas Bootstrapa zobacz wersję Bootstrapa.

Co dalej?