Un archivio · File normali · Qualsiasi hosting statico
Cosa Contiene Davvero lo .zip Esportato
Premere scarica consegna un archivio, e questa pagina lo apre. Non il riassunto in tre paragrafi che la guida su chi non si registra dà già: la disposizione delle cartelle, quali foglio di stile compaiono e a quale condizione, quale JavaScript viene incluso esattamente e quando non ne viene incluso nessuno, e il limite onesto che decide se il risultato funziona nel momento in cui lo si scompatta altrove.
La struttura di cartelle che scrive l'esportatore
Scompattando l'archivio appare un sito statico normale, non un pacchetto che richiede un passaggio di compilazione per diventarlo. Ogni pagina costruita riceve una propria cartella con un index.html dentro, e se il sito porta più di una lingua di contenuto, quella stessa pagina si ripete una volta per lingua, ciascuna nella propria cartella: un sito di due pagine e due lingue produce quattro file HTML, non due con un selettore di lingua incorporato nel markup.
Accanto a ogni pagina c'è un foglio di stile proprio di quella pagina: assets/css/page-<slug>.css. Quel file per pagina non è tutta la storia visiva, perché sotto ci sono alcuni strati condivisi caricati una sola volta per l'intero sito, non una volta per pagina, argomento della sezione successiva.
Quattro strati CSS, e quali sono condizionali
Due foglio di stile vengono scritti sempre, indipendentemente da quanto piccolo sia il sito: assets/css/tokens.css, da cui il resto del CSS legge i valori di design, e assets/css/base.css, il reset e le regole base condivise. Nessuno dei due dipende da ciò che il sito usa o non usa.
Altri due sono condizionali, e vale la pena conoscere la condizione perché la loro assenza non è un errore. assets/css/themes.css viene scritto solo se il sito usa davvero dei temi; un sito con un unico design senza tema lo salta del tutto. assets/css/components.css viene scritto solo se almeno un componente inserito dichiara un proprio CSS statico oltre a quanto già coprono gli strati di token e base; molte pagine semplici non lo attivano mai. Insieme al foglio per pagina della sezione precedente, la catena completa di stile di una pagina può contare appena tre file oppure arrivare a cinque, e la differenza dipende interamente da cosa usa quella pagina specifica, non da un'impostazione da attivare a mano.
Il JavaScript, file per file, incluso il caso di zero file
Il JavaScript segue la stessa logica del CSS condizionale, e vale la pena essere precisi perché "solo ciò che si usa" è facile da dire e raramente dimostrato. Quando un sito usa almeno un comportamento a runtime, l'archivio riceve assets/js/enhance.js come caricatore, più esattamente un file assets/js/<moduleId>.js per ogni comportamento che il sito assegna davvero: una pagina che usa un accordion e un lightbox porta quei due moduli e il caricatore, niente di più, niente di generico incluso per precauzione.
Un componente che richiede una piccola porzione di logica condivisa a runtime — Builder42 la chiama il suo micro-runtime — aggiunge un file in più, assets/js/ui.js, e solo quando un componente inserito ne ha davvero bisogno. Vale la pena dichiarare con chiarezza il caso che è difficile credere finché non si vede: un sito che non inserisce alcun comportamento e nessun componente che richieda il micro-runtime produce zero file sotto assets/js/ — nessun caricatore vuoto, nessuno script segnaposto, niente. Non viene generata nemmeno una cartella vuota; la directory stessa non esiste se nulla la popola.
Dove vanno le immagini
Ogni immagine referenziata in qualunque punto del sito — non solo quelle della pagina attualmente aperta — viaggia sotto assets/img/<fileName>, un file per ogni risorsa referenziata, con lo stesso nome collegato dall'HTML. Non esiste un elenco separato da riconciliare: aprendo assets/img/, ciò che si trova lì è esattamente ciò a cui puntano le pagine.
Due dettagli di quella cartella vale la pena conoscerli. La stessa immagine usata su più pagine, o in più lingue di contenuto, viene scritta una sola volta e collegata da tutte, quindi un sito in due lingue non porta due copie della stessa fotografia. E i byte sono quelli che hai messo: il minificatore che passa sul markup e sui fogli di stile non tocca i binari, quindi niente viene ricodificato, ricompresso o ridimensionato in uscita.
Cosa l'archivio non è
Qui sono tentanti due affermazioni, ed entrambe sarebbero false per questa esportazione. La prima è la dimensione: nessuno ha misurato il peso in byte di un archivio scaricato su questo sito, quindi non viene fornita nessuna cifra — né in kilobyte, né in megabyte, né come "istantaneo". Il numero che invece esiste ed è sicuro indicare è l'impostazione di compressione, DEFLATE al livello 9, che è un dato di configurazione, non una promessa di prestazioni.
La seconda è la portabilità. I font usati dal design sono collegati da Google Fonts tramite un link dentro il CSS esportato invece di essere inclusi come file di font dentro l'archivio, quindi le pagine hanno bisogno di una connessione attiva per mostrarsi con il carattere previsto ovunque vengano ospitate; senza di essa, il browser ricorre a un font di sistema e il layout continua a funzionare, solo non con il carattere scelto. Includere i file dei font reali è una strada che passa da un server, esattamente ciò che questa demo statica non ha, quindi definire il risultato «autonomo» o «pronto per l'uso offline» esagererebbe ciò che viene davvero consegnato.
Cosa succede dopo il download
Una volta scompattato, il contenuto è HTML, CSS e JavaScript comuni, senza alcun framework e senza alcuno strumento di compilazione necessario per servirli, motivo per cui nulla in questa pagina può concludere il lavoro per conto proprio. Qualsiasi hosting che serva file statici accetterà la cartella così com'è: un server proprio, un fornitore di hosting statico, un bucket configurato per l'accesso web, tutti leggono lo stesso insieme di file nello stesso modo. Questo download è il punto in cui il lavoro finito lascia il browser e il passaggio di deploy successivo resta a carico di chi lo scarica.
Esportane uno di questi e leggi i file tu stesso
Esporta il modello dell'hotel o quello dello studio legale e l'archivio è piccolo abbastanza da leggerlo per intero in un editor di testo: poche pagine, uno o due comportamenti, e una catena di stile corta da seguire dai token fino alla pagina.
Le domande che arrivano prima
Quanti file HTML esporta un sito di due pagine e due lingue?
Quattro. L'esportatore scrive un index.html per pagina e per lingua configurata, ciascuno nella propria cartella, quindi le pagine e le lingue moltiplicano il numero di file invece di condividerne uno con un selettore incorporato.
Il CSS esportato include sempre un themes.css e un components.css?
No. tokens.css e base.css vengono scritti sempre, ma themes.css compare solo se il sito usa temi, e components.css compare solo se un componente inserito dichiara CSS statico oltre a quei due strati condivisi. Una pagina semplice con un unico tema può saltare entrambi.
Cosa succede se esporto un sito che non usa alcun comportamento interattivo?
La cartella assets/js/ non viene creata affatto: nessun caricatore, nessun file vuoto, niente. L'archivio contiene solo i moduli JavaScript che un sito assegna davvero, un file per comportamento, più il caricatore che li collega quando ne esiste almeno uno.
Lo .zip scaricato è una copia completa del sito da usare senza connessione?
Non del tutto. Tutti i file HTML, CSS, JavaScript e immagine sono dentro l'archivio, ma i font sono collegati da Google Fonts invece di essere inclusi, quindi mostrarsi con il carattere previsto richiede ancora una connessione ovunque finisca il sito.
Se due pagine usano la stessa immagine, viene scaricata due volte?
No. Ogni file referenziato viene scritto una sola volta sotto assets/img/ e collegato da tutte le pagine — e da tutte le lingue di contenuto — che lo puntano, quindi l'archivio non si gonfia con una seconda copia della stessa fotografia.
L'archivio indica quanto pesa una volta scaricato?
No, e nemmeno questa pagina lo fa: il peso di un archivio scaricato non è stato misurato su questo sito, quindi non viene fornita nessuna cifra. L'unico numero documentato è l'impostazione di compressione: DEFLATE al livello 9.