Includere file JavaScript e CSS propri nel CMS bluetronix
In questo tutorial includerai un file JavaScript proprio e un foglio di stile nel layout del tuo sito web. Imparerai a conoscere la regola _own e scoprirai come la versioning dei file aiuta in caso di modifiche.
Requisiti e obiettivo
Per questo tutorial hai bisogno di un accesso sviluppatore al CMS bluetronix e dovresti conoscere la struttura dei layout e delle cartelle per sviluppatori. Imparerai a includere file JavaScript e CSS propri oltre ai file CMS esistenti, senza modificare i file di sistema originali.
Utilizziamo i file mostrati negli screenshot BxHeadScript_own.js e BxStyle_own.css. Entrambi i file sono esplicitamente inclusi nel layout affinché il CMS li consideri durante il caricamento della pagina.
1. Aprire il layout
Apri nel CMS la sezione Layout e seleziona Layout - HTML. Apri poi il layout nel quale desideri includere i tuoi file JavaScript e CSS. In questo esempio utilizziamo il layout standard.
Nella definizione del layout troverai già inclusioni per i file CMS principali, ad esempio BxHeadScript.js e BxStyle.css. Puoi inserire i tuoi file aggiuntivi direttamente accanto.
2. Creare un file JavaScript proprio nel file manager
Apri il File Manager e vai alla cartella di sistema contrassegnata in rosso bx_script. Qui trovi i file JavaScript principali del CMS bluetronix e, se necessario, le varianti a seconda della lingua.
Crea il tuo file BxHeadScript_own.js o selezionalo se è già presente. Puoi copiare un file esistente idoneo come modello.
Scegli Modifica per aprire il codice JavaScript del tuo file nel text editor.
Nell'esempio mostrato, il file contiene codice JavaScript per selezionare tra Modalità Scura e Modalità Chiara. Nel text editor puoi gestire il tuo codice JavaScript specifico del progetto e poi salvarlo.
Non modificare il file originale BxHeadScript.js per le tue estensioni. I file all'interno delle cartelle di sistema bx_ possono essere sovrascritte durante gli aggiornamenti del CMS. Contrassegna i tuoi file lì con _own.
3. Includere un file JavaScript proprio nel layout
Torna su Layout - HTML. Aggiungi il tuo file JavaScript oltre al file CMS esistente. Se desideri che il tuo script venga caricato per primo, lo inserisci come mostrato nello screenshot nella sezione head dopo lo script head esistente.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
La riga aggiuntiva carica il tuo codice JavaScript. L'originale BxHeadScript.js rimane invariato. Il percorso del file e la scrittura del tuo file devono corrispondere a quelli nel file manager.
4. Creare un file CSS proprio nel file manager
Apri nel File Manager la cartella di sistema bx_style. Qui si trova, tra l'altro, il foglio di stile centrale BxStyle.css. Per le personalizzazioni usiamo un file separato chiamato BxStyle_own.css.
Crea il file BxStyle_own.css o apri il file esistente. Il file di sistema BxStyle.css rimane intatto.
Attraverso Modifica puoi inserire e salvare le tue regole CSS in questo file.
5. Includere un file CSS proprio nel layout
Apri di nuovo Layout - HTML. Nella sezione head aggiungi il tuo file CSS dopo il foglio di stile esistente. L'ordine è importante se desideri che le tue regole sovrascrivano la formattazione standard.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
Il file CSS standard rimane, mentre gestisci separatamente le formattazioni aggiuntive o diverse in BxStyle_own.css.
6. Usare JavaScript nell'intestazione o alla fine della pagina
I file JavaScript possono essere inclusi nella sezione head o alla fine della pagina prima del tag di chiusura body, a seconda della loro funzione. Il file mostrato BxHeadScript_own.js viene caricato nell'Head. Per altri script puoi utilizzare anche una tua cartella di progetto e includere il file più avanti nel layout.
Esempio di un file aggiuntivo da una propria cartella alla fine della pagina:
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Questo esempio mostra un file aggiuntivo. Se desideri invece sostituire un file di sistema con una tua versione, devi modificare consapevolmente le relative inclusioni nel layout scelto e verificare che non vengano eliminate funzioni CMS necessarie.
7. Distinguere tra la cartella di sistema e le proprie cartelle di progetto
Le cartelle bx_ contrassegnate in rosso appartengono al CMS bluetronix. I file propri all'interno di queste cartelle devono essere contrassegnati con _own affinché non vengano trattati come i file di sistema durante gli aggiornamenti regolari del CMS.
Puoi anche memorizzare file JavaScript e CSS propri in cartelle di progetto create da te senza il prefisso bx_, ad esempio /script/ o /my_scripts/. Qui la contrassegnatura _own non è obbligatoria. Dovrai quindi utilizzare il percorso effettivo nella tua definizione di layout.
La contrassegnatura _own non sostituisce l'inclusione nel layout: un file creato separatamente viene caricato solo quando è incluso tramite la riga script o link appropriata.
8. Versioning automatico dei file
Nelle integrazioni di layout mostrate, il CMS bluetronix utilizza il contrassegno __FV_…__. In questo modo il CMS può aggiungere un parametro di versione in base alla data di modifica. Dopo una modifica, il browser carica il file JavaScript o CSS attuale, invece di continuare a utilizzare una vecchia versione della cache.
Esempio: Un percorso originale come /script/MyScript.js può essere integrato con un parametro di versione dopo il trattamento. Non è necessario aggiornare manualmente il numero di versione per i file inclusi di conseguenza in ogni layout.
9. Salvare e controllare le modifiche
Innanzitutto, salva i tuoi file JavaScript e CSS e quindi il layout modificato. Ricarica la tua pagina web e controlla se le tue funzioni JavaScript vengono eseguite e se le tue regole CSS vengono applicate.
Se un file non viene caricato, controlla prima il nome del file, le maiuscole e le minuscole, il percorso della cartella e l'inclusione nel layout. Se utilizzi più layout, verifica anche che hai modificato il layout assegnato alla pagina pertinente.
Riepilogo
Per eventuali estensioni personali, ad esempio, crea BxHeadScript_own.js nella cartella bx_script e BxStyle_own.css nella cartella bx_style. Poi, integra entrambi i file in Layout - HTML oltre ai file CMS originali. In questo modo, i file standard rimangono inalterati mentre gestisci separatamente il codice JavaScript e CSS specifico per il progetto.
FAQ
cosa ci chiedono spesso i clienti
Ho bisogno di un accesso sviluppatore per integrare i miei file JavaScript e CSS?
Sì. Questo tutorial è destinato agli sviluppatori che hanno accesso alla definizione del layout e alle cartelle degli sviluppatori del CMS bluetronix.
Dove posso trovare le integrazioni per JavaScript e CSS?
Apri Layout e seleziona Layout - HTML. Qui puoi aggiungere le integrazioni nel layout desiderato.
Dove posso salvare un mio file JavaScript?
Nell'esempio mostrato, crei BxHeadScript_own.js nella cartella bx_script e lo integri nel layout insieme al già esistente BxHeadScript.js.
Dove posso salvare un mio file CSS?
Nell'esempio mostrato, il file personale BxStyle_own.css si trova nella cartella bx_style. Nel layout viene integrato dopo il foglio di stile esistente.
Perché i file personali dovrebbero contenere _own nel nome nella cartella di sistema?
Le cartelle di sistema bx_ contrassegnate in rosso possono essere sovrascritte durante gli aggiornamenti. Con _own contrassegni i tuoi file specifici per il progetto.
Un file _own viene caricato automaticamente non appena viene creato?
No. Devi aggiungere il tuo file JavaScript o CSS nel layout desiderato con una corretta integrazione script o link.
Posso utilizzare una mia cartella invece di una cartella di sistema bx_?
Sì. In una cartella di progetto creata senza il prefisso bx_, _own non è strettamente necessario. Usa nel layout il percorso reale del file.
Dovrei caricare il mio file CSS prima o dopo il file standard?
Nell'esempio mostrato, BxStyle_own.css viene integrato dopo BxStyle.css. In questo modo, le regole personali con la stessa specificità possono sovrascrivere le regole standard caricate in precedenza.
A cosa serve il marchio __FV_…__ nei percorsi dei file?
Il CMS bluetronix può quindi aggiungere un parametro di versione del file, consentendo ai browser di caricare il file attuale dopo una modifica.
Cosa controllo se il mio file personale non funziona?
Controlla il nome del file, le maiuscole e le minuscole, il percorso specificato e l'inclusione e selezione del layout corretto.