Tworzenie podmotywu DXPR Theme (Drupala 11).

Poznaj DXPR ThemeTworzenie motywu potomnego

DXPR Theme zmienia kolory, czcionki, nagłówek, odstępy i układ z panelu ustawień, więc większość witryn nie potrzebuje ani linijki CSS. Podmotyw jest dla reszty: własny arkusz stylów, nadpisania szablonów, dodatkowe biblioteki albo paleta kolorów dostarczana z kodem. Podmotyw dziedziczy każdy arkusz stylów i szablon DXPR Theme, ma własne ustawienia, a aktualizacje DXPR Theme go nie naruszają.

Ten przewodnik obejmuje DXPR Theme 8.2 na Drupalu 10.3 i Drupalu 11. Używany zestaw startowy jest w motywie pod adresem dxpr_theme/dxpr_theme_STARTERKIT; polecenie „generate-theme” jądra Drupala nie jest używane, bo DXPR Theme daje własny zestaw startowy i polecenie.

Zanim zaczniesz

Dodaj DXPR Theme i włącz jego moduł pomocniczy, którego motyw potrzebuje, zanim Drupal go zainstaluje:

composer require drupal/dxpr_theme
drush en dxpr_theme_helper

1. Wygeneruj podmotyw z zestawu startowego

Najszybsze jest polecenie Drusha, które daje DXPR Theme Helper. Uruchom je z katalogu głównego projektu; sprawdza nazwę maszynową, kopiuje zestaw startowy do themes/custom i zmienia nazwy wszystkiego na twoją nazwę maszynową:

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

