Z racji, że opis niedawno prezentowanego systemu zarządzania treścią Gelato przyniósł dosyć duże zainteresowanie, postanowiliśmy przygotować dla was poręczny opis procesu wdrążania własnego szablonu do systemu Gelato.

Pierwszym i dosyć istotnym elementem jaki należy wykonać jest zaprojektowanie szaty graficznej naszego szablonu. Należy przemyśleć oraz zaplanować układ strony, ustalić kolorystykę wszelkich elementów występujących na stronie (tło, kolor tekstu, linków itd...). Warto w tym miejscu zaznaczyć, że system Gelato jest bardzo prostym silnikiem zarządzania treścią, jego szablony można nazwać mianem minimalistycznych gdyż prostota systemu nie pozwala na bardziej rozbudowane formy prezentacji.

Kiedy grafika już jest precyzyjnie dopracowana i przemyślana przechodzimy do cięcia oraz kodowania szablonu (xhtml/css). Opierając się o własne doświadczenie mogę polecić zakodowanie strony głównej w jednym pliku na sam początek, bo później i tak będziemy dokonywali na podstawie tego pliku kilka operacji.

Więcej o kodowaniu stron www dowiecie się czytając tutorial temu poświęcony.

Żeby zobrazować jak powinien wyglądać przykładowy szablon z charakterystycznym dla Gelato układem do zapoznania się z tym stworzonym przez vivee:

Kodowanie

a oto kod owego szablonu:

oraz plik css:

Ważne aby stworzona przez nas strona wyświetlała się poprawnie w popularnych przeglądarkach, oraz spełniała normy i standardy obowiązujące podczas tworzenia stron www

Wdrążanie

Po stworzeniu szablonu html możemy zacząć wdrążać go w nasz system Gelato. Najprostszym sposobem na dokonanie tego jest przystosowanie naszego szablonu do wymogów galeto posługując się defaultowym szablonem który znajduje się w archiwum po pobraniu systemu cms.

Zabieramy się do tego kolejno edytując wszystkie pliki szablonu o nazwie tumblr. Znajduje się on w katalogu: \gelato\themes\tumblr.

Dla przykładu zobrazuję proces edycji pliku: template_regular_post.htm, a więc pliku odpowiadającego za wyświetlanie postów.

Znajduje się w nim kilka zmiennych są to:

• {Date_Added} – data dodania wpisu
• {Permalink} – adres pojedynczego wpisu
• {Title} - tytuł
• {Body} –treść

Aby w naszym szablonie funkcjonowały powyższe zmienne należy je wkomponować we fragment kodu odpowiadający za wyświetlanie wpisów i całość zapisać pod nazwą: template_regular_post.htm

Analogicznie postępujemy z kolejnym plikiem np.: template_comments.htm odpowiedzialny za wyświetlanie wpisu z komenarzami.
Znajdujemy kolejne fragmenty kodu:

• {Comments_Number} –numer komentarza
• {Post_Title} – tytuł wpisu
• [bloque: comments] –rozpoczęcie bloku komenatrzy
• {Comment_Author} – autor komentarza
• {Date} – data dodania
• [/bloque: comments] –zakończenie bloku komentarzy

Powyższych zmiennych używamy w naszym szablonie po czym zapisujemy go pod nazwą template_comments.htm w katalogu z naszym themem.

W późniejszej fazie administrowania stroną system komentarzy należy włączyć w panelu administratora (Options > Allow readers comments: Active)

Tak należy postąpić ze wszystkimi plikami znajdującymi się w katalogu skórki defaultowej.

Aby elementy na stronie były właściwie ostylowane musimy wcześniej przygotowany plik css naszego szablonu zapisać w folderze z edytowaną skórą. Pod nazwą style.css

Gdy już wszystko przygotujemy nasz gotowy katalog z themem wysyłamy na serwer do katalogu \themes\nazwa_naszej_skory\.

Ostatnim krokiem który sprawi, że nasz szablon ujrzy światło dzienne jest ustawienie go jako szablon główny w panelu administratora systemu Gelato

Po zalogowaniu się na naszej stronie przechodzimy do sekcji: settings i tam z rozwijanej listy szablonów wybieramy naszą nową skórę.

Ważne

Uwaga! Jeżeli w naszym nowopowstałym szablonie używaliśmy elementów innych szablonów to w świetle prawa oraz ogólnej estetyki właściwym posunięciem jest pozostawienie w stopce strony informacji na temat autora oryginalnej skóry oraz dodanie informacji na temat modyfikacji. Dokonamy tego edytując plik template_footer.htm