Template Open Source

[qrdziel]

Witam.
Chcę stworzyć jakąś fajną uniwersalną templatkę. Gdy napotykam problem - muszę szukać rozwiązań w google i u nas na forum.
Wpadłem na pomysł, że społeczność naszego forum mogłoby stworzyć jakąś autorską templatkę, gdzie byłaby dobrze opisana i każdy mógłby coś dodać od siebie. Może powstałaby darmowa biblioteka templatek.
Może ktoś byłby chętny.
Templatki by się nazywały 01.j-forum.pl-tpl albo coś takiego. Jak do czegoś takiego się zabrać - github?? AWS. A może już coś takiego jest i chcę wyważać otwarte drzwi?

[siristru]

Jasne, to dobry pomysł.
Tylko co taki szablon musiałby mieć?
Pokaz slajdów? Bajery z Bootstrapa?
Font Awesome?
Czy zupełnie prosty np. kilka pozycji na moduły, podstawowa siatka Bootstrapa?

Github jest najlepszy do wspólnej pracy.

Ja na chwilę obecną jestem zarobiony projektami i praca na 3 etaty :D

[rkonik]

Proces tworzenia templatki jest związany z konkretnym przeznaczeniem. Moim zdaniem nie ma czegoś takiego jak uniwersalna templatka ponieważ ile osób tyle pomysłów na stronę.
Z tego też powodu powstało bardzo wiele Framewarków na podstawie których można szybko wdrożyć uniwersalne rozwiązanie i prawie uniwersalny szablon. Jednak tworząc takie rozwiązanie wydaje się że w części wywarzasz już otwarte drzwi. Wyjątkiem będzie pomysł na frmewark który będzie całkiem inny niż te dostępne na rynku. Wtedy ma to sens ponieważ każdy skorzystałby na takim rozwiązaniem ponieważ budowa strony zawsze na początku wygląda tak samo. Dlatego takie rozwiązanie miało by sens by ułatwić i przyśpieszyć start projektu strony.

[siristru]

Wydaje mi się, że to byłoby bardziej demo niż faktyczna templatka gotowa do użycia.
Demo pokazujące w prosty sposób z jakich elementów składa się templatka oraz jak można wykorzystać to co daje Joomla.
To byłyby podstawowe klocki do budowy własnego szablonu.
Cała reszta tj. stylizacja musiała by być po stronie wykorzystującego templatkę.

To w sumie jest całkiem fajny pomysł, bo ja właśnie od tego zaczynałem naukę - prosty szablon hoerne_03 i modyfikowanie kodu index.php.

[qrdziel]

Dokładnie - takie demo.
Nacisk byłby położony na SEO, na prędkość wczytywania.
Na zapleczu były by pola w które by wpisywać google tracking id, bing tracking, dane z facebook, twitter, itp. Była by lista do radio butonów i chceck boxów do wyboru - co chcemy, czy bootstrap, czy talwinnd, a może żaden, albo pole tekstowe, gdyby był jakiś inny. To samo z fontami - avesome, ionicons lub inne. Bez zbędnych wodotrysków.
Ale ciekawi mnie jak to technicznie zrobić? Jak zrobić taki projekt? Github, czy AWS.

[pablop76]

Baza szablonów Joomla instnieje
https://templatejoomla.com/
Taki szablon (moduł) startowy również
https://www.kickstartcassiopeia.com/
oraz podstawa do budowania szablonu od podstaw
https://kevinsguides.com/download/3-webdev/4-j4/5-j4-templates/1-j4starter
Ale oczywiście od przybytku głowa nie boli :up:

[rkonik]

Dokładnie o tym pisałem wyżej.
@qrdziel gdyby szablon wyłącznie odpowiadał za SEO byłbym szczęśliwy. Nie wiem dlaczego masz taką posesję na temat prędkości wczytywania. Nawet już GA4 nie podaje wprost tego parametru.

Przy "większych" projektach, mam na myśli ilość zaangażowanych osób. Wcześniej czy później i tak obijesz się np. o GIT-a. Inną kwestią jest jakiego dostawcy użyjesz czy będzie to Github czy jego konkurencja.

Osobiście uważam, że idealizowanie szablonu mija się z celem. Jest to sztuka dla sztuki. Jednak wykonanie czegoś na kształt underscores co używa konkurencyjny CMS lub alternatywy do tego co podał w linkach @pablop76 może mieć sens. Ponieważ dzięki temu utworzysz "matrycę" z której wybierasz interesujące Ciebie elementy i tworzysz docelowy szablon. Ale czy nie wymyślamy koła na nowo?

[qrdziel]

tak zacząłem strugać - roboczo nazwałem Joomla Polskiem Centrum Template w skrócie- tpl_jpc_23


