Vkládání vlastních JavaScriptových a CSS souborů v bluetronix CMS
V tomto tutoriálu vložíš vlastní JavaScriptový soubor a vlastní styl do rozvržení své webové stránky. Seznámíš se s pravidlem _own a zjistíš, jak verzování souborů pomáhá při změnách.
Předpoklady a cíl
Pro tento tutoriál potřebuješ vývojářský přístup k bluetronix CMS a měl bys znát strukturu layoutů a vývojářských složek. Naučíš se, jak přidat vlastní JavaScript a CSS soubory vedle stávajících souborů CMS, aniž bys měnil originální systémové soubory.
Používáme soubory BxHeadScript_own.js a BxStyle_own.css zobrazené na screenshotu. Oba soubory jsou výslovně zahrnuty v layoutu, aby je CMS zohlednilo při načítání webové stránky.
1. Otevřít rozvržení
Otevři v CMS sekci Layout a vyber Layout - HTML. Poté otevři layout, do kterého chceš zahrnout své JavaScript a CSS soubory. V tomto příkladu používáme výchozí layout.
V definici layoutu již najdeš zahrnutí centrálních souborů CMS, například BxHeadScript.js a BxStyle.css. Další vlastní soubory můžeš zapsat hned vedle.
2. Vytvořit vlastní JavaScriptový soubor v správci souborů
Otevři správce souborů a přepni se do červeně označené systémové složky bx_script. Najdeš zde centrální JavaScriptové soubory bluetronix CMS a případně jazykové varianty.
Vytvoř zde svůj vlastní soubor BxHeadScript_own.js nebo ho vyber, pokud již existuje. Můžeš použít vhodný existující soubor jako šablonu.
Vyber Upravit, abys otevřel JavaScriptový kód svého vlastního souboru v textovém editoru.
Na zobrazeném příkladu obsahuje soubor vlastní JavaScriptový kód pro volbu mezi tmavým a jasným režimem. V textovém editoru můžeš spravovat svůj projektově specifický JavaScriptový kód a poté jej uložit.
Pro vlastní rozšíření neměň originální BxHeadScript.js. Soubory uvnitř bx_-systémových složek mohou být při aktualizacích CMS přepsány. Označ své soubory tam s _own.
3. Vložit vlastní JavaScriptový soubor do rozvržení
Vrať se zpět k Layout - HTML. Přidej svůj vlastní JavaScriptový soubor vedle existujícího souboru CMS. Pokud má být tvůj skript načten brzy, vložíš ho, jak je na screenshotu, do oblasti head za existující Head-Script.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
Další řádek načítá tvůj vlastní JavaScriptový kód. Původní BxHeadScript.js zůstává nezměněn. Cesta k souboru a způsob zápisu vlastního souboru musí odpovídat souboru ve správci souborů.
4. Vytvořit vlastní CSS soubor v správci souborů
Otevři v správci souborů systémovou složku bx_style. Zde se nachází mimo jiné centrální stylesheet BxStyle.css. Pro vlastní úpravy použijeme samostatný soubor nazvaný BxStyle_own.css.
Vytvoř soubor BxStyle_own.css nebo otevři existující vlastní soubor. Systémový soubor BxStyle.css zůstává nedotčen.
Pomocí Upravit můžeš v tomto souboru uložit vlastní CSS pravidla.
5. Vložit vlastní CSS soubor do rozvržení
Znovu otevři Layout - HTML. V oblasti head doplníš svou vlastní CSS soubor po existujícím stylesheetu. Pořadí je důležité, pokud mají vlastní pravidla přepsat standardní formátování.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
Standardní CSS soubor zůstává zachován, zatímco ty spravuješ další nebo odlišná formátování odděleně v BxStyle_own.css.
6. Použít JavaScript v hlavičce nebo na konci stránky
JavaScriptové soubory mohou být vkládány v závislosti na jejich úkolu v oblasti head nebo na konci stránky před uzavíracím body tagem. Zobrazený BxHeadScript_own.js bude načten v Head. Pro jiné skripty můžeš použít také vlastní projektovou složku a později soubor vložit do layoutu.
Příklad pro další soubor z vlastní složky na konci stránky:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Tento příklad ukazuje další soubor. Chceš-li místo toho nahradit systémový soubor svou vlastní verzí, musíš vědomě upravit příslušná zahrnutí ve vybraném layoutu a zkontrolovat, že žádné potřebné funkce CMS nejsou vynechány.
7. Rozlišení systémových a vlastních projektových složek
Červeně označené bx_ složky patří k bluetronix CMS. Vlastní soubory uvnitř těchto složek musí být označeny _own, aby nebyly při obvyklých aktualizacích CMS zachovány jako systémové soubory.
Můžeš také ukládat vlastní JavaScriptové a CSS soubory alternativně do vlastních projektových složek bez předpony bx_, například /script/ nebo /my_scripts/. Zde není označení _own nutné. Skutečnou cestu musíš poté používat ve své definici layoutu.
Označení _own nenahrazuje zahrnutí v layoutu: Samostatně vytvořený soubor se načte až tehdy, když je zahrnut přes odpovídající script nebo link řádek.
8. Automatická verzionace souborů
Při ukázaných vkladech rozložení používá bluetronix CMS označení __FV_…__. Skrze to může CMS doplnit parametr verze na základě data změny. Po změně tím prohlížeč načte aktuální JavaScript nebo CSS soubor, místo aby nadále používal starší verzi z mezipaměti.
Příklad: Původní cesta jako /script/MyScript.js může být po zpracování doplněna o parametr verze. Není nutné, abys aktualizoval číslo verze v jednotlivých layoutových souborech.
9. Uložení a kontrola změn
Nejdříve ulož své vlastní JavaScriptové a CSS soubory a poté upravený layout. Znovu načti svou webovou stránku a zkontroluj, zda se tvé JavaScriptové funkce vykonávají a vlastní CSS pravidla se aplikují.
Pokud se soubor nenačítá, nejprve zkontroluj název souboru, velikost písmen, cestu k adresáři a začlenění v layoutu. Pokud je používáno více layoutů, zkontroluj také, zda jsi upravil layout přiřazený příslušné stránce.
Shrnutí
Pro vlastní rozšíření vytvoř například BxHeadScript_own.js v adresáři bx_script a BxStyle_own.css v adresáři bx_style. Poté obě soubory začleň v Layout - HTML vedle původních souborů CMS. Tím zůstanou standardní soubory nezměněny, zatímco svou projektovou JavaScriptovou a CSS logiku spravuješ odděleně.
Často kladené otázky
co se nás zákazníci často ptají
Potřebuji přístup pro vývojáře, abych mohl začlenit vlastní JavaScriptové a CSS soubory?
Ano. Tento tutoriál je určen vývojářům, kteří mají přístup k definici layoutu a vývojářským adresářům CMS bluetronix.
Kde najdu začlenění JavaScriptu a CSS?
Otevři Layout a vyber Layout - HTML. Tam můžeš doplnit začlenění v požadovaném layoutu.
Kde uložím vlastní JavaScriptový soubor?
V uvedeném příkladu vytvoříš BxHeadScript_own.js v adresáři bx_script a začleníš jej vedle existujícího BxHeadScript.js do layoutu.
Kde uložím vlastní CSS soubor?
V uvedeném příkladu se vlastní soubor BxStyle_own.css nachází v adresáři bx_style. V layoutu je zařazen po existujícím stylesheetu.
Proč by měly vlastní soubory obsahovat v názvu _own?
Červeně označené bx_-systémové adresáře mohou být při aktualizacích přepsány. Pomocí _own označuješ své vlastní projektové soubory.
Bude _own soubor automaticky načten, jakmile bude vytvořen?
Ne. Musíš vlastní JavaScriptový nebo CSS soubor v požadovaném layoutu doplnit o vhodné script nebo link začlenění.
Mohu použít vlastní adresář místo bx_-systémového adresáře?
Ano. V samostatně vytvořeném projektovém adresáři bez bx_-předpony není _own nutné. Použij v layoutu skutečnou cestu k souboru.
Měl bych načíst svůj vlastní CSS soubor před nebo po standardním souboru?
V příkladu se BxStyle_own.css začleňuje po BxStyle.css. Tím mohou vlastní pravidla se stejnou specifikací přepsat dříve načtená standardní pravidla.
K čemu slouží označení __FV_…__ v cestách k souborům?
CMS bluetronix může tímto způsobem doplnit parametr verze souboru, takže prohlížeče po změně načtou aktuální soubor.
Co zkontroluji, když můj vlastní soubor není účinný?
Zkontroluj název souboru, velikost písmen, zadanou cestu a začlenění a výběr správného layoutu.