Integrere egne JavaScript- og CSS-filer i bluetronix CMS

Krav og mål

For denne veiledningen trenger du en utviklertilgang til bluetronix CMS, og du bør kjenne oppbyggingen av layoutene og utviklermapper. Du vil lære å inkludere egne JavaScript- og CSS-filer i tillegg til de eksisterende CMS-filene, uten å endre de originale systemfilene.

Vi bruker filene BxHeadScript_own.js og BxStyle_own.css som vises i skjermbildene. Begge filene blir eksplisitt inkludert i layouten, slik at CMS tar dem i betraktning når nettsiden lastes.

1. Åpne layout

Åpne området Layout i CMS, og velg Layout - HTML. Åpne deretter layouten der du vil inkludere JavaScript- og CSS-filene dine. I dette eksempelet bruker vi standardlayouten.

I layoutdefinisjonen finner du allerede inkluderinger for de sentrale CMS-filene, for eksempel BxHeadScript.js og BxStyle.css. Du kan legge til dine egne filer rett ved siden av.

2. Lage egen JavaScript-fil i filbehandleren

Åpne Filbehandleren og naviger til den røde merkede systemmappen bx_script. Her finner du de sentrale JavaScript-filene til bluetronix CMS, samt språklige varianter om nødvendig.

Opprett der filen BxHeadScript_own.js eller velg den hvis den allerede finnes. Du kan kopiere en passende eksisterende fil som mal.

Velg Rediger for å åpne JavaScript-koden til din egen fil i teksteditoren.

I det viste eksemplet inneholder filen egen JavaScript-kode for valg mellom mørk modus og lys modus. I teksteditoren kan du redigere din prosjektspecifikke JavaScript-kode og deretter lagre.

Endre ikke den originale BxHeadScript.js for egne utvidelser. Filer innen bx_-systemmapper kan bli overskrevet ved CMS-oppdateringer. Merke dine egne filer der med _own.

3. Integrere egen JavaScript-fil i layouten

Gå tilbake til Layout - HTML. Legg til din egen JavaScript-fil i tillegg til den eksisterende CMS-filen. Ønsker du at skriptet skal lastes tidlig, legger du det inn som i skjermbildet i head-delen etter den eksisterende head-skriptet.

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

Den ekstra linjen laster inn din egen JavaScript-kode. Den opprinnelige BxHeadScript.js forblir uendret. Filstien og skrivemåten til den egen filen må samsvare med filen i filbehandleren.

4. Lage egen CSS-fil i filbehandleren

Åpne Filbehandleren igjen og naviger til systemmappen bx_style. Her finner du blant annet det sentrale stylesheetet BxStyle.css. For egne tilpasninger bruker vi en separat fil kalt BxStyle_own.css.

Opprett filen BxStyle_own.css eller åpne den eksisterende egen filen. Systemfilen BxStyle.css vil forbli intakt.

Gjennom Rediger kan du i denne filen definere og lagre egne CSS-regler.

5. Integrere egen CSS-fil i layouten

Åpne igjen Layout - HTML. I head-delen legger du til den egen CSS-filen etter det eksisterende stylesheetet. Rekkefølgen er viktig hvis egne regler skal overskrive standardformateringen.

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

Standard-CSS-filen forblir, mens du administrerer ekstra eller avvikende formateringer separat i BxStyle_own.css.

6. Bruke JavaScript i head eller på slutten av siden

JavaScript-filer kan, avhengig av oppgaven, inkluderes i head-delen eller på slutten av siden før den avsluttende body-taggen. Den viste BxHeadScript_own.js lastes inn i Head. For andre skript kan du også bruke en egen prosjektmappe og inkludere filen senere i layouten.

Eksempel på en ekstra fil fra en egen mappe på slutten av siden:

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

Dette eksemplet viser en ekstra fil. Ønsker du i stedet å erstatte en systemfil med en egen versjon, må du justere og sjekke de aktuelle inkluderingene i den valgte layouten, slik at ingen nødvendige CMS-funksjoner går tapt.

7. Skille mellom systemmapper og egne prosjektmapper

De rødt merkede bx_-mappene tilhører bluetronix CMS. Egne filer i disse mappene må merkes med _own for å unngå at de behandles som systemfiler ved regulære CMS-oppdateringer.

Du kan alternativt plassere egne JavaScript- og CSS-filer i selvopprettede prosjektmapper uten bx_-prefiks, for eksempel /script/ eller /my_scripts/. Der er ikke merking med _own nødvendig. Den faktiske stien må du så bruke i din layoutdefinisjon.

Merke _own erstatter ikke inkluderingen i layouten: En separat opprettet fil lastes først inn når den er inkludert gjennom den riktige script- eller link-linjen.

8. Automatisk filversjonering

I de viste layout-båndene bruker bluetronix CMS merkingen __FV_…__. Gjennom dette kan CMS legge til en versjonsparameter basert på endringsdatoen. Etter en endring laster derfor nettleseren den aktuelle JavaScript- eller CSS-filen, i stedet for å fortsette å bruke en eldre cache-versjon.

Eksempel: En opprinnelig sti som /script/MyScript.js kan etter behandling suppleres med et versjonsparameter. Du trenger ikke å oppdatere versjonsnummeret for tilknyttede filer i hvert enkelt layout.

9. Lagre og sjekke endringer

Lagre først dine egne JavaScript- og CSS-filer, og deretter det redigerte layoutet. Last inn nettsiden på nytt og sjekk om JavaScript-funksjonene dine kjører og hvis de egne CSS-reglene blir anvendt.

Hvis en fil ikke lastes, sjekk først filnavnet, store og små bokstaver, mappestien og integrasjonen i layoutet. Hvis flere layouter er i bruk, sjekk også om du har redigert layoutet som er tildelt den aktuelle siden.

Sammendrag

For egne utvidelser kan du for eksempel lage BxHeadScript_own.js i mappen bx_script og BxStyle_own.css i mappen bx_style. Deretter integrerer du begge filene i Layout - HTML i tillegg til de originale CMS-filene. Dermed forblir standardfilene uendret, mens du håndterer prosjektspecifik JavaScript- og CSS-kode separat.