Template specifikus CSS és JS fájlok behívása az oldalba

Hogyan kell beállítani a template specifikus css és js fájlok listáját, és azokat hogyan kell behívni.

2021.12.08 — Posted by Webb & Flow

Tartalomjegyzék

CSS fájlok beállítása és behívása a template-ben
JS fájlok beállítása és behívása a template-ben

Ennek a dokumentumnak nem tárgya, hogy milyen módszertan szerint kell a css, illetve js fájlokat szétbontani, egy már szétbontott kódbázisból indulunk ki.

A beállítások előfeltétele, hogy a Reszponzív töréspontok be legyenek állítva a portál beállításaiban.

CSS fájlok beállítása és behívása a template-ben

A legjobb, ha a CSS fájlok valamilyen logikai csoport (például komponens), és azon belül méret szerint vannak szétvágva, azonban arra is van megoldás, ha csak csoport szinten vannak szétvágva, és egy-egy fájl az összes mérethez szükséges kódot tartalmazza.

Méret szerint szétvágott CSS fájlok

Amennyiben a CSS fájlok méret szerint (is) vannak szétvágva, minden mérethez külön-külön be kell állítani, hogy melyik csoport melyik méretű fájlját kell betölteni.

Ezt az adott template szerkesztő felületén a Breakpoint Specific Options fülön tehetjük meg.

Miután be vannak állítva és ki vannak publikálva a fájlok, behívhatjuk azokat az oldalba. Ehhez a template-be kell elhelyezni a megfelelő helyen a megfelelő kódokat. Általában CSS kódokat érdemes a ≶head>-be, a js kódokat pedig a <body> végére rakni, de ettől el lehet térni.

Összes CSS fájl behívása <link>-ként, HTML kóddal

Ehhez a rendszer biztosít egy template változót {TEMPLATESTYLESSI} néven. Ez egy, a következőhöz hasonló kódot helyez el az oldalba:

<!--#include virtual="/ssi/template/tmpl_6280034784378880.css.html" -->

Ami mivel egy SSI fájl behívás, valójában egy ehhez hasonló kódot fog végül az oldal kiszolgálásakor adni a böngészőnek:

<link href="/design/template/tmpl_6280034784378880_10_xs.css?v=1638978905" rel="stylesheet" media="(max-width:575px)">
<link href="/design/template/tmpl_6280034784378880_20_sm.css?v=1638978905" rel="stylesheet" media="(min-width:576px) and (max-width:767px)">
<link href="/design/template/tmpl_6280034784378880_30_md.css?v=1638978905" rel="stylesheet" media="(min-width:768px) and (max-width:991px)">
<link href="/design/template/tmpl_6280034784378880_40_lg.css?v=1638978905" rel="stylesheet" media="(min-width:992px) and (max-width:1199px)">
<link href="/design/template/tmpl_6280034784378880_50_xl.css?v=1638978905" rel="stylesheet" media="(min-width:1200px)">

Összes CSS fájl behívása <link>-ként, HTML kóddal, SSI nélkül

Mivel az előző megoldás csak akkor működik, ha a weblapot kiszolgáló szerveren engedélyezve van az SSI (a Webb & Flow Cloud Storage esetén engedélyezve van), így SSI nélkül közvetlenül azt a kódot kell elhelyeznünk az oldalba, amit az SSI adott volna. Ehhez a következő kódot használhatjuk:

<link href="/{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_10_xs.css?v={NOWDATE}T{NOWTIME}" rel="stylesheet" media="(max-width:575px)">
<link href="/{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_20_sm.css?v={NOWDATE}T{NOWTIME}" rel="stylesheet" media="(min-width:576px) and (max-width:767px)">
<link href="/{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_30_md.css?v={NOWDATE}T{NOWTIME}" rel="stylesheet" media="(min-width:768px) and (max-width:991px)">
<link href="/{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_40_lg.css?v={NOWDATE}T{NOWTIME}" rel="stylesheet" media="(min-width:992px) and (max-width:1199px)">
<link href="/{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_50_xl.css?v={NOWDATE}T{NOWTIME}" rel="stylesheet" media="(min-width:1200px)">

Itt a méretek neveit (10_xs, 20_sm, stb), illetve a megadott szélességeket (575px, 767px, stb) a portálban, vagy az egyedileg a template-ben megadott töréspont beállítások szerint kell kitölteni.

Összes CSS fájl behívása <link>-ként, JS kóddal

A fenti megoldások hátránya, hogy a böngésző az összes fájlt letölti, és utána dönti el a megadott méretek alapján, hogy melyiket használja, így például mobilon feleslegesen betölti az összes többi mérethez tartozó fájlt is.

Ezt ki lehet kerülni egyedi javascript kód írásával, amit elhelyezhetünk a <head>, vagy a <body> végén:

<script>
  var href = '/{CONFIGCSSPATH}/template/tmpl_' + '{TEMPLATEID}' + '_';
  if (screen.width < 576) {
  href = href.concat('10_xs');
  } else if (screen.width < 768) {
  href = href.concat('20_sm');
  } else if (screen.width < 992) {
  href = href.concat('30_md');
  } else if (screen.width < 1200) {
  href = href.concat('40_lg');
  } else {
  href = href.concat('50_xl');
  }
  if (href.length) {
  if (typeof(cssVersion) == 'undefined') {
  cssVersion = '{NOWDATE}T{NOWTIME}';
  }
  href = href.concat('.css?v=').concat(cssVersion);
  var link = document.createElement('LINK');
  link.href = href;
  link.rel = 'stylesheet';
  document.head.append(link);
  }
