Späť na zoznam

Defaultná šablóna pre developerov

Budujeme projekt na hotových základoch vďaka defaultnej šablóne v redakčnom systéme WebJET.

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.

K dokonalosti nám chýba už len načítanie javascriptových knižníc na konci stránky. Aktuálne to spraviť nevieme, keďže niektoré componenty redakčného systému potrebujú JS načítaný vopred. Pracujeme však na zmene, ktorej sa dočkáme už onedlho.

Ako postupovať pri novom projekte

Pri vytváraní novej webstránky využijeme defaultnú šablónu. Je na zvážení developera, či upravuje zdrojové súbory v adresári default, alebo si daný priečinok zduplikuje a premenuje na názov projektu.

V prípade zduplikovania zdrojových súborov je potrebné myslieť aj na zduplikovanie virtuálnych šablón v redakčnom systéme (hlavné menu/šablóny).

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: Vytvorenie štruktúry webstránok

Ako prvý krok v redakčnom systéme vytvoríme aspoň základnú štruktúru webstránok, aby sme mali živý náhľad toho, čo vyvýjame. Vytvoreným stránkam priradíme naše šablóny (hlavná stránka, podstránka). Priradíme im príslušnú hlavičku a pätičku, kde treba nastaviť zdrojový adresár pre korektné generovanie menu componenty.

3. Krok: Prispôsobenie šablóny

V adresári našej šablóny 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ácií 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“ v admine v editácii adresára vo webstránkach.
     
  • 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“.