‫Istruttore: In questa lezione, voglio mostrarti molto
‫velocemente una caratteristica che abbiamo in tutti
‫i linguaggi di programmazione.
‫Dobbiamo solo includere un file e, in questo
‫caso, un modello in un altro modello.
‫Quindi diciamo che volevamo mantenere il
‫nostro layout di base qui davvero
‫pulito senza alcun contenuto.
‫Quindi quello che faremo è mettere tutto il codice
‫per l'intestazione in un file di intestazione.
‫E poi includi quel file proprio qui.
‫E lo stesso anche per il footer.
‫E quindi, il nostro blocco di
‫contenuto, quindi fondamentalmente il
‫nostro corpo qui diventa questo elemento molto pulito solo con questi
‫include e poi questo contenuto qui per ora.
‫Va bene.
‫Quindi, di nuovo, creiamo un nuovo file qui per l'intestazione.
‫dot pug
‫E in realtà mi piace anteporre questi file che servono solo
‫per essere inclusi con un trattino basso.
‫E se hai familiarità con qualcosa
‫come Sass, allora sarà familiare anche a te.
‫Ok, ora aggiungiamo e incolliamo questo qui, e non questo
‫codice, quindi immagino
‫di aver dimenticato di copiarlo o di tagliarlo.
‫E poi incollalo qui.
‫E ora questo rientro è tutto sbagliato
‫qui, perché ora abbiamo tipo tre livelli, come
‫puoi vedere, quindi uno, due, tre
‫livelli in cui questo codice dovrebbe effettivamente essere qui.
‫Ok, quindi ora dobbiamo aggiungere e risolvere il problema, ma quello
‫che possiamo effettivamente fare invece di farlo manualmente è usare
‫una bella estensione che fa questo lavoro per noi.
‫Quindi qui nella mia scheda
‫dell'estensione, lascia che ti mostri l'estensione che intendo.
‫E questo si chiama Pug beautify.
‫Ok, allora vai avanti e installa questo pacchetto, va bene.
‫E una volta
‫fatto, puoi semplicemente selezionare tutto
‫il codice qui premendo command-A e quindi creare
‫un comando VS Code dicendo command-shift-P.
‫E poi qui dentro, scrivi carlino.
‫E così questo poi abbellirà il carlino.
‫E vedi che hai anche la scorciatoia
‫qui e non sono sicuro che questa sia quella
‫predefinita ma almeno nel mio caso posso usare la scorciatoia
‫anche per abbellire questo codice.
‫Ma comunque, scrivendo pug,
‫dovresti ottenere questa selezione qui ora.
‫E se poi premi invio, come
‫vedi, risolverà il rientro che era sbagliato in questo file.
‫Va bene?
‫Quindi salvalo, chiudilo e torniamo
‫qui in realtà.
‫E ora tutto ciò che dobbiamo fare è dire include _header.
‫E lo stesso per il piè
‫di pagina, quindi tagliamo qui, creiamo un nuovo modello...
‫_footer
‫incollalo selezionalo,
‫command-shift-P o probabilmente in Windows che
‫è control-shift-P e poi in
‫realtà l'ultimo che è stato
‫usato apparirà qui alla selezione.
‫Quindi, premi Invio ed ecco fatto.
‫Anche questo è stato risolto.
‫Includere...
‫piè di pagina.
‫E nota come non abbiamo nemmeno bisogno di specificare
‫di nuovo l'estensione dot pug.
‫Quindi salvalo e quando lo
‫ricarichiamo dovrebbe avere lo stesso identico aspetto.
‫Beh, non proprio, perché questi pulsanti qui si
‫sono spostati verso il basso,
‫quindi hanno lasciato questa barra di navigazione.
‫O in realtà, questa intestazione, quindi non è
‫corretto, forse c'era
‫qualche problema con questo rientro automatico qui nell'intestazione.
‫E sì, in realtà non è
‫corretto perché tutto questo dovrebbe essere all'interno dell'intestazione.
‫Quindi questo nav, questo div e questo nav dovrebbero
‫essere tutti sullo stesso livello.
‫E quindi ora è corretto.
‫Giusto per sicurezza, controlliamo anche il piè di pagina.
‫Ma qui, in realtà è corretto, quindi
‫non sono sicuro di cosa sia effettivamente andato storto in questa situazione.
‫Ma comunque, proviamoci di nuovo adesso.
‫E quindi eccoci qui.
‫Comunque questo è semplicemente includere alcuni file,
‫uno nell'altro.
‫Nel prossimo video, poi, faremo qualcosa
‫di un po' simile, ma allo stesso tempo molto più complesso e anche più utile.
‫Quindi, se sei curioso di sapere di cosa
‫si tratta, unisciti a me nel prossimo.