pobrać i zobaczyć można z linku:
https://ictlaboratory.com/tpl_jpc_23.zip

u mnie działa - ale instalować się nie chce - jeśli rozpakuję i skopiuję mechanicznie to działa i bootstrap i fontavesome.

[rkonik]

Ładniej by to wyglądało gdybyś dodawał style poprzez HTMLHelper::_
a przy sprawdzaniu trackingID wstawił bym najpierw !empty
Dodatkowo na poziomie manifestu masz dla trackingID ustawione jako string. Ja wyznaję zasadę wszystko co może wpisać użytkownik nawet jak jest adminem ma być bezpieczne dla kodu. W żaden sposób nie sprawdzasz tego.

Nie testowałem instalacji jaki błąd Ci wyskakuje?

[qrdziel]

Nie wszyscy są tak dobrzy z programowaniem. Może napiszesz przykłady kodu.

[rkonik]

Nie chodzi o to czy ktoś jest dobry czy zły w programowaniu. Ja wyznaję że człowiek uczy się całe życie (jak ma chęć) i najlepiej stosować dobre praktyki od lepszych i bardziej doświadczonych. Zawsze przeglądam kod i staram się zrozumieć co autor miał na myśli i dlaczego tak wykonał np metodę w danej klasie. Dodatkowo żmudne przeglądanie dokumentacji wychodzi mi już bokiem. Jednak ktoś włożył masę pracy w dokumentację by innym było łatwiej.
Koniec tych wywodów. Oto przykład:



HTMLHelper::_('stylesheet', 'template.css', ['version' => 'auto', 'relative' => true]);


aby to użyć musisz pamiętać o:


use Joomla\CMS\HTML\HTMLHelper;


jeżeli chcesz np dodać JS to zamiast stylesheet dajesz script . Reguły jak Joomla wie gdzie szukać plików i w jakiej kolejności jest Twoją pracą domową. Jak to zrozumiesz zobaczysz jakie fajnie jest stosować HTMLHelper::

[zwiastun]

