Witaj, niniejszy artykuł rozpoczyna cykl poświęcony metodom wykorzystania szablonów graficznych do wyświetlania treści. W przeciwieństwie do wielu popularnych CMS'ów TYPO3 po instalacji nie wyświetla nic, należy go dopiero przystroić w odpowiednią szatę. Można dyskutować czy takie podejście ma sens – dla doświadczonych Typistów rozpoczynanie pracy na zupełnie czystym systemie z całą pewnością jest na rękę – wszakże mogą oni za każdym razem zbudować nowy układ idealnie dopasowany do potrzeb danej witryny bez konieczności niwelowania odgórnie narzuconych zachowań, które w danym przypadku byłyby po prostu zbędne. Jeśli jednak dopiero zaczynasz swoją przygodę z tym systemem możesz się czuć jak dziecko we mgle. Nie dość, że nic nie widać, to ciężko znaleźć krótką ale i zwięzłą informację jak uruchomić swój pierwszy serwis. Niniejsza seria artykułów przeznaczona jest właśnie dla osób początkujących i ma ona ułatwić opanowanie podstaw szablonowania w TYPO3 w stopniu umożliwiającym utworzenie w pełni funkcjonującej witryny. Po tej lekturze posiłkując się dokumentacją TSref powinieneś bez większego trudu mieć możliwość budowania prostych stron w wykorzystaniem kilku szablonów.
U zarania stron internetowych do edycji treści stosowało się zwykłe edytory tekstowe. Serwisy składały się z kilku albo kilkunastu niezależnych plików HTML powiązanych ze sobą hiperlinkami (zresztą wiele stron nadal działa w ten sposób). Podstawową wadą takiego rozwiązania była konieczność wprowadzania zmian w wielu plikach podczas modyfikacji elementów wspólnych takich jak nagłówki, stopki etc. Także utworzenie nowej strony wymagało zmodyfikowania wszystkich stron serwisu w celu uaktualnienia nawigacji. Oczywiste jest, że do takiej operacji wymagane było zaangażowanie i determinacja osoby znającej zagadnienia HTML i posiadającej mapę serwisu w głowie, co przy rozroście objętości dość szybko stawało się zadaniem trudnym i żmudnym... a przede wszystkim bezsensownym. Po co powielać proste czynności kilkadziesiąt razy za każdym razem, gdy wymagana jest tylko na pozór drobna zmiana. Poza wszystkim wielkie serwisy edytowane ręcznie zawsze tracą na spójności pomiędzy stronami i z biegiem każda strona zaczyna wyglądać trochę inaczej.
Na ratunek przyszły systemy publikacji treści. Od czasu ich rozpowszechnienia edycja zawartości serwisu lub jego struktury wyeliminowała potrzebę aktualizacji elementów nawigacyjnych i pozwoliła skupić się na samej treści. Co ważniejsze jednak umożliwiła ona przede wszystkim pracę nad treścią osobom nie posiadającym żadnej wiedzy na temat HTML.
Ogólnie większość popularnych systemów używanych dziś do publikacji treści działa na tej samej zasadzie: na dysku serwera zapisana jest strona HTML reprezentująca upragniony układ graficzny danego serwisu oraz posiadająca specjalne znaczniki, które następnie wypełniane są treścią z bazy danych i ew. działaniem skryptów pomocniczych. Dzięki takiemu podejściu wszystkie strony serwisu wyglądają identycznie a co najważniejsze edytując jeden plik możemy zmodyfikować wygląd czy treść tysięcy podstron naraz. Co istotne także elementy mocno dynamiczne, takie jak nawigacja, mapy serwisu, lista aktualności uaktualniane są automatycznie, bez konieczności rozkopywania kodu 100 stron przy każdej literówce...
Pomimo, że większość stron znacznie różni się od siebie istnieje pewien schemat budowy serwisów internetowych widoczny w przeważającej ilości portali. Rzecz jasna nie idzie tu o detale graficzne na danej stronie, lecz o elementy stosowane, rozpoznawane i wręcz konieczne do sprawnego poruszania się po serwisie w każdym kierunku. Dlatego większość szablonów stron składa się bloku treści oraz bloku nawigacyjnego i szczerze powiedziawszy nie wyobrażam sobie serwisu bez tych elementów :) Dodatkowo najczęściej dochodzą do tego nagłówek i stopka. Koniec filozofii inaczej być nie chce, nawet bardzo zaawansowane prezentacje Flash posiadają te elementy, albo widoczne na wierzchu albo ukryte gdzieś pod rozwijaną fiszką, ale zawsze gdzieś to jest. Budując szablon własnej strony prawdopodobnie sam zaczniesz od ich lokalizacji oraz treści. Przeglądając serwisy srpzedające szablony graficzne również szybko zorientujesz się, że te elementy występują w większości produktów. Ogólnie korzystając z tej wiedzy w tym cyklu będę się koncentrował właśnie na tych 4 bloakch oraz ich wariacjach.
Hmmm... mam nadzieję, że Cię nie zanudziłem dość długim słowem wstępu... wszakże zawsze możesz skoczyć do … dzieła :)
Tak jak pisałem wcześniej TYPO3 wykorzystuje szablony na tej samej zasadzie co inne systemy – pobiera z dysku „sztampę” i wypełnia ją we wskazanych miejscach danymi z bazy danych – najczęściej treścią stron (z tabeli tt_content) lub danymi wygenerowanymi przez rozszerzenie (np. Aktualności z tt_news czy pokaz obrazków z DAM) – cokolwiek.
Główną różnicą pomiędzy TYPO3 a popularnymi systemami CMS i blog jest sposób wskazywania w kodzie szablonu HTML miejsc do których treść ma być wrenderowana. Większość znanych mi systemów wykorzystuje do tego celu po prostu funkcje PHP wstawione bezpośrednio w kod HTML za pomocą znacznika skryptów. Następnie parser PHP wykonuje daną funkcję która drukuje dynamiczną zawartość.
W najbardziej popularnej metodzie szablonowania TYPO3 posiada wewnętrzne parsowanie szablonów, w treści zamieszcza się znaczniki w postaci zwykłego tekstu a następnie TYPO3 zamienia je na wskazane elementy. Podstawową zaletą takiego rozwiązania jest fakt, że nie musisz się ograniczać wyłącznie do funkcji i zmiennych zaprogramowanych przez twórców systemu, ale możesz wstawiać w dowolnym miejscu szablonu wynik działania dowolnego rozszerzenia, czy określony zasoby z bazy danych. Metoda ta nie wymaga w ogóle znajomości PHP, co jest dość istotne, bo nieprzestrzeganie podstawowych zasad programowania może sprowadzić poważne niebezpieczeństwo na zgromadzone dane a wręcz cały serwis z drugiej jednak strony wymaga wczytania się i zrozumienia TypoScriptu (TSref Twoim przyjacielem :) )
Obecnie najczęściej stosowaną metodą wykorzystania szablonów jest to to co w nagłówku :) Choć można podpiąć szablon zupełnie bez jej wykorzystania, znajomość podstawowych zasad jest o tyle istotna, że wg modelu MTB obsługiwane są szablony wszystkich rozszerzeń (o ile autorzy tych rozszerzeń przewidzieli wykorzystanie szablonów). W MTB do szablonu HTML wstawiane są tzw. marks (znaczniki pojedyncze) oraz subparts (znaczniki zastępujące cały otoczony fragment). Szablon dla TYPO3 wg modelu MTB może przygotować każdy grafik/HTML'owiec jako, że nie musi znać nazw własnych danych funkcji, może po prostu używać opisowych kluczy na zasadzie:
###TU_BEDA_NEWSY###
###TU_BEDZIE_NAWIGACJA###
i tak dalej, dopiero później Ty podpinając treść do systemu TYPO3 zdecydujesz co de facto do tych znaczników zostanie wrenderowane.
Co więcej, zaletą takiego podejścia jest fakt, że możesz kupić, czy ściągnąć po prostu gotowy szablon strony HTML (bez żadnych znaczników) i przy porannej kawie wstawić za pomocą edytora tekstowego wymagane znaczniki w odpowiednich miejscach...
Przygotowanie szablonu strony w postaci pliku HTML (dalej szablon-HTML) ze znacznikami i ew. pliku CSS (oraz graficznych) to dopiero pierwsza część układanki. Do poprawnego działania strony wymagane jest utworzenie szablonu TypoScript (dalej szablon-TS). Jest to rekord bazy danych w którym instruujesz system jaki plik na dysku jest szablonem-HTML oraz co ma być wprowadzone w miejscach wystąpienia znaczników. To w tym miejscu decydujesz, że marks.NAJNOWSZE_NEWSY, które w szablonie-HTML występują jako ###NAJNOWSZE_NEWSY### mająpokazywać listę ostatnich 10 wpisów tt_news... proces ten nazywa się mapowaniem znaczników.
W tym miejscu budujesz podstawowe elementy do wrenderowania w znaczniki. Na pewno będzie to treść z jednej z 4 kolumn dostępnych w domyślnym układzie (lewa, normalna, prawa, boczna) lub wynik działania rozszerzenia oraz najprawdopodobniej element nawigacyjny, czyli menu. Być może będziesz chciał w tym miejscu zdefiniować również dynamiczne odmiany nagłówka i stopki np. w sytuacji, gdy te bloki mają zawierać osobne menu (header menu, footer menu ) lub inne elementy dynamiczne.
W szablonie-TS poza mapowaniem konfigurujesz również szereg innych elementów skłądających się na wynikową stronę jaką odbiera klient, tutaj możesz określić kodowanie znaków na stronie (swoją drogą zalecam abyś już teraz przestawił się na UTF-8 jeśli nadal pracujesz na ISO... ale to temat na zupełnie inny wątek) domyślny język dla rozszerzeń (zwłaszcza jeśli serwis jest w innym języku niż angielski), zachowanie linków... itd., etc. Także w szablonie-TS podpinasz do sekcji <head> zewnętrzne pliki JavaScript i CSS.
Pełen opis budowy podstawowego szablonu z wykorzystaniem MTB ukaże się w drugim artykule tej sekcji.
TemplaVoila również służy do mapowania elementów zdefiniowanych w szablonie-TS z tą jednak różnicą, że nie wykorzystuje do mapowania znaczników marks i subparts – do określenia odpowiednich miejsc stosowane są typowe znaczniki HTML takie jak choćby kontener - div czy paragraf - p. Dla grafika oznacza to jeszcze łatwiejsze zadanie, gdyż nie musi on w ogóle się przejmować czymś takim jak „jakiś tam system” po prostu dostarcza Ci zwykła stronę HTML, którą Ty później mapujesz specjalnym narzędziem typu wskaż i zmapuj. Jedyne co musisz przekazać grafikowi to to, żeby TV nie miała zbyt trudnego zadania podczas rozczytywania struktury pliku, miejsca w których mają wystąpić mapowane treści najlepiej zaopatrzyć w unikatowy id, jednakże biorąc pod uwagę, że na potrzeby stylizacji CSS już najprawdopodobniej zastosowane są identyfikatory elementów nie będzie to dla niego żadnym wyzwaniem.
W TV typowe elementy deklaruje się w tzw. StrukturzeDanych (DataStructure – DS) a następnie mapuje się te fragmenty za pomocą ObiektuSzablonu (TemplateObject – TO) więc wydawałoby się, że jest to zbędne, dodatkowe ogniwo podczas mapowania. Jednakże stosowanie TV pozwala na stworzenie bardziej dopasowanego wdrożenia, gdyż w każdym z szablonów (a nie zapominaj że w serwisie mogą być ich dziesiątki) możesz użyć zupełnie różnych kolumn oraz ich ilości (nawet kilkadziesiąt kolumn jeśli się uprzesz!. Dla przypomnienia w MTB występują 4 kolumny domyślne, które co prawda można poprzestawiać, odjąć, lub dodać nowe, ale jest to dużo mniej intuicyjne niż w przypadku TV.
Więcej o TemplaVoila napiszę w 3 części serii.
No i masz babo placek, co tu wybrać? Osobiście od pewnego czasu preferuję model TV, tym bardziej, że po ostatnich zmianach personalnych w składzie dev-team jego rozwój dość znacznie nabrał tempa.
Z drugiej strony model klasyczny, MTB jest stosowany w dużo szerszym zakresie (jak pamiętasz służy do szablonowania rozszerzeń) więc i tak jego znajomość jest niezbędna. Z całą pewnością MTB w zupełności wystarczy do budowy serwisu w którym występują max 4 kolumny treści tym bardziej, jeśli w obrębie całej witryny używany będzie ten sam szablon HTML. Poza wszystkim w TypoScript możliwe jest również wykorzystanie warunków (tzw. conditions) w celu zmiany szaty danej strony bez tworzenia odrębnych szablonów-TS, więc konkludując – wykorzystując MTB można zrealizować każdy serwis niezależnie od wielkości.
TemplaVoila dla odmiany najefektywniej sprawdza się w przypadkach, gdzie rozległe serwisy na wielu stronach i wielu gałęziach wykorzystują czasem nawet bardzo zróżnicowane szablony. Pomimo że można tym bez większego trudu zarządzać w MTB z kilkoma dodatkami, TV naprawdę uprzyjemnia pracę podczas późniejszego zarządzania treścią. Niestety jest to opłacone również większym nakładem pracy wdrożeniowca TYPO3 podczas samego procesu podpinania szablonów.
Optymalnym podejściem jest sposób w jaki ja sam doszedłem do znajomości tych metod. W pierwszym etapie nauki zapoznałem się dość dobrze ze sposobem klasycznym bo wydawało mi się, że TV jest w ogóle zbędnym wymysłem... Dopiero jakiś czas potem przystąpiłem do projektu na którego potrzeby „musiałem” poznać TV i jak się okazało nie taki diabeł straszny, jak go malują. Obecnie jestem w stanie zmapować szablon w TV z taką samą łatwością jak MTB (żeby nie powiedzieć, że jeszcze szybciej) a co najważniejsze, dobra znajomość obu technik daje mi do ręki naprawdę potężne możliwości. Czego również Tobie życzę :)
Następny artykuł pojawi się najwcześniej za kilka tygodni, ale jeśli już teraz potrzebujesz ruszyc z kopyta koniecznie zapoznaj się z tymi materiałami:
Omówienie podstaw MTB w formie prezentacji (na jego podstawie powstanie drugi artykuł cyklu):
http://dev.typo3.pl/uploads/media/T3UG_01_Szablony.pdf
Na oficjalnej stronie z dokumentacją znajdziesz między innymi :
http://typo3.org/documentation/document-library/core-documentation/
W tutorialach znajdziesz opisy MTB (jako Modern Template Building) oraz TemplaVoila (jako Futuristic Template Building):
http://typo3.org/documentation/document-library/tutorials/
Poza wszystkim na forum istnieje dział poświęcony szablonom i TypoScriptowi a także w sekcji FAQ możesz znaleźć kilka ciekawych rozwiązań, np. do zmiany szablonów podstron w modelu MTB.
a.k.a. Marek Krawczyk, współorganizator polskiej społeczności TYPO3
