2024-05-16 11:34:46
  • Hello!
  • Whats ya doin?
  • ByeBye

[&]

18.219.156.56

Informacje do tematu i zadanie

exercises: #8-jml-tplt.html

Szablon dla systemu Joomla

Przygotowanie

  1. Załóż katalog do warsztatu 9-jml-tplt
  2. Pobierz z odnośnika do warsztatu Wzorcowy szablon Joomla. Przygotowywany szablon nazwij zse-theme
  3. Wykonaj zadania warsztatowe
  4. Wgraj pakiet szablonu przez Panel administratora systemu Joomla. Jeżeli nie masz dostepu do żadnej instancji CMS'a - zainstaluj
  5. Dokonaj niezbędnych poprawek
1 Kroki tworzenia szablonu
  1. Poznanie struktury szablonów - zapoznanie się z podziałem na pliki oraz pełnionymi przez nie funkcjami, analiza istniejącego szablonu systemu CMS
  2. Zaprojektowanie witryny - wykonanie wizualnego projektu strony, zastosowanie konkretnego układu, kolorystyki, dobór czcionek i grafik
  3. Stworzenie szablonu - zakodowanie szablonu strony przy użyciu technologii HTML i CSS wraz z dołączeniem grafik oraz użytych czcionek i skryptów JavaScript
  4. Podział na fragmenty - rozdzielenie kodu wykonanego szablonu na poszczególne sekcje (przypisane do plików), np.: header, nav, slider, content, full post, posts list, comment form, archives, footer, error pages
  5. Podział na obszary - stosowane w niektórych CMS-ach podejście, w którym Moduły można umieścić w określonych miejscach (placeholderach) dostępnych lub nie w zależności od szablonu

Dołączyć Screenshot szablonu strony

2 Przygotowanie struktury i plików dla szablonu
/templates/{zse-theme}/<PLIKI>
	+ config
	  \- helper.php
	+ css
	  \- template.css
	+ html
	  + layouts
	  \- ...
	+ images
	+ js
	+ language
	  |- tpl_zse.ini
	  \- tpl_zse.sys.ini
	+ tpls
	|- favicon.ico
	|- index.html
	|- index.php
	|- templateDetails.xml
	|- template_preview.png
	\- template_thumbnail.png
Plik Znaczenie
css/template.css główny plik renderowania szablonu
index.php plik głównego szablonu HTML dla witryny
templateDetails.xml główny plik ustawień i metainformacji do instalacji szablonu
template_preview.png duży obraz prezentujący wygląd szablonu na listach szablonów
template_thumbnail.png miniaturka prezentująca wygląd szablonu na listach szablonów
3 Realizowane na lekcji zadania i ich kolejność
  • Pobranie wzorcowego szablonu
  • Przygotowanie struktury i plików
  • Implementacja podstawowych plików szablonu i ich treści

Kolejność działań podczas realizacji szablonu:

  1. Pobranie i skopiowanie wzorcowego szablonu
  2. Przejrzenie i dostosowanie struktury pobranego szablonu
  3. Stworzenie plików i modyfikacja metadanych szablonu (do widoku w panelu)
  4. Załączenie arkuszy CSS i skryptów JavaScript (mechanizmy CMS'a)
  5. Stworzenie nagłówka i stopki oraz pobranie danych (tytuł i treści)
  6. Stworzenie strony głównej

  7. Przygotowanie strony postów oraz ich metadanych
  8. Przygotowanie wyświetlania komentarzy i formularza do komentarzy
  9. Podsumowanie tworzenia szablonu
4 templateDetails.xml - Określenie metadanych szablonu
<extension version="3.0" type="template" client="site" method="upgrade">
	<name>zse-theme</name>
	<version>1.0</version>
	<creationDate>2023-02</creationDate>
	<author>Uczniowie ZSE</author>
	<authorEmail>e-lemingi.zsegw@gmail.com</authorEmail>
	<copyright>(C) 2023 Zespół Szkół Elektrycznych w Gorzowie Wielkopolskim</copyright>
	<description>Tworzymy, bo możemy (nieprawda, bo musimy; no dobra, bo się uczymy)</description>
	<inheritable>1</inheritable>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_preview.png</filename>
		<filename>template_thumbnail.png</filename>
		<folder>config</folder>
		<folder>css</folder>
		<folder>html</folder>
	</files>o
	<positions>
		<position>zse_header</position>
	</positions>
	<languages folder="language">
		<language tag="en-GB">en-GB/tpl_zse.ini</language>
		<language tag="en-GB">en-GB/tpl_zse.sys.ini</language>
	</languages>
	<config>
	</config>
</extension>
		
5 Tworzenie pakietu instalacyjnego
  1. Zaznacz wszystkie pliki stworzonej struktury szablonu (zawartość katalogu zse-theme) i utwórz archiwum w formacie ZIP

  2. Plik archiwum nazwij zse-template.zip

  3. Przeprowadź testową instalację utworzonego pakietu szablonu

  4. Wprowadź niezbędne poprawki, by instalacja nie generowała błedów

Panel instalacji szablonu

Podsumowanie

  1. Jakie pliki są niezbędne do poprawnego działania szablonu? A jakie są dodatkowe, których nieznalezienie będzie skutkować wywołaniem plików bazowego szablonu?
  2. Do czego służy plik templateDetails.xml w szablonie, a do czego plik index.php?
  3. Jak i gdzie wywoływać przygotowane mechanizmy z Listingu 1.5?