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

Ďalšie blogy

card img
JAVA: Platiť či neplatiť?

V poslednej dobe sme zaznamenali u našich zákazníkov ako aj všeobecne vo svete rôznorodé reakcie o tom, “čo vraj zas Oracle spáchal na JAVE“. Tie sa pohybovali na hysterickej škále od stavov: “Reimplementujeme naše riešenia nad inou platformou“, cez zlatú strednú cestu (pragmatický prístup), až pod druhý extrém: “Vezmeme si úver na zalincencovanie nášho X-sto uzlového prostredia“.

18.03.2019

card img
WebJET novinky 12/2018

Nová verzia WebJET 8.5 zlepšuje používateľské rozhranie, prináša skupiny šablón a zlepšuje bezpečnosť.

28.11.2018

card img
InterWay na ITAPA 2018

Máme za sebou úspešné, veľmi významné podujatie v oblasti IT - ITAPA 2018. Aj tento rok sa spoločnosť InterWay zapojila a opätovne tento IT kongres podporila ako Strieborný partner. Celý kongres sa konal v dňoch 13.-14.novembra v priestoroch hotela Crowne Plaza v Bratislave.

23.11.2018

card img
IwayDay 2018

IwayDay v znamení revolúcie. Zmeny nás sprevádzajú na každom rohu, my v IW nespíme a prispôsobujeme sa im. Aj preto sme tohtoročný, už šiesty ročník IwayDay, niesli v duchu InterWay 4.0.

17.10.2018

card img
Teambuilding - Návrat ku koreňom

Prichádzajúce leto značí nielen voľnejšie dovolenkové obdobie a dlhé letné večery, ale u nás v InterWay je to aj zvesťou blížiaceho sa letného teambuildingu. Počas troch dní si spoločne oddýchneme od emailov, oblekov, vyzváňajúcich telefónov a pohrúžime sa do príjemnej, pohodovej atmosféry.

25.06.2018

card img
WebJET novinky 5/2018

WebJET v novej verzii 8.4 prináša nové aplikácie Formulár ľahko, GDPR, Číselníky a mnoho ďalších vylepšení na backende aj frontende.

25.05.2018

© 2019 InterWay, a. s. Všetky práva vyhradené | Ochrana osobných údajov
Tieto stránky generuje redakčný systém WebJET.