Bez argumentów polecenie pyta o obie nazwy. Bez Drusha użyj skryptu z motywu: przejdź do web/themes/contrib/dxpr_theme, raz nadaj skryptom prawa wykonywania poleceniem chmod +x scripts/*, uruchom ./scripts/create_subtheme.sh i wpisz nazwę czytelną dla człowieka oraz maszynową, gdy skrypt o nie poprosi. Skrypt działa tylko w tym folderze.

Tak czy inaczej dostajesz web/themes/custom/northwind_theme, z plikami i konfiguracją zestawu startowego nazwanymi twoją nazwą maszynową; symbol THEMETITLE zastąpiono w plikach info i schematach.

2. Włącz go i raz zapisz ustawienia

  1. Przejdź do Wygląd i wybierz Zainstaluj i ustaw jako domyślny dla swojego podmotywu.
  2. Otwórz Ustawienia podmotywu i naciśnij Zapisz konfigurację, niczego nie zmieniając.

Ten pierwszy zapis generuje arkusz stylów ustawień nowego motywu. Podmotyw startuje z domyślnych ustawień zestawu startowego, nie z ustawień zrobionych w DXPR Theme. Aby je przenieść, wyeksportuj je z DXPR Theme i zaimportuj do podmotywu:

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

Od tej pory panel działa dokładnie jak w DXPR Theme: kolory, typografia, nagłówek, stopka i odstępy należą do podmotywu.

Regiony podmotywu trzymaj identyczne z regionami motywu bazowego. Zestaw startowy deklaruje te same czternaście regionów co DXPR Theme, a opcja Ukryj regiony modułu DXPR Theme Helper w treściach odwołuje się do nich po nazwie.

3. Co daje zestaw startowy

  • northwind_theme.info.yml: base theme: dxpr_theme, regiony i jedną bibliotekę, global-styling, która ładuje twój arkusz stylów. Zakomentowany blok libraries-override wymienia biblioteki DXPR Theme, które najpewniej wyłączysz, od dxpr_theme/bootstrap-5 do dxpr_theme/helper-classes.
  • css/dxpr_theme_subtheme.css: ładowany na każdej stronie po arkuszach motywu. Twój CSS trafia tutaj.
  • templates/: pusty poza README. Skopiuj tu dowolny szablon z dxpr_theme/templates, aby go nadpisać.
  • config/install i config/schema: domyślne ustawienia i ich schemat, nazwane twoim motywem.
  • color-settings.json: własne nazwane palety kolorów, widoczne na liście schematów kolorów obok wbudowanych.
  • logo.svg, favicon.ico, screenshot.png: zamień je na swoje.

4. Pisz CSS zgodny z ustawieniami

DXPR Theme zapisuje ustawienia w zmiennych CSS: --dxt-color-* dla palety oraz --dxt-setting-* dla typografii, odstępów i układu; mapuje je na zmienne --bs-* Bootstrapa. Używaj zmiennych w arkuszu zamiast stałych wartości, a twój CSS podąży za panelem, gdy ktoś zmieni kolor albo czcionkę.

/* 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);
}

Kolor bazowy, kolory akcentujące, tekst, nagłówki, odnośniki, karty i stopka mają zmienną. Pełna lista jest w README motywu w rozdziale CSS Custom Properties (Variables) Reference.

5. Nadpisuj szablony i biblioteki

Skopiuj zmieniany szablon z themes/contrib/dxpr_theme/templates do folderu templates podmotywu; zachowaj nazwę pliku, edytuj go i wyczyść pamięci podręczne. Drupal wybiera najpierw kopię podmotywu.

Aby porzucić arkusz stylów lub skrypt motywu bazowego, odkomentuj wiersz libraries-override: w pliku info razem z wierszami usuwanych bibliotek; mają już ustawione false. Aby dodać własne, zadeklaruj więcej bibliotek w northwind_theme.libraries.yml i wymień je w libraries w pliku info, tak jak zestaw startowy robi dla global-styling.

6. Daj redaktorom swoje klasy w DXPR Builder

Klasy zadeklarowane w dxpr_builder_classes: w pliku info podmotywu pojawiają się w selektorze klas DXPR Builder, więc redaktorzy nakładają twój ciemny pas albo szklany panel bez wpisywania nazwy klasy. Ostyluj klasę w dxpr_theme_subtheme.css, w zakresie elementów DXPR Builder, do których jest przeznaczona.

7. Dołącz paletę kolorów do motywu

Dodaj nazwane schematy do color-settings.json w katalogu głównym podmotywu. Każdy schemat ustawia te same klucze, których używa panel: base, basetext, link, accent1, accent2, text, headings, card, footer, header, pagetitle i resztę. Schemat pojawia się na liście schematów kolorów formularza ustawień, więc witryna przełącza się na paletę marki jednym kliknięciem.

8. Późniejsze aktualizowanie DXPR Theme

  1. Zaktualizuj motyw bazowy Composerem: composer update drupal/dxpr_theme --with-dependencies.
  2. Uruchom aktualizacje bazy danych i wyczyść pamięci podręczne.
  3. Otwórz formularz ustawień podmotywu i zapisz go jeszcze raz, aby arkusz stylów ustawień wygenerował się od nowa z nowymi zmiennymi.
  4. Czytaj informacje o wydaniu pod kątem zmian szablonów i regionów oraz porównaj każdy nadpisany szablon z nową wersją.

Zleć stylowanie agentowi AI

DXPR Theme 8.1.1 i nowsze daje skilla agentowego. Uruchom drush dxt:setup-ai w swoim projekcie, a twój agent kodujący (Claude Code, Codex, Gemini CLI albo Cursor) pozna ustawienia motywu i ich znaczenie. Opisz markę, a agent ustawi kolory, typografię, układ nagłówka i odstępy tymi samymi ustawieniami, które zapisuje panel; wynik przejrzysz w witrynie. Podmotyw też utworzy poleceniem drush dxt:subtheme:create.

Skill DXPR Builder robi to samo dla stron, a Drush Webmaster dla treści i Views. Zobacz skille agentowe w akcji.

Pytania o podmotywy DXPR Theme

Nie. Kolory, czcionki, nagłówek, stopka, odstępy i układ to ustawienia w panelu DXPR Theme. Podmotyw służy tylko własnemu CSS, nadpisaniom szablonów, dodatkowym bibliotekom albo palecie dostarczanej z kodem.

Tak. Po drush dxt:setup-ai agent zna ustawienia motywu i zmienia je na podstawie briefu, a podmotyw utworzy samodzielnie poleceniem drush dxt:subtheme:create. Wynik przejrzysz w witrynie.

Te same co DXPR Theme 8.2: Drupal 10.3 i nowsze oraz Drupal 11. Plik info zestawu startowego deklaruje też starsze wersje, ale DXPR Theme 8.2 zależy od modułów, które potrzebują Drupala 10.3.

Nie. Composer wymienia tylko themes/contrib/dxpr_theme; twój podmotyw mieszka w themes/custom. Po aktualizacji raz zapisz formularz ustawień podmotywu, aby jego arkusz stylów przejął nowe zmienne.