Indbinding af egne JavaScript- og CSS-filer i bluetronix CMS

Forudsætninger og mål

Til denne tutorial har du brug for en udvikleradgang til bluetronix CMS og bør være bekendt med opbygningen af layout og udviklermapper. Du lærer at inkludere egne JavaScript- og CSS-filer udover de eksisterende CMS-filer uden at ændre de originale systemfiler.

Vi bruger de i skærmbillederne viste filer BxHeadScript_own.js og BxStyle_own.css. Begge filer inkluderes direkte i layoutet, så CMS'et tager dem i betragtning, når siden indlæses.

1. Åbn layoutet

Åbn området Layout i CMS'et og vælg Layout - HTML. Åbn derefter det layout, hvor du vil inkludere dine JavaScript- og CSS-filer. I dette eksempel bruger vi standardlayoutet.

I layoutdefinitionen finder du allerede inkluderinger for de centrale CMS-filer, såsom BxHeadScript.js og BxStyle.css. Yderligere egne filer kan du indtaste direkte ved siden af.

2. Opret egen JavaScript-fil i filhåndtereren

Åbn Filhåndteringen og skift til den rødt markerede systemmappe bx_script. Her finder du de centrale JavaScript-filer til bluetronix CMS og eventuelt sprogafhængige varianter.

Opret filen BxHeadScript_own.js der eller vælg den, hvis den allerede findes. Du kan kopiere en passende eksisterende fil som skabelon.

Vælg Rediger for at åbne JavaScript-koden fra din egen fil i teksteditoren.

I det viste eksempel indeholder filen egen JavaScript-kode til at vælge mellem Dark Mode og Light Mode. I teksteditoren kan du pleje din projektspecifikke JavaScript-kode og derefter gemme.

Ændr ikke den originale BxHeadScript.js for egne udvidelser. Filer inden for bx_-systemmapper kan blive overskrevet ved CMS-opdateringer. Mærk egne filer der med _own.

3. Bind egen JavaScript-fil ind i layoutet

Gå tilbage til Layout - HTML. Tilføj din egen JavaScript-fil ud over den eksisterende CMS-fil. Hvis dit script skal indlæses tidligt, indsætter du det som vist i skærmbilledet i head-området efter det eksisterende Head-Script.

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

Den ekstra linje indlæser din egen JavaScript-kode. Den originale BxHeadScript.js forbliver uændret. Filstien og skrivemåden for den egen fil skal svare til filen i filhåndteringen.

4. Opret egen CSS-fil i filhåndtereren

Åbn systemmappen bx_style i Filhåndteringen. Her findes blandt andet det centrale stylesheet BxStyle.css. Til egne tilpasninger bruger vi en separat fil kaldet BxStyle_own.css.

Opret filen BxStyle_own.css eller åbne den eksisterende egen fil. Systemfilen BxStyle.css forbliver intakt.

Gennem Rediger kan du i denne fil gemme egne CSS-regler.

5. Bind egen CSS-fil ind i layoutet

Åbn igen Layout - HTML. I head-området tilføjer du din egen CSS-fil efter det eksisterende stylesheets. Rækkefølgen er vigtig, 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__">

Den standard CSS-fil forbliver intakt, mens du administrerer yderligere eller afvigende formateringer separat i BxStyle_own.css.

6. Brug JavaScript i head eller bunden af siden

JavaScript-filer kan inkluderes i head-området eller i bunden af siden før den afsluttende body-tag afhængigt af deres opgave. Den viste BxHeadScript_own.js indlæses i Head. For andre scripts kan du også bruge en egen projektmappe og inkludere filen senere i layoutet.

Eksempel på en ekstra fil fra en egen mappe i bunden af siden:

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

Dette eksempel viser en ekstra fil. Hvis du i stedet ønsker at erstatte en systemfil med en egen version, skal du bevidst justere de relevante inkluderingspunkter i det valgte layout og sikre dig, at ingen nødvendige CMS-funktioner falder bort.

7. Skelne mellem systemmappe og egne projektmapper

De rødt markerede bx_-mapper tilhører bluetronix CMS. Eget filer inden for disse mapper skal mærkes med _own, så de ikke behandles som systemfiler ved almindelige CMS-opdateringer.

Du kan alternativt placere egne JavaScript- og CSS-filer i selvoprettede projektmapper uden bx_-præfiks, f.eks. /script/ eller /my_scripts/. Her er mærkningen _own ikke nødvendig. Den faktiske sti skal du så bruge i din layoutdefinition.

Mærkningen _own erstatter ikke inkluderingen i layoutet: En separat oprettet fil indlæses først, når den inkluderes via den passende script- eller link-linje.

8. Automatisk filversionering

I de viste layoutbindninger bruger bluetronix CMS mærkeringen __FV_…__. Dermed kan CMS tilføje en versionsparameter baseret på ændringsdatoen. Efter en ændring indlæser browseren dermed den aktuelle JavaScript- eller CSS-fil i stedet for at fortsætte med en ældre cache-version.

Eksempel: En oprindelig sti som /script/MyScript.js kan efter behandlingen blive suppleret med en versionsparameter. Du skal ikke selv opdatere versionsnummeret i hver inkluderet fil i hvert layout.

9. Gem og tjek ændringer

Gem først dine egne JavaScript- og CSS-filer og derefter det redigerede layout. Genindlæs din hjemmeside og kontroller, om dine JavaScript-funktioner udføres, og om dine egne CSS-regler anvendes.

Hvis en fil ikke indlæses, skal du først kontrollere filnavnet, store og små bogstaver, mappestien og inkluderingen i layoutet. Hvis der bruges flere layouts, skal du også kontrollere, om du har redigeret det layout, der er tildelt den pågældende side.

Sammendrag

For dine egne udvidelser opretter du eksempelvis BxHeadScript_own.js i mappen bx_script og BxStyle_own.css i mappen bx_style. Derefter inkluderer du begge filer i Layout - HTML ud over de oprindelige CMS-filer. På den måde forbliver standardfilerne uændrede, mens du håndterer projektspecifik JavaScript- og CSS-kode separat.