Moje sugestie:
1. Proszę przyjrzeć się szablonowi Cassiopea. W Joomla 4, a potem w Joomla 4.1 zmieniono lokalizację plików szablonu. W katalogu /templates umieszczamy w zasadzie tylko podstawowe pliki i pliki elementów nadpisanych. Wszystko inne jest w katalogu media/templates/site/<nazwa-szablonu>. Owszem, jeśli zachowamy lokalizację taką, jak w J3, szablony będą działać, ale np. pozbawimy się funkcjonalności i wydajności szablonów potomnych.
2. Stworzenie jednej, a przy tym lekkiej podstawy dla wszystkich innych szablonów, to trochę idee fixe. Oczywiście, można. Na przykład Dimitris Grammaticogiannis stworzył swego czasu taki bardzo lekki i wydajny szablon Sloth (https://dgrammatiko.github.io/sloth-pkg/). Ale każda witryna ma swoje wymagania, stąd podstawą do stworzenia dostosowanego szablonu może być każdy inny, byle dobry.

I taką bardzo dobrą podstawą jest m.in Cassiopea.
Po pierwsze, ma pełną implementację szablonów potomnych, a więc możesz z tym szablonem zrobić cokolwiek chcesz, modyfikować sobie tak, jak Ci odpowiada. Jeśli zrobisz modyfikacje jako potomki, a nie bezpośrednio w szablonie głównym, to ewentualne zmiany w szablonie w kolejnych wydaniach nie będą modyfikowały Twoich zmian, a Ty możesz je uwzględnić w swoich szablonach potomnych w takim zakresie, w jakim zechcesz.
Po drugie, jest przygotowany nie tylko z myślą o wydajności (SEO), ale - i to jest ważniejsze - o dostępności. Dlaczego to ważne przekonywać nie będę. Cassiopea w zakresie, za który może odpowiadać szablon, ma dostępność w pudełku, poczynając od dostępnego komponentu wielopoziomowego, rozwijanego menu, ale to - oczywiście, nie jedyne prodostępnościowe rozwiązanie.
Nie przyglądałem się przywołanemu tu przez przez @pablop76 modułowi Kevina Olsena, ale na pierwszy rzut oka wygląda na niezła maszynkę do szybkiego rozwiązywania niektórych problemów (trzeba by sprawdzić, czy nie psuje walorów Casssiopei, o których wspominałem, bo to dość częste przy takich "wlewkach" w kod, ale i temu, gdyby tak było, łatwiej zaradzić, niż budować samemu wszystko od podstaw.

[qrdziel]

Bądź tak dobry i napisz mi konkretny przykład np. na dodanie bootstrap.min.css
ja wbiłem takie cóś i nie gra?

<?php $this->addHeadLink(HTMLHelper::_('stylesheet', '/media/css/bootstrap.min.css', ['version' => 'auto', 'relative' => true]));
?>

[rkonik]

use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::_('stylesheet', 'template.css', ['version' => 'auto', 'relative' => true]);



Pamiętaj że @zwiastun pisze już o nowszym rozwiązaniu wprowadzonym w J4. Nie do końca odrobiłeś pracę domową. Poczytaj o joomla.asset.json
Tą samą metodę wykorzystał autor j4starter do której masz link od @pablop76

W pierwszych wersjach Joomli 4 była używana metoda którą ja Ci napisałem https://github.com/joomla/joomla-cms/blob/4.0.0-alpha3/templates/cassiopeia/index.php
Obecnie lepiej jest stosować tą metodę o której pisze @zwiastun

[qrdziel]

ni ogarniam tego
wpisalem juz nawet:

HTMLHelper::_('stylesheet', $this->baseurl.'/templates/tpl_jpc_23/media/css/bootstrap.min.css', ['version' => 'auto', 'relative' => true]);
i nie chce wczytać bootsrap.min.css​ dlaczego to jest tak skomplikowane??

[rkonik]

Nie odrobiłeś lekcji
Jeżeli chcesz użyć pliku bootstrap.min.css to wrzuć go zwyczajnie w katalog css w templatce i uzyj


HTMLHelper::_('stylesheet', 'bootstrap.min.css', ['version' => 'auto', 'relative' => true]);


Po to ktoś siedział i dumał jak rozwiązać problem dodawania styli by nie stosować $this->baseurl itd.
Możesz też wrzucić plik do media ale pamiętaj o tej zasadzie /media/extension/type/file Jednak wówczas prościej jest użyć tej metody o której pisze @zwiastun. I lepiej.

Jeżeli chcesz tworzyć szablon dla Joomla a tym bardziej spełniać standardy to musisz się z tym zapoznać. Bez tego tworzenie szablonu jako podstawy nie ma sensu.

[zwiastun]

Albo posłuż się kompletnym dobrze napisanym poradnikiem, co prawda po angielsku, ale to przecie dla Cię nie problem :)
https://kevinsguides.com/guides/webdev/joomla4/joomla-4-templates/develop-j4-template

[qrdziel]

dzięki zwiastun - to na prawdę dobry artykuł - gdybyś miał jeszcze coś takiego fajnego.

a ten kod mi nie działa:

HTMLHelper::_('stylesheet', 'bootstrap.min.css', ['version' => 'auto', 'relative' => true]);
może dlatego, że plik styli bootstrapa jest umieszczony w /media/css/bootstrap.min.css, ale jeśli w poleceniu zmieniam na tę ścieżkę - to też nie działa

[rkonik]

może dlatego, że plik styli bootstrapa jest umieszczony w /media/css/bootstrap.min.css,
Tak nie zadziała.
Domyślnie metoda
HTMLHelper::_('stylesheet', 'bootstrap.min.css', ['version' => 'auto', 'relative' => true]);
szuka pliku bootstrap.min.css w głównym folderze szablonu w katalogu css o tym napisałem wcześniej. na to wskazuje

'relative' => true

Jak chcesz użyć katalogu media musisz też zachować pewne zasady by zadziałało o tym też napisałem wcześniej.
w metodzie HTMLHelper::_ możesz używać też ścieżek bezpośrednio tam gdzie chcesz. podać konkretną ścieżkę gdzie znajduje się plik on nie musi być z Twojego szablonu ale możesz wykorzystać pliki np z CDN bootstrapa. Ta metoda jeszcze będzie działać ale lepiej zacznij interesować się tym o czym pisał @zwiastun.

[terra]

1. Proszę przyjrzeć się szablonowi Cassiopea posłuchaj tej rady, to jest naprawdę świetne źródło do nauki, zwłaszcza że stosuje nowe, wdrożone w J4 rozwiązania.
Jeśli chcesz korzystać z BS5 tutaj masz przykład jak się do tego zabrać https://docs.joomla.org/J4.x:Cassiopeia_Template_Simplified_-_A_Case_Study .
Generalnie proponowałby korzystać z WebAssetManagera i predefiniowania plików w json, w końcu do tego służy.

Jeśli chcesz ręcznie dodawać pliki to tutaj dwa rozwiązania




use Joomla\CMS\Factory;


$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
//ręczne dodawanie skryptu js
$wa->addInlineScript($script);
//ręczne dodawanie stylu
$wa->addInlineStyle($style);


$style i $script to zmienne pod które możesz podstawić styl lub skrypt



jeśli chcesz korzystać z helpera to najprostsza składnia


use Joomla\CMS\Helper\ModuleHelper;

JHTML::stylesheet(' ścieżka do pliku css/plik.css');

JHTML::script(' ścieżka do pliku js/plik.js');