</script>

Amennyiben az elsődleges mérethez tartozó css-t behívjuk critical css-ként (lásd később), akkor az ahhoz tartozó méretnél a href változó értéke lehet üres, ezt a példa kód lekezeli, és csak valid fájlt tölt be:

href = '';

A HTML kódos behíváshoz hasonlóan a töréspont neveket és az azokhoz tartozó szélességeket a töréspont beállítások szerint kell megadni.

Ez a kód csak egyszer fut le, amennyiben le szeretnénk kezelni a betöltés utáni ablak átméretezést, a window resize eseményére kell feliratkozni, és egy ehhez hasonló kódot futtatni, azonban ekkor figyelni kell, hogy ha egy fájlt már egyszer behívtunk, akkor ne hozzon létre hozzá egy újabb <link> tag-et a javascript, mert ekkor újra és újra betölti a böngésző ugyanazt a fájlt.

CSS fájlok beépítése az oldalba inline css-ként

Amennyiben nem fájlként szeretnénk behívni a kódokat, hanem közvetlenül a HTML kódba szeretnénk beépíteni, megtehetjük a megfelelő mérethez tartozó SSI fájl behívásával:

<style>
  <!--#include virtual="/{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_10_xs.css.html" -->
</style>

Ezzel a megoldással bármelyik, akár az összes css fájl tartalmát beépíthetjük az oldalba, feltéve, hogy a kiszolgáló szerveren engedélyezve van az SSI.

Fontos, hogy egy <style> tag-en belül hívjuk be a fájlokat, mivel azok csak a css kódot tartalmazzák annak ellenére, hogy .html kiterjesztésűek. Gyakorlatilag a /{CONFIGCSSPATH}/template/tmpl_{TEMPLATEID}_10xs.css és /{CONFIGCSSPATH}/template/tmpl{TEMPLATEID}_10_xs.css.html fájlok tartalma azonos.

Critical CSS

A Critical CSS-t azért érdemes megadni, hogy amíg nem töltődnek le a megfelelő CSS fájlok, addig se essen szét a hajtás feletti része az oldalnak.

Amennyiben behívjuk az elsődleges méret SSI fájlját, az a problémák jelentős részét megoldja, ehhez a rendszer biztosít egy változót:

<style>
{TEMPLATESTYLEPRIMARYSSI}
</style>

Az elsődleges méret attól függ, hogy mi a beállított breakpoint direction. mobil -> desktop esetén a legkisebb méret desktop -> mobile esetén a legnagyobb méret

Ez a változó az előző példában bemutatott SSI include-ot helyezi el az oldalban.

Fontos, hogy ez a kód mindenképpen a méret specifikus behívások előtt szerepeljen a forráskódban.

Ezután ha szükséges, a további szükséges Critical CSS-t egy szabadon választott generátorral le kell generálni, és elhelyezni közvetlenül ez után:

<style>
  {TEMPLATESTYLEPRIMARYSSI}
</style>

<style>
  /* további critical css kódok */
</style>

{TEMPLATESTYLESSI}

Nem méret szerint szétvágott CSS fájlok

Amennyiben a css fájlok csak csoportosítva vannak, de azokon belül nincsenek méret szerint szétvágva, akkor elég az elsődleges mérethez beállítani a listát (vagy a legkisebb, vagy a legnagyobb), és az ahhoz tartozó .css vagy .html fájlt behívni a fent leírt módszerek valamelyikével.

JS fájlok beállítása és behívása a template-ben

Ezt az adott template szerkesztő felületén a Breakpoint Specific Options fülön tehetjük meg.

Miután be vannak állítva és ki vannak publikálva a fájlok, behívhatjuk azokat az oldalba.

JS fájl behívása külső fájlként

Ehhez a {TEMPLATEJSSSI} változót kell elhelyezni oda, ahova a js kódot szeretnénk elhelyezni. Ez tipikusan a <head> vagy a <body> vége.

Ez a változó a következőhöz hasonló kódot helyezi el az oldalban:

<!--#include virtual="/ssi/template/tmpl_6280034784378880.js.html" -->

Ami mivel egy SSI fájl behívás, valójában egy ehhez hasonló kódot fog végül az oldal kiszolgálásakor adni a böngészőnek:

<script src="/design/template/tmpl_6280034784378880.js?v=1638978905"></script>

JS fájl behívása <script>-ként, HTML kóddal, SSI nélkül

<script src="/{CONFIGJAVASCRIPTPATH}/template/tmpl_{TEMPLATEID}.js?v={NOWDATE}T{NOWTIME}"></script>

JS fájl beépítése az oldalba inline script-ként

Amennyiben nem fájlként szeretnénk behívni a kódot, hanem közvetlenül a HTML kódba szeretnénk beépíteni, megtehetjük a template-hez tartozó SSI fájl behívásával:

<script>
  <!--#include virtual="/{CONFIGJAVASCRIPTPATH}/template/tmpl_{TEMPLATEID}.js.html" -->
</script>

Ezzel a megoldással bármelyik, akár az összes css fájl tartalmát beépíthetjük az oldalba, feltéve, hogy a kiszolgáló szerveren engedélyezve van az SSI.

Fontos, hogy egy <script> tag-en belül hívjuk be a fájlokat, mivel azok csak a js kódot tartalmazzák annak ellenére, hogy .html kiterjesztésűek. Gyakorlatilag a /{CONFIGJAVASCRIPTPATH}/template/tmpl{TEMPLATEID}.js és /{CONFIGJAVASCRIPTPATH}/template/tmpl{TEMPLATEID}.js.html fájlok tartalma azonos.