Integrera egna JavaScript- och CSS-filer i bluetronix CMS
I den här handledningen integrerar du en egen JavaScript-fil och ett eget stylesheet i layouten för din webbplats. Du lär dig _own-regeln och hur filversionering hjälper vid ändringar.
Förutsättningar och mål
För den här guiden behöver du ett utveckartillgång till bluetronix CMS och du bör känna till uppbyggnaden av layouter och utvecklarmappar. Du lär dig att inkludera egna JavaScript- och CSS-filer utöver de befintliga CMS-filerna, utan att förändra originalsystemfilerna.
Vi använder de i skärmdumparna visade filerna BxHeadScript_own.js och BxStyle_own.css. Båda filerna inkluderas uttryckligen i layouten så att CMS tar hänsyn till dem vid laddning av webbplatsen.
1. Öppna layouten
Öppna Layout i CMS och välj Layout - HTML. Öppna sedan layouten där du vill inkludera dina JavaScript- och CSS-filer. I det här exemplet använder vi standardlayouten.
I layoutdefinitionen hittar du redan inkluderingar för de centrala CMS-filerna, till exempel BxHeadScript.js och BxStyle.css. Du kan ange egna filer direkt bredvid.
2. Skapa egen JavaScript-fil i filhanteraren
Öppna Filhanteraren och gå till den rödmarkerade systemmappen bx_script. Där finner du de centrala JavaScript-filerna för bluetronix CMS och eventuellt språkberoende varianter.
Skapa där din egen fil BxHeadScript_own.js eller välj den om den redan finns. Du kan kopiera en lämplig befintlig fil som mall.
Välj Redigera för att öppna JavaScript-koden för din egen fil i textredigeraren.
I det visade exemplet innehåller filen egen JavaScript-kod för att välja mellan mörkt läge och ljust läge. I textredigeraren kan du underhålla din projektspecifika JavaScript-kod och spara den.
Ändra inte den originala BxHeadScript.js för egna tillägg. Filer inom bx_-systemmappar kan överskrivas vid CMS-uppdateringar. Märk dina egna filer där med _own.
3. Integrera egen JavaScript-fil i layouten
Gå tillbaka till Layout - HTML. Lägg till din egen JavaScript-fil utöver den befintliga CMS-filen. Om ditt skript ska laddas tidigt, lägger du till det som i skärmdumpen i head-området efter det existerande Head-Script.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
Den extra raden laddar din egen JavaScript-kod. Den ursprungliga BxHeadScript.js förblir oförändrad. Filvägen och skrivsättet för din egen fil måste matcha den i filhanteraren.
4. Skapa egen CSS-fil i filhanteraren
Öppna Filhanteraren igen och gå till systemmappen bx_style. Här finns bland annat det centrala stylesheetet BxStyle.css. För egna anpassningar använder vi en separat fil som heter BxStyle_own.css.
Skapa filen BxStyle_own.css eller öppna den befintliga egna filen. Systemfilen BxStyle.css förblir intakt.
Via Redigera kan du i denna fil ange egna CSS-regler och spara.
5. Integrera egen CSS-fil i layouten
Öppna återigen Layout - HTML. I head-området lägger du till din egen CSS-fil efter det befintliga stylesheetet. Ordningen är viktig om egna regler ska åsidosätta 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-filen förblir oförändrad, medan du hanterar ytterligare eller avvikande formateringar separat i BxStyle_own.css.
6. Använd JavaScript i huvudet eller i slutet av sidan
JavaScript-filer kan beroende på deras uppgift inkluderas i head-området eller i slutet av sidan före den stängande body-taggen. Den visade BxHeadScript_own.js laddas i Head. För andra skript kan du även använda en egen projektmapp och inkludera filen senare i layouten.
Exempel på en extra fil från en egen mapp i sidans slut:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Detta exempel visar en extra fil. Om du istället vill ersätta en systemfil med en egen version måste du medvetet anpassa de relevanta inkluderingarna i den valda layouten och kontrollera att inga nödvändiga CMS-funktioner försvinner.
7. Åtskilj systemmappar och egna projektmappar
De rödmarkerade bx_-mapparna tillhör bluetronix CMS. Egna filer inom dessa mappar måste märkas med _own så att de inte behandlas som systemfiler vid vanliga CMS-uppdateringar.
Du kan alternativt placera egna JavaScript- och CSS-filer i själv skapade projektmappar utan bx_-prefix, till exempel /script/ eller /my_scripts/. Där är märkningen _own inte nödvändig. Den faktiska sökvägen måste du sedan använda i din layoutdefinition.
Märkningen _own ersätter inte inkluderingen i layouten: En separat skapad fil laddas först när den inkluderas via den passande script- eller link-raden.
8. Automatisk filversionering
Vid de visade layoutintegreringarna använder bluetronix CMS märkningen __FV_…__. Via detta kan CMS lägga till en versionsparameter baserat på ändringsdatumet. Efter en ändring laddar webbläsaren därigenom den aktuella JavaScript- eller CSS-filen, i stället för att fortsätta använda en äldre cache-version.
Exempel: En ursprunglig sökväg som /script/MyScript.js kan efter bearbetning kompletteras med en versionsparameter. Du behöver inte själv uppdatera versionsnumret i varje layout för de filer som är integrerade.
9. Spara och kontrollera ändringar
Spara först dina egna JavaScript- och CSS-filer och därefter det redigerade layoutet. Ladda om din webbplats och kontrollera om dina JavaScript-funktioner körs och dina egna CSS-regler tillämpas.
Om en fil inte laddas, kontrollera först filnamnet, versaler och gemener, mappsökvägen och integrationen i layoutet. Om flera layouter används, kontrollera också om du har redigerat det layout som är kopplat till den aktuella sidan.
Sammanfattning
För egna utökningar skapar du till exempel BxHeadScript_own.js i mappen bx_script och BxStyle_own.css i mappen bx_style. Därefter integrerar du båda filerna i Layout - HTML utöver de ursprungliga CMS-filerna. På så sätt förblir standardfilerna oförändrade medan du hanterar projektspecifik JavaScript- och CSS-kod separat.
FAQ
vad kunder ofta frågar oss
Behöver jag en utvecklaråtkomst för att integrera egna JavaScript- och CSS-filer?
Ja. Den här guiden riktar sig till utvecklare som har åtkomst till layoutdefinitionen och utvecklarmapparna i bluetronix CMS.
Var hittar jag integrationerna för JavaScript och CSS?
Öppna Layout och välj Layout - HTML. Där kan du lägga till integrationerna i den önskade layouten.
Var sparar jag en egen JavaScript-fil?
I det visade exemplet skapar du BxHeadScript_own.js i mappen bx_script och integrerar den utöver den befintliga BxHeadScript.js i layoutet.
Var sparar jag en egen CSS-fil?
I det visade exemplet ligger din egen fil BxStyle_own.css i mappen bx_style. I layoutet integreras den efter det befintliga stylesheets.
Varför bör egna filer innehålla _own i namn i systemmappar?
Röda markerade bx_-systemmappar kan skrivs över vid uppdateringar. Med _own markerar du dina egna projektspecifika filer.
Laddas en _own-fil automatiskt så snart den har skapats?
Nej. Du måste komplettera den egna JavaScript- eller CSS-filen i den önskade layouten med en lämplig script- eller link-integration.
Kan jag använda en egen mapp istället för en bx_-systemmapp?
Ja. I en självskapad projektmapp utan bx_-prefix är _own inte obligatorisk. Använd den faktiska sökvägen till filen i layoutet.
Bör jag ladda min egen CSS-fil före eller efter standardfilen?
I det visade exemplet integreras BxStyle_own.css efter BxStyle.css. Detta gör att egna regler med samma specifikhet kan överskrida de tidigare laddade standardreglerna.
Vad används märkningen __FV_…__ i filvägar till?
Det gör att bluetronix CMS kan lägga till en filversionsparameter så att webbläsare laddar den aktuella filen efter en ändring.
Vad kontrollerar jag om min egen fil inte fungerar?
Kontrollera filens namn, versaler och gemener, angiven sökväg samt integration och val av rätt layout.