Jak podpiąć szablon HTML w systemie Fennec CMS?

Podpięcie własnego motywu zostało znacznie ułatwione w wersji 2.2.0, a będzie jeszcze prostsze w niedalekiej przyszłości.

Pierwszym krokiem jest znalezienie interesującego motywu. W tym celu możesz skorzystać z usług portali internetowych oferujących gotowe rozwiązania np. www.startbootstrap.com lub przygotować motyw samodzielnie. W obu przypadkach należy pamiętać o tym, aby pliki z szablonami (są to pliki o rozszerzeniu *.html) znajdowały się bezpośrednio w katalogu głównym z motywem – w przeciwnym razie nie zostaną prawidłowo wykryte. Pozostała struktura nie jest istotna. Na obrazku poniżej przedstawiono przykładową strukturę katalogu z motywem.

Dodawanie szablonów - przykładowa zawartość paczki z motywem

Po pobraniu motywu, przenieś rozpakowaną paczkę do katalogu templates znajdującego się w głównym katalogu systemu Fennec CMS, tak jak na obrazku poniżej. Pamiętaj, że katalog musi mieć nadane odpowiednie prawa do odczytu tak, aby system mógł go prawidłowo zaimportować.

Dodawanie szablonów - prawidłowe umieszczenie paczki z motywemZaloguj się do panelu administracyjnego Fennec CMS i z górnego menu wybierz Menedżer motywów. Aby ta pozycja była widoczna, Twój użytkownik musi posiadać uprawnienia do odczytu i edycji motywów.

Menedżer motywów w menu użytkownikaNa liście motywów, o ile pobrany motyw został prawidłowo wykryty, powinna pojawić się nowa pozycja. W prezentowanym przypadku jest to motyw o nazwie startbootstrap-creative-1.0.2. Ponieważ nie jest to motyw przygotowany dla systemu Fennec CMS, jego nazwa bazuje na nazwie katalogu, w którym się znajduje, a opis jest pusty. W kolumnie Szablony znajduje się lista wszystkich szablonów, czyli plików o rozszerzeniu *.html, które zostały wykryte przez system. Jeśli lista ta jest pusta, a w głównym katalogu z motywem znajdują się pliki *.html, upewnij się, że posiadają odpowiednie prawa do odczytu.

Menedżer motywówAby zainstalować motyw przestaw przełącznik w kolumnie Zainstalowany w pozycję Tak. Możesz również od razu aktywować motyw przestawiając przełącznik w kolumnie Aktywny w pozycję Tak. System spróbuje automatycznie „przepiąć” aktualnie używany motyw w ten wybrany, bazując na nazwach plików szablonów np. jeśli strona główna korzystała w poprzednim motywie z szablonu o nazwie index.html, system automatycznie ustawi nowy szablon na plik index.html z nowego motywu – oczywiście pod warunkiem, że taki plik istnieje. Jeśli szablon nie zostanie odszukany, musisz samodzielnie edytować stronę w systemie (ikona ołówka z poziomu głównego ekranu systemu) i wybrać odpowiedni szablon. Po zakończonej aktywacji motywu strona główna prezentuje się następująco.

Dodawanie szablonów - strona główna po zmianie motywuJak widać, szablon został zaimportowany pomyślnie. Cały proces, mimo długiego opisu, nie powinien w przyszłości zająć więcej niż kilkanaście sekund.

Teraz proces najważniejszy, czyli zdefiniowanie tzw. placeholderów, czyli kontenerów, w których będziesz mógł umieszczać widgety. W obecnej wersji systemu proces ten wymaga ręcznej edycji pliku z szablonem, co zostanie opisane w dalszej części instrukcji.

W tym momencie należy zaplanować miejsca, w których utworzysz wspomniane wcześniej kontenery. W prezentowanym przykładzie postanowiliśmy wybrać trzy takie miejsca – będzie to logo, menu główne oraz treść głównego banera.

