Oman JavaScript- ja CSS-tiedoston liittäminen bluetronix CMS:ään

Vaatimukset ja tavoite

Tätä opasta varten tarvitset kehittäjätilin bluetronix CMS:ään ja sinun tulee tuntea asettelut ja kehittäjähakemistot. Opit liittämään omat JavaScript- ja CSS-tiedostosi olemassa olevien CMS-tiedostojen lisäksi muuttamatta alkuperäisiä järjestelmätiedostoja.

Käytämme kuvissa näkyviä tiedostoja BxHeadScript_own.js ja BxStyle_own.css. Molemmat tiedostot liitetään nimenomaisesti asetteluun, jotta CMS ottaa ne huomioon verkkosivun latauksessa.

1. Avaa layout

Avaa CMS:ssä Asettelu ja valitse Asettelu - HTML. Avaa sitten asettelu, johon haluat liittää JavaScript- ja CSS-tiedostosi. Tässä esimerkissä käytämme vakiopohjaa.

Asettelu määrittelyssä löydät jo liitteet keskeisiin CMS-tiedostoihin, kuten BxHeadScript.js ja BxStyle.css. Voit lisätä omat tiedostosi suoraan niiden viereen.

2. Luo oma JavaScript-tiedosto tiedostonhallinnassa

Avaa Tiedostohallinta ja siirry punaisella merkityksiin järjestelmähakemistoon bx_script. Sieltä löydät bluetronix CMS:n keskeiset JavaScript-tiedostot ja mahdolliset kielikohtaiset variantit.

Luo sinne oma tiedosto BxHeadScript_own.js tai valitse se, jos se on jo olemassa. Voit kopioida siihen sopivan olemassa olevan tiedoston malliksi.

Valitse Muokkaa avataksesi oman tiedostosi JavaScript-koodin tekstieditorissa.

Esitetty esimerkki sisältää tiedostossa omaa JavaScript-koodia, joka valitsee tumman ja vaalean tilan välillä. Tekstieditorissa voit hallita projekteittesi JavaScript-koodia ja tallentaa sen sitten.

Älä muuta alkuperäistä BxHeadScript.js omilla lisäyksilläsi. bx_-järjestelmähakemiston tiedostoja voidaan ylittää CMS-päivitysten yhteydessä. Merkitse omat tiedostosi siellä _own:illa.

3. Liitä oma JavaScript-tiedosto layoutiin

Palaa takaisin Asettelu - HTML -osioon. Lisää oma JavaScript-tiedostosi olemassa olevan CMS-tiedoston lisäksi. Jos skriptisi on tarkoitus ladata aikaisemmin, lisää se kuvassa näkyvällä tavalla head-osassa olemassa olevan Head-skriptin jälkeen.

<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>

Lisätty rivi lataa oman JavaScript-koodisi. Alkuperäinen BxHeadScript.js pysyy muuttumattomana. Oman tiedostosi polun ja kirjoitusasun on vastattava tiedostoa tiedostohallinnassa.

4. Luo oma CSS-tiedosto tiedostonhallinnassa

Avaa Tiedostohallinta ja siirry järjestelmähakemistoon bx_style. Täältä löydät muun muassa keskeisen tyylitiedoston BxStyle.css. Omiin mukautuksiin käytämme erillistä tiedostoa nimeltä BxStyle_own.css.

Luo tiedosto BxStyle_own.css tai avaa olemassa oleva oma tiedosto. Järjestelmätiedosto BxStyle.css pysyy silloin ennallaan.

Otetaan Muokkaa käytössäsi voit tallentaa omia CSS-sääntöjä tähän tiedostoon.

5. Liitä oma CSS-tiedosto layoutiin

Avaa taas Asettelu - HTML. head-osassa lisää oman CSS-tiedostosi olemassa olevan tyylitiedoston jälkeen. Suhde on tärkeä, jos omat säännöt haluavat ylittää vakiosäätelyt.

<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">

Vakios CSS-tiedosto pysyy voimassa, kun hallitset erilaista tai erikoisformaattia erikseen BxStyle_own.css -tiedostossa.

6. Käytä JavaScriptiä head-osassa tai sivun lopussa

JavaScript-tiedostot voidaan liittää head-osassa tai sivun lopussa ennen sulkevaa body-tagia riippuen niiden tehtävästä. Näytetty BxHeadScript_own.js ladataan Head-palveluun. Muunlaisille skripteille voit käyttää myös omaa projektihakemistoasi ja liittää tiedoston myöhemmin asetteluun.

Esimerkki ylimääräisestä tiedostosta omassa hakemistossa sivun lopussa:

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>

Tämä esimerkki näyttää ylimääräisen tiedoston. Jos haluat sen sijaan korvata järjestelmätiedoston omalla versiolla, sinun on tietoisesti säädettävä vastaavat liitteet valitussa asettelussa ja tarkistettava, ettei tarvittavia CMS-toimintoja katoa.

7. Erottaa järjestelmähakemistot ja omat projektihakemistot

Punaisella merkitut bx_-hakemistot kuuluvat bluetronix CMS:ään. Omien tiedostojen, jotka liittyvät näihin hakemistoihin, on oltava merkitty _own:illa, jotta niitä ei käsitellä järjestelmätiedostoina säännöllisissä CMS-päivityksissä.

Voit myös tallentaa omia JavaScript- ja CSS-tiedostoja itse luomissasi projektihakemistoissa ilman bx_-etuliitettä, esimerkiksi /script/ tai /my_scripts/. Siellä _own -merkin käyttö ei ole pakollista. Sinun on käytettävä todellista polkua asettelumäärittelyssä.

Merkintä _own ei korvaa asettelun liittämistä: erikseen luotava tiedosto ladataan vasta, kun se on liitetty oikean script- tai link-rivin kautta.

8. Automaattinen tiedostoversiointi

Näytetyissä asettelun liitännäisissä bluetronix CMS käyttää merkintää __FV_…__. Tämä mahdollistaa CMS:lle lisätä versiotunnus muutospäivämäärän mukaan. Muutoksen jälkeen selain lataa nykyisen JavaScript- tai CSS-tiedoston, eikä käytä vanhaa välimuistiversiota.

Esimerkki: Alkuperäinen polku kuten /script/MyScript.js voidaan käsittelyn jälkeen täydentää versioparametrilla. Sinun ei tarvitse päivittää versio numeroa vastaavasti liitetyissä tiedostoissa jokaisessa asettelussa.

9. Tallenna ja tarkista muutokset

Tallenna ensin omat JavaScript- ja CSS-tiedostosi ja sitten muokattu asettelu. Lataa verkkosivustosi uudelleen ja tarkista, että JavaScript-toiminnot suoritetaan ja omat CSS-säännöt sovelletaan.

Jos tiedostoa ei ladatut, tarkista ensin tiedoston nimi, isot ja pienet kirjaimet, kansiopolku ja asettelu. Jos käytössä on useita asetteluja, tarkista myös, oletko muokannut asettelua, joka on määritetty kyseiselle sivulle.

Yhteenveto

Oma laajennus voidaan luoda esimerkiksi tiedostolla BxHeadScript_own.js kansiossa bx_script ja BxStyle_own.css kansiossa bx_style. Tämän jälkeen lisäät molemmat tiedostot Layout - HTML asetteluun alkuperäisten CMS-tiedostojen lisäksi. Näin käytät vakiotiedostoja muuttamatta, samalla kun hallitset projektiisi liittyvää JavaScript- ja CSS-koodia erikseen.