‫Istruttore: In questa lezione
‫imparerai le basi per lavorare con i modelli di Pug.
‫Quindi apriamo il nostro modello di base qui e iniziamo.
‫Quindi, in sostanza, Pug è una semplice sintassi sensibile agli spazi bianchi
‫per scrivere html, quindi questo è davvero il succo di ciò che è.
‫Ora ciò significa che tutto ciò che
‫usiamo per scrivere elementi html è il loro nome e il rientro
‫nel nostro codice.
‫Quindi iniziamo impostando
‫una struttura html molto semplice qui, quindi
‫dacci un po' di spazio.
‫E così html di solito inizia sempre con il
‫doctype e un html.
‫Quindi, per poter lavorare correttamente con Pug, dovresti ovviamente
‫avere una certa conoscenza dell'html; altrimenti,
‫questo potrebbe non avere molto senso per te.
‫Tuttavia, se non conosci l'html,
‫non preoccuparti, puoi semplicemente seguire quello che sto facendo qui e
‫magari leggere un
‫articolo su come iniziare con l'html
‫perché è davvero, davvero semplice.
‫Comunque, iniziamo sempre con doctype
‫e poi il primo elemento, quindi l'elemento dominante in
‫tutti i nostri documenti html è sempre l'html, quindi al
‫suo interno di solito c'è un elemento head.
‫E così in Pug
‫per dire che un elemento è dentro l'altro, tutto
‫ciò che facciamo è usare un tag.
‫Quindi usiamo il rientro, come ho detto all'inizio,
‫e basta.
‫Quindi questo è il nostro elemento head, quindi all'interno di quella
‫testa creiamo il titolo della pagina web.
‫E così, ancora un altro tag.
‫Quindi
‫titolo, e diciamo Natours.
‫Ok, di nuovo solo il rientro, poi il
‫nome dell'elemento html e poi
‫il contenuto stesso.
‫Nessun tag di apertura, nessun tag di
‫chiusura e niente del disordine che di solito abbiamo in html.
‫Quindi in realtà mi piace molto questa sintassi qui
‫per scrivere documenti html, quindi
‫la trovo davvero sorprendente, davvero semplice da usare e
‫anche da leggere.
‫Comunque, questo è il contenuto che vogliamo nella testa,
‫e ora vogliamo anche creare un corpo.
‫Ora quel corpo ovviamente non è all'interno della
‫testa, invece è allo stesso livello
‫della testa, quindi fondamentalmente anche un figlio diretto di html.
‫Quindi tutto ciò che dobbiamo fare è tornare indietro di un livello di
‫indentazione e quindi creare l'elemento lì.
‫Quindi lì dentro vogliamo il nostro h1, e quindi
‫ora abbiamo bisogno di usare un po' più di indentazione.
‫Quindi ovviamente non qui, non qui, ma qui, quindi
‫all'interno del corpo.
‫Aggiungiamo anche un paragrafo,
‫quindi per questo usiamo l'elemento p dicendo qualcosa
‫del tipo, questo è solo del testo.
‫Quindi proviamolo ora nel nostro browser, quindi
‫ricarica ed eccoci qui.
‫Va bene, quindi qui puoi vedere l'intera
‫struttura che abbiamo appena creato con il doctype, l'elemento html
‫e poi ovviamente head e body lì dentro.
‫E vedi anche quel titolo che appare effettivamente qui.
‫Bene, ora includiamo anche un file CSS e
‫anche la favicon da visualizzare
‫qui invece di questa pagina generica lì.
‫E quindi se conosci un
‫po' di html, sai che quel genere di cose appartiene qui alla testa.
‫Quindi, come includeresti effettivamente un foglio di stile CSS
‫con il normale HTML?
‫Faresti qualcosa del genere.
‫Quindi creeresti un elemento di collegamento, quindi definiresti
‫che è un foglio di stile e
‫quindi anche il
‫riferimento, quindi proprio come questo.
‫Quindi stile CSS. css, e quindi
‫quello che abbiamo qui, quindi questo e questo sono attributi.
‫E così con Pug, scriviamo attributi come questo.
‫Quindi, invece di avere
‫questo elemento, scriviamo semplicemente link, e poi scriviamo questi attributi
‫effettivamente tra parentesi, così in questo modo.
‫Quindi senza spazio e parentesi aperte, e
‫poi c'è dove scriviamo
‫questi attributi proprio come questo.
‫E dovremmo sempre scriverli con virgolette singole e non
‫doppie, e quindi
‫non abbiamo più bisogno di questo qui.
‫Ora solo una cosa che volevo
‫dirti è che possiamo effettivamente usare anche il normale HTML in Pug.
‫Quindi, se lo volessi, potresti lasciare questa
‫riga di codice qui e Pug lo capirebbe perfettamente.
‫Ma ovviamente qui volevo mostrarti
‫come possiamo definire gli attributi con Pug.
‫E quindi ora facciamo lo stesso per la favicon, e
‫quindi di nuovo abbiamo bisogno di un elemento di
‫collegamento, e lì definiremo alcuni attributi.
‫Quindi abbiamo definito che questa è un'icona di
‫collegamento, ne specifichiamo anche il tipo, quindi image, e in
‫questo caso è un
‫PNG, e poi di nuovo il riferimento ad
‫esso, ed è una favicon di immagini. png.
‫E quindi ora andiamo avanti e testiamolo,
‫e così vedete che in realtà sembra un po' diverso.
‫Quindi abbiamo la nostra favicon
‫e anche il nostro testo è ora ben impilato.
‫E infatti ora vedi alcune proprietà CSS che spuntano qui sul
‫lato sinistro.
‫E questo è ovviamente perché ho scritto un
‫sacco di CSS in
‫realtà per questa applicazione, quindi è tutto in pubblico, CSS e stile.
‫Quindi vedi che ho
‫tipo, non so, come mille righe o più anche di
‫CSS che ho scritto solo perché
‫questa applicazione fosse bella come è.
‫Quindi, in altre parole, perché questo stile. css viene
‫effettivamente caricato automaticamente dalla cartella CSS e
‫anche la favicon viene caricata automaticamente
‫dalla cartella delle immagini.
‫Bene, prima di tutto, tieni presente che ognuna
‫di queste risorse attiva effettivamente la propria
‫richiesta http, quindi confermiamolo qui nei sorgenti o effettivamente
‫nel pannello di rete.
‫E quindi qui vedete queste tre richieste,
‫quindi una per la pagina stessa, l'altra per il nostro stile e
‫per la nostra favicon.
‫E così di nuovo, perché funziona
‫così perché ovviamente non abbiamo un gestore di
‫route per nessuno di questi file qui.
‫Ma è ancora un percorso se ci pensi,
‫perché è una richiesta di get a questo URL
‫e anche a questo URL.
‫Quindi fammi ricordare perché funziona davvero, ed è
‫a causa di questo middleware che
‫abbiamo definito da qualche parte qui, quindi questo qui.
‫Quindi ricordalo usando express. static, in pratica
‫definiamo che tutte le risorse statiche
‫verranno sempre automaticamente servite
‫da una cartella chiamata public, quindi con questa cartella qui.
‫Ed ecco perché quando diciamo stile css slash, che
‫in effetti proviene dalla cartella pubblica.
‫E quindi questa cartella CSS è la cartella all'interno di public, e lo
‫stesso ovviamente per le immagini.
‫Quindi, se nel nostro html abbiamo la favicon di immagine slash,
‫si aprirà la cartella delle immagini
‫che si trova all'interno della nostra cartella pubblica.
‫Di nuovo perché lo abbiamo definito così nella nostra applicazione espressa.
‫Quindi hai già imparato a creare elementi in
‫Pug usando il rientro e
‫hai anche imparato a usare gli attributi.
‫Ma un'altra cosa
‫davvero interessante è usare effettivamente le variabili qui.
‫Quindi lascia che ora ti mostri come possiamo effettivamente passare
‫i dati in un modello e poi come possiamo usare quei dati proprio
‫qui in Pug.
‫Quindi ricorda che abbiamo questo percorso qui,
‫che usiamo per rendere il nostro modello di base.
‫E ovviamente se
‫è più tardi, avremo effettivamente un
‫file separato, dove vivranno tutte queste rotte.
‫Ma per ora tutto quello che voglio fare è far funzionare davvero tutto questo.
‫Ad ogni modo, per passare ora i dati in questo modello
‫qui, tutto ciò che dobbiamo fare è definire
‫un oggetto qui e poi inseriremo semplicemente alcuni dati lì.
‫E quei dati saranno quindi disponibili nel modello Pug.
‫Quindi creiamo semplicemente un oggetto qui
‫con una proprietà tour e impostiamolo su The Forest Tiger, e
‫poi...
‫creiamo anche una proprietà utente e
‫la impostiamo su Jonas.
‫E queste variabili che abbiamo passato
‫qui, vengono quindi chiamate locals nel file Pug.
‫Quindi ora andiamo avanti e utilizziamo quei dati.
‫E quello che voglio fare
‫ora è mettere quella variabile tour sul nostro h1.
‫Quindi, in pratica, voglio creare un elemento h1, dove
‫il contenuto è il nome del tour.
‫E il modo più
‫semplice per farlo è usare semplicemente la sintassi
‫uguale come questa, quindi h1 è uguale, poi uno spazio, e poi tour.
‫E questo è tutto, è davvero tutto ciò che dobbiamo fare.
‫Quindi prendiamo questo qui fuori,
‫e quindi in realtà un'altra cosa
‫che volevo mostrarti è che in Pug, possiamo creare
‫commenti e possiamo creare due tipi di commenti.
‫Quindi il più semplice è semplicemente come in JavaScript, quindi
‫proprio come questo.
‫E questo creerà quindi
‫un commento che sarà visibile nell'html.
‫Quindi diamo ora un'occhiata a
‫questo, e
‫quindi teniamo presente che ora l'h1 non sarà più The Park
‫Camper, ma dovrebbe essere The Forest Hiker perché quella
‫è la variabile del tour,
‫o in altre parole il tour local,
‫che ora è passato in questo modello.
‫E quindi qui, l'ho
‫poi inserito in h1 usando la sintassi uguale.
‫Quindi diamo un'occhiata, dai un'occhiata
‫a questo.
‫E infatti ora è The Forest Hiker.
‫Ed ecco anche quel commento di
‫cui abbiamo appena parlato.
‫Quindi, come ho detto, quella doppia barra
‫che abbiamo fatto lì crea fondamentalmente un commento html.
‫Quindi questa sintassi qui è come scriviamo commenti in html, ma
‫se vuoi davvero che questo sia un commento per il file Pug ma
‫non venga realmente emesso in html, devi
‫aggiungere un trattino come questo.
‫Quindi, se ora ricarichiamo questo, quel commento dovrebbe essere sparito.
‫Quindi questo tipo di codice qui, che abbiamo scritto
‫qui, è chiamato codice bufferizzato.
‫E in realtà potremmo anche scrivere del
‫JavaScript qui, quindi diciamo che h2 è uguale all'utente,
‫e quindi possiamo anche chiamare maiuscolo su quello.
‫Quindi JavaScript semplice qui perché
‫di nuovo qui in questo codice bufferizzato, che
‫è come viene
‫chiamato, possiamo eseguire JavaScript semplice proprio come abbiamo fatto qui.
‫Quindi eccoci qui, Jonas in maiuscolo.
‫Quindi codice bufferizzato, e se abbiamo codice bufferizzato,
‫allora dobbiamo anche avere codice non bufferizzato.
‫E quindi fondamentalmente, il codice non bufferizzato è
‫codice che non aggiungerà nulla all'output.
‫E lo scriviamo scrivendo dash e poi facciamo
‫semplicemente un po' di JavaScript
‫qui, ad esempio semplicemente definendo una variabile.
‫Quindi diciamo che const x è uguale a nove, e
‫poi ripetiamo del codice nel buffer.
‫Quindi di nuovo il codice che aggiungerà qualcosa all'output.
‫E così di nuovo possiamo usare JavaScript qui,
‫quindi facciamo solo due volte x.
‫E quindi qui, avremo accesso a quella variabile x.
‫Quindi dovrebbe essere 18 e in effetti lo è.
‫Quindi questi sono tutti i piccoli pezzi di
‫codice diverso che possiamo usare in Pug.
‫Ora in realtà c'è anche un terzo modo di scrivere codice, e
‫permettetemi di mostrarlo qui.
‫Quindi si chiama interpolazione, e
‫in realtà assomiglia
‫un po' alle stringhe del modello ES6.
‫Quindi, invece di avere solo Natours
‫qui, aggiungiamo anche il nome
‫del tour, così possiamo farlo in questo modo.
‫Quindi con la stringa del modello in ES6, funziona così, ma
‫qui in Pug è con questo hash,
‫quindi proprio così.
‫E qui dobbiamo farlo in
‫questo modo fondamentalmente perché questo è codice, quindi è variabile, ma
‫questo non è codice, è semplicemente testo.
‫E quindi non possiamo farlo perché tutto ciò che è qui
‫viene quindi trattato come JavaScript,
‫e quindi poiché questo non è JavaScript non funzionerebbe.
‫E quindi questa qui è solo
‫una stringa, quindi se vogliamo aggiungere qualcosa a quella
‫stringa, allora dobbiamo usare questa sintassi di interpolazione.
‫Ok, ha senso?
‫Aggiungiamo semplicemente come questa barra qui, che
‫è anche semplicemente parte della stringa.
‫E così ora ci aspettiamo che
‫Natours riduca The Forest
‫Hiker, quindi è esattamente quello che hanno ottenuto.
‫Fantastico, quindi questi sono i fondamenti
‫del lavoro con Pug.
‫Ma ovviamente c'è molto altro da imparare
‫e quindi continuiamo a
‫farlo nelle prossime due lezioni.