Späť na zoznam

Defaultná šablóna pre developerov

Budujeme projekt na hotových základoch vďaka defaultnej šablóne vo WebJETe.

Pri každej novej webstránke v redakčnom systéme WebJET sa stretávame s podobným postupom prác. Je potrebné vytvoriť adresárovú štruktúru, narezať základný layout, rozdeliť jednotlivé časti na hlavičku, obsah, pätičku a podobne.

Rozhodli sme sa vytvoriť defaultnú šablónu pre developerov. Okrem šetrenia času a uľahčenia prác je prínosom aj v iných smeroch.

Hlavné výhody defaultnej šablóny

  • Zjednotenie adresárovej štruktúry a používania
  • Responzívny layout v Bootstrape
  • Predpripravené funkčné elementy
  • Eliminovanie opakujúcich sa prác
  • Generovanie meta informácií a podpora sociálnych sietí
  • Rýchlostná optimalizácia

Zdrojové súbory sa nachádzajú v adresári šablóny


Obrázok základnej štruktúry súborov v defaultnej šablóne.

Z obrázku môžeme vidieť zmenu v umiestnení statických súborov, ako sú css, obrázky či javascripty.  Uľahčili sme tým proces nasadzovania a sprehľadnili základnú štruktúru súborov. Všetko potrebné sa odteraz nachádza na jednom mieste, a to v adresári /templates/default.  

Budujeme projekt na hotových základoch

Výsledkom defaultnej šablóny je layout stránky. Obsahuje základné narezanie do gridu, štruktúru stránok, generované menu v bootstrape, či importovanie CSS a JS súborov za pomoci componenty combine.

Šablóna automaticky generuje významné meta informácie a podporujúce tagy pre FacebookTwitter. Jednotlivé hodnoty sú obalené do podmienok. V prípade, že nie je pre stránku nastavený napríklad perex obrázok, načíta sa defaultný.

Hodnoty ako defaultný perex obrázok, názov projektu či autora sa načítavajú z textových kľúčov. V prípade zmeny nie je potrebné vstupovať do zdrojových súborov, všetko sa dá vyriešiť na strane administrácie.

Naša šablóna sa páči aj Googlu

Počas vývoja sme šablónu testovali aj viacerými online nástrojmi a hľadali ideálne riešenia. Skúšali sme aj postupné načítavanie externých súborov. Napokon však ostalo optimálnym riešením využitie combine componenty, ktorá nám zlúči všetky JS alebo CSS súbory do jedného spoločného a načíta ich až na konci stránky.

Ako postupovať pri novom projekte

1. Krok: Narezanie vizuálu

Pred samotnou implementáciou vizuálu do redakčného systému predchádza jeho statické narezanie. Developer pri vytváraní HTML a CSS vychádza z predpripravenej šablóny. Dodržiava štruktúru rozdelenia súborov do jednotlivých adresárov a využíva bootstrap. Pre uľahčenie je možné použiť už narezaný HTML kód predpripravenej šablóny.

2. Krok: Importovanie šablóny do WebJETu

Stiahneme si zdrojové súbory k defaultnej šablóne. Rozbalíme stiahnutý zip súbor, ktorý pozostáva z dvoch častí:

  • Adresár s názvom default
  • Súbor default-struktura.zip

Adresár default prekopírujeme do adresára templates v našom WebJETe. Následne si v redakčnom systéme otvoríme sekciu WEB stránky. Vytvoríme tu nový koreňový adresár pre náš projekt. Adresár musí byť prázdny. 

V danom adresári klikneme na Nástroje a zvolíme možnosť Import/Export stránok. Zaškrtneme možnosť Importovať web stránky zo ZIP archívu (xml) a ako zdrojový súbor vložíme
default-struktura.zip.

Importom sa nám automaticky vytvorí základná štruktúra projektu. Súčasťou je skrytý adresár System, kde sa nachádza príslušná hlavička, pätička a bočné menu. Tieto stránky je potrebné premiestniť do System adresára v prvej úrovni web stránok, konkrétne do adresára s názvom Hlavičky-pätičky. Následne je potrebné virtuálnej default šablóne prideliť hlavičku, pätičku a bočné menu. Urobíme tak v redakčnom systéme v sekcii Šablóny v ľavom menu. Kedže pri vytváraní šablón z importu ešte neexistovali stránky v root system adresári, preto sa zmenili hodnoty na prázdne. 

V stránke hlavičky je potrebné upraviť parameter rootGroupId na ID adresára nášho nového projektu. Urobíme tak v componente menu a search, kde zmeníme aj ID stránky s výsledkami vyhľadávania. Základná štruktúra nového projektu je týmto pripravená.

3. Krok: Prispôsobenie šablóny

V adresári našej šablóny (/templates/default/assets/) nahráme statické súbory, ktoré vznikli pri rezaní vizuálu. V prípade potreby upravíme JSP súbory šablón (homepage.jspsubpage.jsp). Najčastejšie ide o pridanie obalovača s konkrétnou classou, alebo zmena usporiadania gridu, či odstránenie nepotrebných obsahových informácií (generovanie perex obrázku do obsahu, generovanie submenu a podobne).

4. Krok: Doladenie detailov  

Po úspešnej implementácii vizuálu sa zameriame na posledné kroky. Otvoríme si súbor include_head.jsp v našej šablóne. Ako som spomínal, niektoré informácie sa načítavajú z textových kľúčov:

  • Názov projektu, využíva sa aj pri tagu title
  • Defaultný obrázok pre zdieľanie (Facebook, Twitter)
  • Názov autora webstránky

V kóde hlavičky vidíme jednotlivé vlastnosti a zdroj textu. V administrácii redakčného systému môžeme meniť hodnoty textových kľúčov v „Ovládací panel/Editácia textov“. Odporúčam si však vytvoriť nové textové kľúče a nemeniť pôvodné. V prípade viacerých projektov na jednej inštálacií WebJETu sa vyhnete nedorozumeniam.

Jednohubky na záver

Okrem predpripravených základov obsahuje defaultná šablóna aj ďalších skrytých pomocníkov.

  • CSS trieda na body
    Pre každú sekciu našej webstránky si vieme nastaviť vlastnú CSS triedu. Stačí ju zadať do „pola A“ pri editácii adresára v záložke Rozšírené.
  • Generovanie canonical url
    Už sa vám viackrát nestane, aby google zaindexoval url adresu s určitým parametrom.
     
  • Zákaz indexovania
    Ak nie je v admine zaškrtnuté vo vlastnosti stránky pole „Prehľadávateľné“, do stránky sa automaticky vygeneruje noindex informácia pre roboty.
     
  • Zobraziť / skryť nadpis H1
    Potrebujete skryť generovaný nadpis H1 len pre konkrétnu stránku? Nemusíte duplikovať šablónu. V sekcii „Vlastné polia" vo vlastnostiach webstránky stačí zvoliť možnosť „Bez nadpisu“ v selecte „Generovanie nadpisu“.

Šablóna na stiahnutie