Organizacja
...
szablonu
Zanurzmy się w organizacje szablonu: foldery, pliki, do których należą i jak je poprawnie obsługiwać.
Table of Contents |
---|
Foldery
To są główne foldery motywu PrestaShp:
...
Folder root zawiera tylko pliki TPL, a także pliki miniatur preview.jpg
.
Pliki miniatur
Plik preview.jpg
w katologu głównym w folderze szablonu jest miniaturą która jest używana przez selektor motywów w panelu administracyjnym PrestaShop.
...
To może mieć dowolny rozmiar - domyślny motyw ma 180'445 pikseli.
Musi to być plik JPEG.
CSS i Sass
CSS
Pliki szablonu CSS są zlokalizowane w folderze /css
.
Zaleca się, aby mieć wspólny arkusz stylów dla globalnych reguł CSS: global.css
.
Następnie każdy regulator powinien mieć własny plik CSS na przykład, product.css
dla strony produktu.
Sass / Compass
Pliki Sass i Compass są opcjonalne: Nie trzeba używać tych narzędzi to tworzenia plików CSS dla motywu panelu administracyjnego.
...
Stamtąd możesz generować pliki CSS w folderach/css
z plikami Sass w folderze /sass
!
Trzcionka
Folder/font
jest opcjonalny: Zawiera trzcionki które używa się do tworzenia motywu.
...
Jeśli nie tworzysz swojego szablonu z konkretnej trzcionki, lub zestawu ikon możesz pominąć ten folder.
Obraz
Obrazy związane tematycznie powinny być przechowywane w folderze /img
.
...
Można stworzyć więcej jeśli jest taka potrzeba.
JavaScript
Pliki JavaScript mają być przechowywane w folderze /js
.
W przeciwieństwie do plików CSS, zalecamy, aby nie mieć współnego pliku/globalnego JavaScript, ani nie powinień być pojedynczy plik za kontrolera.
Język
Wszystkie pliki z tłumaczeniami powinny być przechowywane w folderze /lang
.
...
Pliki te pownny być generowane przez zintegrowane narzędzie do tłumaczenia PrestaShop (znajduje się w menu Lokalizacja/Tłumaczenia).
Szablon mobilny
Info |
---|
Domyślny motyw PrestaShop 1.6 ijest w pełni responsywny, co oznacza, że dostosowuje się do każdego rodzaju ekranu. . Twój własny motyw graficzny powinien być także responsywny! Jeśli nie jest, to powinieneś stworzyć alternatywny szablon ukierunkowany na mniejsze ekrany - albo użyj/dostosować jeden z dostepnych domyślnych szablonów PrestaShop 1.5. |
...
W istocie zawartość folderu/mobile
to kolejny kompletny szablon PrestaShop: Ma taką samą ogólną strukturę pliku z własnym /css
, /img
i folderami /js
, a także z własnymi plikami szablonów.
Pliki
Pliki Szablonów
PrestaShop używa silnika szablonu Smarty dla swojego systemu szablonów. Smarty umożliwia oddzielenie treści (informacje są prezentowane) od prezentacji (sposób w jaki informacje są wyświetlane). Plik szablonu łączy obydwa w pełny utworzony plik HTML.
...
PrestaShop używa silnik Smarty 3. Możesz się dowiedzieć więcej o Smarty i jego składni tutaj: http://www.smarty.net/docs/en/smarty.for.designers.tpl.
Arkusze stylów
Pliku szablonów renderują do plików HTML, bez stylizacji (z wyjątkiem stylów inline, jeśli w ogóle), co oznacza, że bloki treści są wyświetlane jak są szkielety, jeden blok po drugim. To gdzie arkusze stylów (pliki CSS) są użyteczne: Są tutaj po to aby przedefinowac sposób w jaki bloki zawartości się wyświetlają, czasami nawet całe rozmieszczenie części strony, aby wyglądała lepiej. Czcionki, margines, kolumny i wiele innych aspektów projektowania można komponować za pomocą CSS.
...
Jak widzisz zmienna $top-line-color
w pliku Sass przemienia się w wartość #c4c4c4
w renderowanym pliku CSS. Zmienne Sass w domyślnym szablonie PrestaShop 1.6 są przechowywane w pliku _theme_variables.scss
.
Pliki obrazów
Obrazy używane przez szablon powinny być przechowywane w folderze /img
(i podfolderze dla szczególnych przypadków, na przykład /img/icon
dla ikon Gif /img/jquery
dla szczególnych obrazów jQuery).
Możesz korzystać z prawie każdego rodzaju obrazu jaki chcesz podczas tworzenia projektu.
...
- Pojedynczy plik dla wielu różnych ikon.
- Wiele możliwych wariantów: rozmiar, kolor, cienie, obracanie itd.
- Wyświetlanie równie dobrze na wszystkich rozmiarach i rozdzielczościach; PC, ekranch telewizorów, Retina, itd.
Narzędzia
Tak na marginesie trzeba mieć solidne IDE (i jego dobrą znajomość) w celu szybkiego znalezienia poszukiwanego pliku takim narzędziem jak grep.
...