Saját JavaScript és CSS fájlok beillesztése a bluetronix CMS-be
Ebben a bemutatóban saját JavaScript fájlt és saját stíluslapot illesztesz be a weboldalad elrendezésébe. Megismered a _own szabályt, és megtudod, hogyan segít a fájlverziózás a módosítások során.
Követelmények és cél
Ehhez a bemutatóhoz szükséged van egy fejlesztői hozzáférésre a bluetronix CMS-hez, és ismerned kell a sablonok és fejlesztőmappák felépítését. Megtanulod, hogyan lehet a meglévő CMS fájlok mellett saját JavaScript- és CSS-fájlokat is beágyazni anélkül, hogy a hivatalos rendszerfájlokat módosítanád.
A képernyőképeken látható BxHeadScript_own.js és BxStyle_own.css fájlokat használjuk. Mindkét fájlt kifejezetten be kell ágyazni a sablonba, hogy a CMS figyelembe vegye őket a weboldal betöltésekor.
1. Nyisd meg az elrendezést
Nyisd meg a CMS-ben a Sablon részt, és válaszd a Sablon - HTML lehetőséget. Ezután nyisd meg azt a sablont, amelybe be szeretnéd ágyazni a JavaScript- és CSS-fájljaidat. Ebben a példában a standard sablont használjuk.
A sablonmeghatározásban már találhatsz beágyazásokat a központi CMS fájlokhoz, például a BxHeadScript.js és BxStyle.css fájlokhoz. További saját fájlokat közvetlenül melléjük írhatsz.
2. Hozd létre a saját JavaScript fájlodat a fájlkezelőben
Nyisd meg a Fájlkezelőt, és lépj be a pirossal megjelölt rendszer mappába, a bx_script-be. Itt találod a bluetronix CMS központi JavaScript fájljait és szükség esetén a nyelvfüggő változataikat.
Hozd létre a saját fájlodat, a BxHeadScript_own.js fájlt, vagy válaszd ki, ha már létezik. Ehhez másolj egy megfelelő meglévő fájlt mintaként.
Válaszd a Szerkesztés lehetőséget, hogy megnyisd a saját fájlod JavaScript kódját a szövegszerkesztőben.
A bemutatott példában a fájl saját JavaScript kódot tartalmaz a Sötét mód és Fényes mód közötti választáshoz. A szövegszerkesztőben karbantarthatod a saját projektedhez tartozó JavaScript kódot, majd mentheted.
Ne módosítsd a hivatalos BxHeadScript.js fájlt saját kiegészítéseidhez. A bx_ rendszer mappákban lévő fájlok CMS frissítések során felülírhatók. Jelöld meg a saját fájlokat _own végződéssel.
3. Illeszd be a saját JavaScript fájlodat az elrendezésbe
Térj vissza a Sablon - HTML részhez. A meglévő CMS fájl mellett add hozzá a saját JavaScript fájlodat is. Ha azt szeretnéd, hogy a scripted korán betöltődjön, az head részben, a meglévő Head-Script után add hozzá.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
A kiegészítő sor betölti a saját JavaScript kódodat. Az eredeti BxHeadScript.js változatlan marad. A fájl elérési útja és a saját fájl neve meg kell, hogy egyezzen a fájlkezelőben lévő fájllal.
4. Hozd létre a saját CSS fájlodat a fájlkezelőben
Nyisd meg a Fájlkezelőben a bx_style rendszer mappát. Itt többek között a központi stíluslap található, a BxStyle.css. A saját módosításokhoz egy külön fájlt használunk, amelynek neve BxStyle_own.css.
Hozd létre a BxStyle_own.css fájlt, vagy nyisd meg a meglévő saját fájlt. A rendszerfájl, a BxStyle.css megmarad.
A Szerkesztés segítségével ebben a fájlban megadhatod a saját CSS szabályaidat és elmentheted.
5. Illeszd be a saját CSS fájlodat az elrendezésbe
Újra nyisd meg a Sablon - HTML részt. A head szekcióban a meglévő stíluslap után add hozzá a saját CSS fájlodat. A sorrend fontos, ha a saját szabályaid felül akarják írni a szabványos formázást.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
A szabványos CSS fájl változatlan marad, míg a további vagy eltérő formázásokat elkülönítve a BxStyle_own.css-ben kezeled.
6. Használj JavaScriptet a fejlécben vagy az oldal alján
A JavaScript fájlok a feladatuktól függően a head szekcióban vagy az oldal alján, a záró body címke előtt ágyazhatók be. A bemutatott BxHeadScript_own.js a Head-ben töltődik be. Más szkriptekhez saját projektmappát is használhatsz, és a fájlt később a sablonba ágyazhatod.
Példa egy további fájlra egy saját mappából az oldal alján:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Ez a példa egy további fájlt mutat be. Ha egy rendszerfájlt szeretnél a saját változatoddal helyettesíteni, tudatosan kell módosítanod a megfelelő beágyazásokat a kiválasztott sablonban, és ellenőrizned kell, hogy nem maradnak el szükséges CMS funkciók.
7. Rendszermappák és saját projektmappák megkülönböztetése
A pirossal jelölt bx_ mappák a bluetronix CMS-hez tartoznak. A saját fájlokat ezekben a mappákban _own megjelöléssel kell ellátni, hogy a hivatalos CMS frissítések során ne kezeljék őket a rendszerfájlokkal egyenrangúan.
Saját JavaScript- és CSS-fájlokat alternatívaként saját létrehozott projektmappákban is elhelyezhetsz bx_ előtag nélkül, például /script/ vagy /my_scripts/. Ott a _own megjelölés nem kötelező. A tényleges elérési utat ezután fel kell használnod a sablonmeghatározásodban.
A _own megjelölés nem helyettesíti a beágyazást a sablonban: egy külön létrehozott fájl csak akkor töltődik be, ha a megfelelő script vagy link soron keresztül van beágyazva.
8. Automatikus fájlverziózás
A bemutatott elrendezési beágyazások során a bluetronix CMS a __FV_…__ jelölést alkalmazza. Ezen keresztül a CMS egy verzióparamétert adhat a módosítás dátuma alapján. Módosítás után a böngésző így a legfrissebb JavaScript vagy CSS fájlt tölti be, nem pedig egy régebbi gyorsítótárazott verziót.
Példa: Egy eredeti útvonal, mint a /script/MyScript.js, a feldolgozás után kiegészíthető egy verzió paraméterrel. A verzió számát a megfelelően beágyazott fájlokban nem szükséges minden elrendezésnél külön frissíteni.
9. Változások mentése és ellenőrzése
Először mentsd el a saját JavaScript- és CSS-fájljaidat, majd az átdolgozott elrendezést. Frissítsd az oldaladat, és ellenőrizd, hogy a JavaScript-funkcióid végrehajtódnak-e, illetve hogy a saját CSS-szabályaid alkalmazásra kerülnek.
Ha egy fájl nem töltődik be, először ellenőrizd a fájl nevét, a nagy- és kisbetűs írást, a mappát és az elrendezésbe való beágyazást. Ha több elrendezés van használatban, győződj meg arról is, hogy azt az elrendezést módosítottad, amely a megadott oldalhoz van rendelve.
Összefoglalás
Saját kiterjesztések létrehozásához például hozz létre BxHeadScript_own.js fájlt a bx_script mappában és BxStyle_own.css fájlt a bx_style mappában. Ezután mindkét fájlt be kell ágyaznod a Layout - HTML menüpontba az eredeti CMS fájlok mellett. Így a standard fájlok változatlanok maradnak, miközben a projektspecifikus JavaScript- és CSS-kódot külön kezelheted.
GYIK
Miket kérdeznek tőlünk gyakran az ügyfelek?
Szükségem van-e fejlesztői hozzáférésre a saját JavaScript- és CSS-fájlok beágyazásához?
Igen. Ez a útmutató fejlesztőknek szól, akik hozzáférnek a bluetronix CMS elrendezésdefiníciójához és fejlesztői mappáihoz.
Hol találom a JavaScript és CSS beágyazásokat?
Nyisd meg a Layout menüt, és válaszd a Layout - HTML opciót. Itt kiegészítheted a kívánt elrendezésbe a beágyazásokat.
Hol tárolom a saját JavaScript fájlomat?
A bemutatott példa alapján a BxHeadScript_own.js fájlt a bx_script mappában bele kell kapcsolni a meglévő BxHeadScript.js mellett az elrendezésbe.
Hol tárolom a saját CSS fájlomat?
A bemutatott példában a saját fájl BxStyle_own.css a bx_style mappában található. Az elrendezésben a meglévő stíluslap után kerül beágyazásra.
Miért kell a saját fájloknak _own-ot tartalmazniuk a rendszer mappákban?
A pirossal jelölt bx_ rendszer mappák frissítések során felülíródhatnak. A _own használatával jelölheted a saját projektspecifikus fájljaidat.
A _own fájl automatikusan betöltődik, amint létrehoztam?
Nem. A saját JavaScript- vagy CSS-fájlt a kívánt elrendezésben egy megfelelő script vagy link beágyazással kell kiegészítened.
Használhatok saját mappát a bx_-rendszer mappa helyett?
Igen. Egy általam létrehozott projektmappában, amely nem tartalmaz bx_ előtagot, a _own nem kötelező. Az elrendezésben az aktuális fájlútvonalat használd.
Saját CSS fájlomat a standard fájl előtt vagy után kell betöltenem?
A bemutatott példa alapján a BxStyle_own.css a BxStyle.css után kerül beágyazásra. Így a saját szabályaid, azonos specifikációval, felülírhatják a korábban betöltött standard szabályokat.
Mire szolgál a __FV_…__ jelölés a fájlok elérési útjában?
A bluetronix CMS így kiegészítheti a fájl verzió paramétert, lehetővé téve a böngészők számára, hogy módosítás után a legújabb fájlt töltsék be.
Mit ellenőrzök, ha a saját fájlom nem érvényesül?
Ellenőrizd a fájl nevét, a nagy- és kisbetűs írást, az adott útvonalat, valamint a beágyazást és a megfelelő elrendezés kiválasztását.