Szablony i Sitepackages TYPO3: Custom zamiast gotowych

Gotowe szablony TYPO3 oszczędzają czas na krótką metę i kosztują więcej na dłuższą

Pokusa jest duża: kupić gotowy szablon TYPO3 za 79 euro, zainstalować, wymienić logo - gotowe. W rzeczywistości zaczyna się tym cykl obejść, nadpisań i konfliktów wersji, który utrudnia każdą aktualizację i hamuje dalszy rozwój. dmpr_template reprezentuje tę kategorię. Gosign zaleca zamiast tego Custom Sitepackages: indywidualne pakiety szablonów, dokładnie dopasowane do wymagań, łatwe w utrzymaniu i wersjonowalne.

Sitepackage to rozszerzenie TYPO3 zawierające kompletną konfigurację frontendu: TypoScript, szablony Fluid, Partials, Layouts, CSS/SCSS, JavaScript i Backend-Layouts. To oficjalna best practice TYPO3 od wersji 8, zastępująca starą metodę konfigurowania szablonów w systemie plików.

Typowe scenariusze zastosowania

Relaunch korporacyjny z indywidualnymi wymaganiami. Przedsiębiorstwo rozpoczyna relaunch strony. Projekt istnieje jako plik Figma, architektura informacji jako mapa strony, typy treści są zdefiniowane. Custom Sitepackage tłumaczy te wymagania 1:1 na TYPO3: każdy typ treści jest odwzorowany jako Backend-Layout lub Custom Content Element, szablony Fluid odpowiadają projektowi z dokładnością do piksela. Żaden framework szablonów nie stoi pomiędzy, wymuszając kompromisy.

Konfiguracja Multi-Site ze współdzielonymi komponentami. Korporacja prowadzi 5 witryn marek w jednej instancji TYPO3. Wszystkie współdzielą bazowy Sitepackage z systemem gridów, typografią i komponentami bazowymi. Każda marka ma własny Sitepackage rozszerzający bazowe rozszerzenie: kolory, logo, układy specyficzne dla marki. Zmiany w bazie wpływają na wszystkie 5 stron bez utrzymywania 5 osobnych baz kodu.

Migracja ze starych konfiguracji szablonów. Instalacje TYPO3 z wersji 6 lub 7 często używają TemplaVoila, Fluid Styled Content z rozbudowanymi nadpisaniami TypoScript, a nawet szablonów opartych na markerach. Migracja na czysty Sitepackage modernizuje cały stos frontendowy w jednym kroku: z dala od globalnych konfiguracji TypoScript, ku wersjonowalnemu rozszerzeniu z jasną strukturą katalogów.

Architektura techniczna

Sitepackage to regularne rozszerzenie TYPO3 ze zdefiniowaną strukturą katalogów:

Configuration/TypoScript/ zawiera konfigurację TypoScript: Constants, Setup, Page-TSconfig. Tu definiuje się, które szablony obowiązują dla których typów stron, jakie elementy treści są dostępne i jak są renderowane.

Resources/Private/Templates/ zawiera szablony Fluid dla typów stron (Page), elementów treści (ContentElements) i Partials (wielokrotnie używalne fragmenty szablonów). Podział na Templates, Partials i Layouts podąża za konwencją Fluid TYPO3.

Resources/Public/ zawiera CSS/SCSS, JavaScript, obrazy i fonty. Wszystko, co przeglądarka dostarcza bezpośrednio. W nowoczesnych konfiguracjach SCSS jest kompilowane narzędziem budowania (Vite, Webpack), a wygenerowane pliki umieszczane w Resources/Public/Build/.

Configuration/TCA/ definiuje Backend-Layouts i Custom Content Elements. Backend-Layouts sterują, jakie kolumny i obszary są dostępne na stronie w backendzie. Custom Content Elements są definiowane przez TCA, TypoScript i szablony Fluid.

Sitepackage jest instalowane przez Composer i przypisywane do odpowiedniej strony TYPO3 przez Site Configuration (config.yaml). Wiele stron może używać tego samego Sitepackage (Multi-Site) lub mieć własne.

Częste problemy i rozwiązania

Gotowe szablony kolidują z aktualizacjami TYPO3. Kupione szablony często nadpisują konfiguracje rdzenia i definicje TCA w sposób, który psuje się przy aktualizacjach TYPO3. Szablon opracowany dla TYPO3 v10 często nie działa po aktualizacji do v12, ponieważ wizardy TCA, rejestracja Backend-Layout i ViewHelpery Fluid się zmieniły. Z Custom Sitepackage samodzielnie kontrolujesz, które funkcje rdzenia są używane, i możesz przeprowadzać aktualizacje stopniowo.

Struktura Sitepackage rozrasta się niekontrolowanie. Z biegiem lat w Sitepackage gromadzą się dziesiątki Partials, osierocone szablony i fragmenty TypoScript. Rozwiązanie: regularne refaktoryzowanie. Czysty Sitepackage ma maksymalnie 20-30 Partials, jasne konwencje nazewnictwa (PascalCase dla szablonów, foldery według funkcji) i żadnych nieużywanych plików. Nakład pracy na refaktoryzację to 2-5 dni, w zależności od rozmiaru.

Konflikty specyficzności CSS z Fluid Styled Content. Fluid Styled Content TYPO3 dostarcza własne klasy CSS (ce-, frame-). Gdy Sitepackage używa własnych klas, powstają konflikty specyficzności. Rozwiązanie: albo całkowite zastąpienie Fluid Styled Content własnymi definicjami elementów treści (czystsze, ale bardziej pracochłonne), albo nadpisanie szablonów Fluid Styled Content i dostosowanie klas.

Migracja i kompatybilność wersji

Koncepcja Sitepackage jest standardem od TYPO3 v8 i jest rozwijana z każdą nową wersją TYPO3. Podstawowa struktura (rozszerzenie z TypoScript, szablonami Fluid, TCA) pozostaje stabilna. Dostosowania przy aktualizacjach major dotyczą typowo składni TCA (wizardy, renderTypes), warunków TypoScript (nowe: Symfony Expression Language) i rejestracji modułów backendowych.

Migracja z gotowego szablonu (dmpr_template, j77_template, in2template) na Custom Sitepackage to przepisanie, nie portowanie. Analizuje się istniejące szablony, ekstrahuje pożądaną funkcjonalność i buduje ją na nowo w czystej strukturze Sitepackage. Przy typowym projekcie z 10 typami stron i 15 elementami treści nakład pracy to 2-3 tygodnie.

TYPO3 v13 wprowadza Content Blocks jako nową koncepcję definicji elementów treści. Content Blocks znacznie upraszczają tworzenie Custom Content Elements i redukują kod boilerplate. Sitepackages pozostają tym nienaruszone - mogą dodatkowo korzystać z Content Blocks. Gosign od lat buduje wyłącznie Custom Sitepackages i ma doświadczenie w efektywnej migracji istniejących konfiguracji szablonów na nowoczesne struktury.