Dodawanie szablonów - miejsca umieszczenia kontenerówAby dodać do szablonu kontener, otwórz plik z szablonem w dowolnym edytorze tekstu. Następnie odszukaj miejsca, w których chcesz umieścić kontenery. W prezentowanym przykładzie będzie to element, w którym znajduje się tekst Start Bootstrap. Znajduje się on w 49 linijce pliku index.html:

<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>

Teraz rzecz najważniejsza – w tagu, czyli znaczniku HTML okalającym wskazany tekst należy umieścić atrybut o nazwie fennec-placeholder z nazwą kontenera. Dozwolone znaki w nazwie kontenera to wielkie (A-Z) i małe (a-z) litery alfabetu (z pominięciem polskich znaków), cyfry (0-9) oraz dwa znaki specjalne - pokreślenie (_) i myślnik (-). Przykładowy kod z umieszczonym atrybutem fennec-placeholder i nazwą logo, wygląda następująco:

<a class="navbar-brand page-scroll" href="#page-top" fennec-placeholder="logo">Start Bootstrap</a>

Podobnie musisz postąpić w przypadku pozostałych elementów.

Teraz czas na aktywację dodanych kontenerów w systemie. W zakładce Menedżer motywów przejdź do edycji wybranego motywu klikając w ikonę ołówka. Z listy szablonów wybierz ten, który przed chwilą modyfikowałeś.

Na liście dostępnych kontenerów pojawią się dodane przed kilkoma chwilami kontenery – w naszym przypadku są to pozycje banner, logo oraz menu. Aktywuj kontener przestawiając przełącznik z kolumny Aktywny w pozycję Tak.

Dodawanie szablonów - aktywacja konteneraKażdy z kontenerów musi mieć zdefiniowany jeden z dwóch układów:

  • pionowy – dodawane widgety będą grupowane jeden pod drugim – jest to wartość domyślna,

  • poziomy – dodawane widgety będą grupowane jeden obok drugiego,

Pamiętaj, że w dowolnym momencie możesz zmienić układ kontenera oraz zadecydować o tym, czy ma być aktywny.

Gdy kontener został aktywowany, możesz ustawić go jako Domyślny. Oznacza to, że każdy dodany widget zostanie początkowo umieszczony właśnie w tym kontenerze. Każdy szablon musi zawierać dokładnie jeden domyślny kontener. W przeciwnym wypadku dodanie jakiegokolwiek widgetu jest niemożliwe.

W tej zakładce istotna jest jeszcze ikona widoczna w górnym menu.

Dodawanie szablonów - ikona aktualizacji szablonówKliknięcie w nią spowoduje odświeżenie listy dostępnych szablonów, czyli ponowną analizę katalogu z motywem i zaimportowanie wszystkich plików szablonów (rozszerzenie *.html). Oczywiście wszystkie wprowadzone kontenery zostaną zachowane. Proces aktualizacji dostępnych szablonów należy wykonywać po dodaniu lub usunięciu szablonu z motywu.

Gdy wszystkie kontenery zostały aktywowane, możesz przejść do strony głównej systemu – czas na dodawanie widgetów! W tym momencie strona powinna znacząco różnić się od oryginału – zawartość wszystkich dodanych kontenerów została usunięta. Teraz od Ciebie zależy jak będzie wyglądać Twoja strona internetowa!

Dodawanie szablonów - strona główna po dodaniu kontenerówPo kilku minutach pracy efekt końcowy prezentuje się następująco:

Dodawanie szablonów - strona główna po edycji

A gdy przejdziemy w tryb podglądu:

Dodawanie szablonów - strona główna po edycji - podgląd

Najnowsze wpisy

Fennec CMS 2.2.2 jest już dostępny!

Fennec CMS 2.2.1 jest już gotowy!

Nie mogę wykonać automatycznej aktualizacji

Czy system Fennec CMS obsługuje bazy danych MySQL?

Czy systemu Fennec CMS można używać w celach komercyjnych?