Child pages
  • Organizacja szablonu

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...