Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Tworzenie templata

1. Dodanie nowego templata (stylu graficznego)


Aby dodać nowy szablon graficzny należy kliknąć w przycisk "Dodaj" w zakładce Grafika -> Szablony graficzne, a następnie wpisać nazwę naszego nowego szablonu.

Dla osób mniej zawansowanch polecamy stworzyć szablon graficzny przez wykonanie kopi istniejącego szablonu dostarczonego razem z systemem CMS. Pozwoli to na zaoszczędzenie czasu. W tym celu należy kliknąć na przycisk dwóch zielonych strzałeczek po prawej od nazwy szablonu, który chcemy skopiować. Powstanie wtedy szablon o takiej samej nazwie z dopiskiem "kopia". Należy zmienić jego nazwę na naszą.

Po dokonaniu tych czynności możemy przystąpić do kroku drugiego.

2. Edycja pliku głównego, (main.tpl)


Szablony windu domyślnie korzystają z Twitter Bootstrap, tak zwanego frameworka CSS. Jest to system stylów css pozwalający na szybkie tworzenie ładnych i przejrzystych stron www. 

Styl graficzny mający zaimplementowany Twitter Bootstrap ma automatycznie do dyspozycji całą gammę gotowych elementów. Dokumentacja znajduje się pod adresem twitter.github.com/bootstrap/

Standardowy kod strony wygląda następująco:



W kodzie mamy odpowiednio;
  • Jak widzimy w linijkach 8, 9, 25 mamy odniesienia do zmiennej $meta zwracającej metatagi
  • W linijkach 13-15 mamy kod wstawiający style CSS zgodnie z konfiguracjią systemu oraz zawartością naszego katalogu CSS zgodnie z kolejnością alfabetyczną z wstawieniem pliku main.css na samym końcu jako plik główny.
  • W linijkach 16-19 ustalane są zmienne potrzebne w kodzie JS
  • W linijkach 22-24 jest kod wstawiający pliki JS analogicznie do plików CSS
  • W linijce 28 wstawiany jest Widżet z powiadomieniami
  • W linijce 29 includowany jest template główny, czyli template który mamy ustawiony dla naszej podstrony (opcja wyboru z listy rozwijanej dla każdje podstrony). Template ten znajduje się w naszym katalogu "views".
 

3. Definiowanie nowych widoków


Widoki są to pliki znajdujace się w katalogu "views". Jeden z tych plików możemy przypisać do naszej podstrony. Dzięki widokom mamy mozliwość zdefiniowania kilku szablonów, nie mamy tylko podziału na stornę główną i podstronę, w tym wypadku mamy pełną dowolność.

Aby dodać widok należy kliknąć na zielony plusik przy katalogu "views" a następnie wpisać nazwę naszego widoku, musi być ona unikalna w obrębie katalogu.

Po wykonaniu tej operacji zarówno w panelu edycji jak i na liście dostępnych widoków dla podstrony pojawi się nasz nowy element.

Dodatkowo mamy do dyspozycji katalog "common", w którym możemy umieszczać elementy wspólne dla wszystkich widoków, na przykład stopkę oraz menu górne strony. Nie ma sensu, aby każdym razem kopiować kod, dlatego tworzymy nowy elementy w katalogu "common". Następnie wstawiamy go w nasz widok wpisując odpoweidni kod:
 
{{include file='../tpl_common/footer.tpl'}}


4. Edycja widoków


Aby edytować nasz widok należy kliknąć na niebieski długopis przy wybranym elemencie. Po prawej stronie pojawi się kod szablonu. Jest to kod HTML z wykorzystaniem systemu smarty.net generowany wewnątrz tagu body.

Podstawowe elementy jakie powinny znaleźć się wewnątrz widoku to:
  • {{$page->name}} - tytuł podstrony
  • {{eval var=$page->content}} - treść podstrony wygenerowana przez "eval" co powoduje wygenerowanie kodów smarty wewnątrz widoku.
  • wybrane widżety wstawione przez "wstawiacz widżetów" uruchamiany przyciskiem "widżet" pod panelem edycji treści
Przykładowy widok podstrony:


 

5. Dodawanie oraz wstawianie obrazków


Aby dodać obrazek statyczny do naszego szablonu, należy kliknąć na zielony plusik przy katalogu "img". Następnie należy przycisnąć na ikonkę szarego "i" obok nowo dodanego pliku i skopiować ścieżkę, którą następnie możemy wkleić w dowolne miejsce naszego kodu.
 

6. Edycja i dodawanie styli CSS


Style CSS znajdują się w katalogu "css" głównym stylem wczytywanym jako główny na samym końcu jest styl "main.css". Domyślnie mamy dostępne style z frameworka Twitter Bootstrap, jego dokumentacja jest dostępna na stronie: twitter.github.com/bootstrap/.

Możemy oczywiście tworzyć swoje własne style od zera, w tym celu należy usunąć deklaracje bootstrapa, zarówno css jak i js.
 

7. Edycja i dodawanie kodu JS


Edycja JavaScript odbywa się analogicznie do kodu CSS.