CSS e JavaScript
Serviti minificati
I visitatori ricevono CSS e JS minificati (con esbuild): spazi e commenti spariscono, le variabili locali ricevono nomi brevi – i file diventano più piccoli e più difficili da leggere. Nell’admin il tuo codice sorgente resta invariato. I nomi globali (ad es. funzioni chiamate da onclick="…") e i commenti di licenza (/*! … */, @license) vengono mantenuti. Se un file ha un errore di sintassi, viene servito invariato e l’errore viene annotato nel log del server. Lo stesso vale per l’esportazione statica.
La minificazione non protegge davvero il codice – ciò che gira nel browser si può sempre leggere, solo con più fatica.
La libreria
I file CSS e JS si trovano centralmente in CSS & JS. Lì vedi da quante pagine e snippet un file è usato e puoi modificarlo, rinominarlo o eliminarlo. Con una Cartella accanto al nome raggruppi l’elenco, ad es. per progetto. Le cartelle si possono comprimere.
Associare i file alle pagine
Nell’editor delle pagine, nelle schede CSS e JS:
- Nuovo file – crea un file e lo associa alla pagina.
- Aggiungi esistente – associa un file dalla libreria.
- eredita – il file viene caricato anche in tutte le sottopagine. Ideale: il foglio di stile principale una sola volta sulla home page, ereditato.
- Frecce – cambiano l’ordine (importante per CSS che si sovrascrivono).
- ✕ – rimuove l’associazione (il file resta nella libreria).
I file ereditati compaiono con l’indicazione ereditato da “…” e si possono anch’essi modificare direttamente. Se un file è usato su più pagine, l’editor lo segnala – ogni modifica vale ovunque.
I file si possono associare anche agli Snippets – in quel caso vengono caricati solo nelle pagine che includono effettivamente lo snippet, vedi CSS e JS negli snippet.
Ordine di caricamento
- File ereditati dagli antenati (dalla home page verso il basso),
- poi quelli propri della pagina nell’ordine impostato,
- poi quelli degli snippet usati (nell’ordine in cui gli snippet compaiono per la prima volta).
Il CSS finisce nell’<head>, il JavaScript alla fine del <body>. Le associazioni doppie vengono caricate una sola volta.
Caricare i file in un punto preciso
Se ti serve un file in una posizione esatta – ad esempio uno script che deve stare prima di uno script inline –, includilo nell’HTML:
<script src="{{ asset_url(7) }}"></script>
<link rel="stylesheet" href="{{ asset_url(3) }}">
asset_url restituisce un URL con versione; dopo ogni modifica il browser carica la nuova versione. L’ID lo vedi nella libreria, nella barra degli indirizzi (#/assets/7).
I file CSS e JS non sono template – {{ … }} al loro interno non viene valutato.