Vloženie vlastných JavaScript a CSS súborov v bluetronix CMS
V tomto návode vložíš vlastný JavaScript súbor a vlastný štýlový súbor do rozloženia tvojej webovej stránky. Naučíš sa pravidlo _own a zistíš, ako verzionovanie súborov pomáha pri zmenách.
Predpoklady a cieľ
Na tento návod potrebuješ vývojársky prístup k bluetronix CMS a mal by si poznať štruktúru rozložení a priečinkov pre vývojárov. Naučíš sa, ako pridať vlastné súbory JavaScript a CSS okrem existujúcich súborov CMS bez toho, aby si menil pôvodné systémové súbory.
Používame v snímkach obrazovky zobrazené súbory BxHeadScript_own.js a BxStyle_own.css. Obe súbory sú výslovne pridané do rozloženia, aby ich CMS zohľadnilo pri načítaní webovej stránky.
1. Otvoriť rozloženie
Otvor v CMS sekciu Rozloženie a vyber Rozloženie - HTML. Následne otvor rozloženie, do ktorého chceš pridať svoje súbory JavaScript a CSS. V tomto príklade používame predvolené rozloženie.
V definícii rozloženia už nájdeš odkazy na centrálné súbory CMS, ako sú BxHeadScript.js a BxStyle.css. Dodatočné vlastné súbory môžeš pridať priamo vedľa nich.
2. Vytvoriť vlastný JavaScript súbor v správcovi súborov
Otvor Správca súborov a prejdite do červeným označeného systémového priečinka bx_script. Nájdeš tam centrálné súbory JavaScript bluetronix CMS a prípadne jazykovo špecifické varianty.
Vytvor tam vlastný súbor BxHeadScript_own.js alebo ho vyber, ak už existuje. Na to môžeš skopírovať vhodný existujúci súbor ako vzor.
Vyber Upraviť, aby si otvoril kód JavaScript svojho súboru v textovom editore.
V zobrazenom príklade obsahuje súbor vlastný JavaScriptový kód na výber medzi tmavým a svetlým režimom. V textovom editore môžeš spravovať svoj projektový špecifický JavaScriptový kód a následne ho uložiť.
Na vlastné rozšírenia nemeniť pôvodný BxHeadScript.js. Súbory v priečinkoch bx_ systému môžu byť pri aktualizáciách CMS prepísané. Označ svoje súbory tam s _own.
3. Vložiť vlastný JavaScript súbor do rozloženia
Vráť sa späť k Rozloženiu - HTML. Pridaj svoj vlastný JavaScriptový súbor k existujúcemu súboru CMS. Ak má byť tvoj skript načítaný skôr, vlož ho, ako je uvedené na snímke obrazovky, do head oblasti za existujúcim Head-Skriptom.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
Dodatočný riadok načíta tvoj vlastný JavaScriptový kód. Pôvodný BxHeadScript.js zostáva nezmenený. Cesta súboru a zápis tvojho vlastného súboru musia zodpovedať súboru v správci súborov.
4. Vytvoriť vlastný CSS súbor v správcovi súborov
Otvor v Správcovi súborov systémový priečinok bx_style. Tu sa nachádza okrem iného centrálny štýlový súbor BxStyle.css. Na vlastné úpravy používame samostatný súbor s názvom BxStyle_own.css.
Vytvor súbor BxStyle_own.css alebo otvori existujúci vlastný súbor. Systémový súbor BxStyle.css zostáva zachovaný.
Cez Upraviť môžeš v tomto súbore ukladať vlastné CSS pravidlá.
5. Vložiť vlastný CSS súbor do rozloženia
Otvor opäť Rozloženie - HTML. V head oblasti doplň po existujúcom štýlovom súbore svoj vlastný CSS súbor. Poradie je dôležité, ak majú vlastné pravidlá nahradiť predvoľbu.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
Pôvodný CSS súbor zostáva, zatiaľ čo dodatočné alebo odlišné formátovania spravuješ samostatne v BxStyle_own.css.
6. Použiť JavaScript v hlavičke alebo na konci stránky
JavaScript súbory môžu byť v závislosti od ich účelu pridané do head oblasti alebo na koniec stránky pred uzatváracím body-tagom. Zobrazený BxHeadScript_own.js sa načíta v hlave. Na iné skripty môžeš použiť aj vlastný priečinok projektu a súbor neskôr pridať do rozloženia.
Príklad pre dodatočný súbor z vlastného priečinka na konci stránky:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Tento príklad ukazuje dodatočný súbor. Ak chceš namiesto toho nahradiť systémový súbor svojou vlastnou verziou, musíš vedome upraviť a skontrolovať príslušné odkazy v zvoleném rozložení, aby sa zabezpečilo, že sa žiadne potrebné funkcie CMS nestratia.
7. Rozlíšenie systémových a vlastných projektových priečinkov
Červeným označené bx_-priečinky patria k bluetronix CMS. Vlastné súbory v týchto priečinkoch musia byť označené _own, aby sa pri pravidelných aktualizáciách CMS nesprávali ako systémové súbory.
Môžeš svoje JavaScriptové a CSS súbory alternatívne uložiť do vlastných projektových priečinkov bez bx_-predpony, napríklad /script/ alebo /my_scripts/. Tam označovanie _own nie je povinné. Skutočnú cestu potom musíš použiť vo svojej definícii rozloženia.
Označenie _own nenahrádza pripojenie v rozložení: Samostatne vytvorený súbor sa načíta až po tom, čo je pridaný prostredníctvom vhodného script- alebo link-riadku.
8. Automatická verzionovanie súborov
Pri zobrazených spôsoboch zapracovania využíva CMS bluetronix označenie __FV_…__. Tým môže CMS doplniť parametre verzie na základe dátumu zmeny. Po zmene tak prehliadač načíta aktuálny JavaScript alebo CSS súbor, namiesto používania staršej verzie cache.
Príklad: Pôvodná cesta ako /script/MyScript.js môže byť po spracovaní doplnená o parameter verzie. Nemusíš ručne aktualizovať číslo verzie v každom rozložení pre príslušné pripojené súbory.
9. Uloženie a kontrola zmien
Najprv ulož svoje vlastné súbory JavaScript a CSS a potom spracované rozloženie. Obnov svoju webovú stránku a skontroluj, či sú tvoje JavaScript funkcie vykonávané a vlastné CSS pravidlá aplikované.
Ak sa súbor nenačíta, najprv skontroluj názov súboru, veľké a malé písmená, cestu k zložke a pripojenie v rozložení. Ak je v použití viacero rozložení, skontroluj tiež, či si upravil rozloženie, ktoré je priradené k danej stránke.
Zhrnutie
Pre vlastné rozšírenia vytvor napríklad BxHeadScript_own.js v zložke bx_script a BxStyle_own.css v zložke bx_style. Následne pripoj oba súbory do Rozloženie - HTML okrem pôvodných súborov CMS. Tak zostanú štandardné súbory nezmenené, zatiaľ čo ty delíš projekty špecifický JavaScript a CSS kód.
Často kladené otázky
čo sa nás zákazníci často pýtajú
Potrebujem prístup pre vývojárov, aby som mohol pripojiť vlastné súbory JavaScript a CSS?
Áno. Tento návod je určený pre vývojárov, ktorí majú prístup k definícii rozloženia a vývojárskym zložkám bluetronix CMS.
Kde nájdem pripojenia pre JavaScript a CSS?
Otvor Rozloženie a vyber Rozloženie - HTML. Tam môžeš pridať pripojenia do požadovaného rozloženia.
Kde uložiť vlastný súbor JavaScript?
V zobrazenom príklade vytvor BxHeadScript_own.js v zložke bx_script a pripoj ju navyše k existujúcemu BxHeadScript.js do rozloženia.
Kde uložiť vlastný súbor CSS?
V zobrazenom príklade sa vlastný súbor BxStyle_own.css nachádza v zložke bx_style. V rozložení bude pripojený za existujúcim štýlovým listom.
Prečo by mali vlastné súbory obsahovať v názve _own?
Červeno označené bx_ systémové zložky môžu byť pri aktualizáciách prepísané. S _own označuješ svoje vlastné projekty špecifické súbory.
Bude _own súbor automaticky načítaný, akonáhle je vytvorený?
Nie. Musíš vlastný súbor JavaScript alebo CSS pridať do požadovaného rozloženia s vhodným pripojením script alebo link.
Môžem použiť vlastnú zložku namiesto bx_ systémovej zložky?
Áno. V samostatnej projektovej zložke bez bx_ predpony nie je _own nevyhnutné. Použi v rozložení skutočnú cestu k súboru.
Mal by som načítať svoj vlastný súbor CSS pred alebo po štandardnom súbore?
V zobrazenom príklade je BxStyle_own.css pripojený za BxStyle.css. Týmto spôsobom môžu svoje vlastné pravidlá s rovnakou špecifickosťou prepísať predtým načítané štandardné pravidlá.
Na čo slúži označenie __FV_…__ v súborových cestách?
bluetrnix CMS môže týmto spôsobom doplniť parameter verzie súboru, aby prehliadače po zmene načítali aktuálny súbor.
Čo skontrolujem, ak moja vlastná súbor nefunguje?
Skontroluj názov súboru, veľké a malé písmená, zadanú cestu a pripojenie a výber správneho rozloženia.