1 00:00:01,057 --> 00:00:02,830 ‫Istruttore: In questa lezione 2 00:00:02,830 --> 00:00:06,513 ‫imparerai le basi per lavorare con i modelli di Pug. 3 00:00:07,950 --> 00:00:12,950 ‫Quindi apriamo il nostro modello di base qui e iniziamo. 4 00:00:13,030 --> 00:00:17,720 ‫Quindi, in sostanza, Pug è una semplice sintassi sensibile agli spazi bianchi 5 00:00:17,720 --> 00:00:22,550 ‫per scrivere html, quindi questo è davvero il succo di ciò che è. 6 00:00:22,550 --> 00:00:24,900 ‫Ora ciò significa che tutto ciò che 7 00:00:24,900 --> 00:00:29,290 ‫usiamo per scrivere elementi html è il loro nome e il rientro 8 00:00:29,290 --> 00:00:30,630 ‫nel nostro codice. 9 00:00:30,630 --> 00:00:32,320 ‫Quindi iniziamo impostando 10 00:00:32,320 --> 00:00:35,093 ‫una struttura html molto semplice qui, quindi 11 00:00:36,420 --> 00:00:38,170 ‫dacci un po' di spazio. 12 00:00:38,170 --> 00:00:41,680 ‫E così html di solito inizia sempre con il 13 00:00:44,350 --> 00:00:45,990 ‫doctype e un html. 14 00:00:45,990 --> 00:00:49,300 ‫Quindi, per poter lavorare correttamente con Pug, dovresti ovviamente 15 00:00:49,300 --> 00:00:51,943 ‫avere una certa conoscenza dell'html; altrimenti, 16 00:00:53,100 --> 00:00:56,280 ‫questo potrebbe non avere molto senso per te. 17 00:00:56,280 --> 00:00:58,090 ‫Tuttavia, se non conosci l'html, 18 00:00:58,090 --> 00:01:01,750 ‫non preoccuparti, puoi semplicemente seguire quello che sto facendo qui e 19 00:01:01,750 --> 00:01:03,300 ‫magari leggere un 20 00:01:03,300 --> 00:01:05,250 ‫articolo su come iniziare con l'html 21 00:01:05,250 --> 00:01:07,053 ‫perché è davvero, davvero semplice. 22 00:01:08,250 --> 00:01:11,010 ‫Comunque, iniziamo sempre con doctype 23 00:01:11,010 --> 00:01:14,500 ‫e poi il primo elemento, quindi l'elemento dominante in 24 00:01:14,500 --> 00:01:18,720 ‫tutti i nostri documenti html è sempre l'html, quindi al 25 00:01:18,720 --> 00:01:21,960 ‫suo interno di solito c'è un elemento head. 26 00:01:21,960 --> 00:01:23,650 ‫E così in Pug 27 00:01:23,650 --> 00:01:26,360 ‫per dire che un elemento è dentro l'altro, tutto 28 00:01:26,360 --> 00:01:28,700 ‫ciò che facciamo è usare un tag. 29 00:01:28,700 --> 00:01:32,550 ‫Quindi usiamo il rientro, come ho detto all'inizio, 30 00:01:32,550 --> 00:01:33,720 ‫e basta. 31 00:01:33,720 --> 00:01:37,090 ‫Quindi questo è il nostro elemento head, quindi all'interno di quella 32 00:01:37,090 --> 00:01:39,770 ‫testa creiamo il titolo della pagina web. 33 00:01:39,770 --> 00:01:41,573 ‫E così, ancora un altro tag. 34 00:01:42,790 --> 00:01:43,773 ‫Quindi 35 00:01:45,490 --> 00:01:47,210 ‫titolo, e diciamo Natours. 36 00:01:47,210 --> 00:01:50,610 ‫Ok, di nuovo solo il rientro, poi il 37 00:01:50,610 --> 00:01:52,997 ‫nome dell'elemento html e poi 38 00:01:52,997 --> 00:01:54,890 ‫il contenuto stesso. 39 00:01:54,890 --> 00:01:57,450 ‫Nessun tag di apertura, nessun tag di 40 00:01:57,450 --> 00:02:01,130 ‫chiusura e niente del disordine che di solito abbiamo in html. 41 00:02:01,130 --> 00:02:04,040 ‫Quindi in realtà mi piace molto questa sintassi qui 42 00:02:04,040 --> 00:02:05,660 ‫per scrivere documenti html, quindi 43 00:02:05,660 --> 00:02:08,750 ‫la trovo davvero sorprendente, davvero semplice da usare e 44 00:02:08,750 --> 00:02:10,183 ‫anche da leggere. 45 00:02:11,320 --> 00:02:14,290 ‫Comunque, questo è il contenuto che vogliamo nella testa, 46 00:02:14,290 --> 00:02:16,660 ‫e ora vogliamo anche creare un corpo. 47 00:02:16,660 --> 00:02:19,660 ‫Ora quel corpo ovviamente non è all'interno della 48 00:02:19,660 --> 00:02:22,340 ‫testa, invece è allo stesso livello 49 00:02:22,340 --> 00:02:25,870 ‫della testa, quindi fondamentalmente anche un figlio diretto di html. 50 00:02:25,870 --> 00:02:29,190 ‫Quindi tutto ciò che dobbiamo fare è tornare indietro di un livello di 51 00:02:30,130 --> 00:02:31,830 ‫indentazione e quindi creare l'elemento lì. 52 00:02:32,900 --> 00:02:35,323 ‫Quindi lì dentro vogliamo il nostro h1, e quindi 53 00:02:36,490 --> 00:02:39,070 ‫ora abbiamo bisogno di usare un po' più di indentazione. 54 00:02:39,070 --> 00:02:43,290 ‫Quindi ovviamente non qui, non qui, ma qui, quindi 55 00:02:43,290 --> 00:02:44,913 ‫all'interno del corpo. 56 00:02:47,404 --> 00:02:49,270 ‫Aggiungiamo anche un paragrafo, 57 00:02:49,270 --> 00:02:52,410 ‫quindi per questo usiamo l'elemento p dicendo qualcosa 58 00:02:52,410 --> 00:02:55,203 ‫del tipo, questo è solo del testo. 59 00:02:56,228 --> 00:03:00,600 ‫Quindi proviamolo ora nel nostro browser, quindi 60 00:03:00,600 --> 00:03:03,223 ‫ricarica ed eccoci qui. 61 00:03:04,900 --> 00:03:08,200 ‫Va bene, quindi qui puoi vedere l'intera 62 00:03:08,200 --> 00:03:12,400 ‫struttura che abbiamo appena creato con il doctype, l'elemento html 63 00:03:12,400 --> 00:03:15,740 ‫e poi ovviamente head e body lì dentro. 64 00:03:15,740 --> 00:03:19,620 ‫E vedi anche quel titolo che appare effettivamente qui. 65 00:03:19,620 --> 00:03:24,140 ‫Bene, ora includiamo anche un file CSS e 66 00:03:24,140 --> 00:03:27,360 ‫anche la favicon da visualizzare 67 00:03:27,360 --> 00:03:31,280 ‫qui invece di questa pagina generica lì. 68 00:03:31,280 --> 00:03:33,230 ‫E quindi se conosci un 69 00:03:33,230 --> 00:03:37,320 ‫po' di html, sai che quel genere di cose appartiene qui alla testa. 70 00:03:37,320 --> 00:03:40,650 ‫Quindi, come includeresti effettivamente un foglio di stile CSS 71 00:03:40,650 --> 00:03:42,233 ‫con il normale HTML? 72 00:03:43,350 --> 00:03:45,310 ‫Faresti qualcosa del genere. 73 00:03:45,310 --> 00:03:48,100 ‫Quindi creeresti un elemento di collegamento, quindi definiresti 74 00:03:48,100 --> 00:03:50,763 ‫che è un foglio di stile e 75 00:03:54,220 --> 00:03:55,853 ‫quindi anche il 76 00:03:57,590 --> 00:03:59,453 ‫riferimento, quindi proprio come questo. 77 00:04:00,393 --> 00:04:03,483 ‫Quindi stile CSS. css, e quindi 78 00:04:05,230 --> 00:04:10,230 ‫quello che abbiamo qui, quindi questo e questo sono attributi. 79 00:04:11,900 --> 00:04:15,260 ‫E così con Pug, scriviamo attributi come questo. 80 00:04:15,260 --> 00:04:17,610 ‫Quindi, invece di avere 81 00:04:17,610 --> 00:04:21,950 ‫questo elemento, scriviamo semplicemente link, e poi scriviamo questi attributi 82 00:04:21,950 --> 00:04:25,140 ‫effettivamente tra parentesi, così in questo modo. 83 00:04:25,140 --> 00:04:28,030 ‫Quindi senza spazio e parentesi aperte, e 84 00:04:28,030 --> 00:04:29,890 ‫poi c'è dove scriviamo 85 00:04:31,290 --> 00:04:33,343 ‫questi attributi proprio come questo. 86 00:04:35,410 --> 00:04:38,270 ‫E dovremmo sempre scriverli con virgolette singole e non 87 00:04:38,270 --> 00:04:39,553 ‫doppie, e quindi 88 00:04:41,600 --> 00:04:44,210 ‫non abbiamo più bisogno di questo qui. 89 00:04:44,210 --> 00:04:47,140 ‫Ora solo una cosa che volevo 90 00:04:47,140 --> 00:04:51,970 ‫dirti è che possiamo effettivamente usare anche il normale HTML in Pug. 91 00:04:51,970 --> 00:04:54,880 ‫Quindi, se lo volessi, potresti lasciare questa 92 00:04:54,880 --> 00:04:57,920 ‫riga di codice qui e Pug lo capirebbe perfettamente. 93 00:04:57,920 --> 00:04:59,760 ‫Ma ovviamente qui volevo mostrarti 94 00:04:59,760 --> 00:05:02,223 ‫come possiamo definire gli attributi con Pug. 95 00:05:03,860 --> 00:05:07,080 ‫E quindi ora facciamo lo stesso per la favicon, e 96 00:05:07,080 --> 00:05:09,960 ‫quindi di nuovo abbiamo bisogno di un elemento di 97 00:05:09,960 --> 00:05:12,160 ‫collegamento, e lì definiremo alcuni attributi. 98 00:05:14,510 --> 00:05:17,323 ‫Quindi abbiamo definito che questa è un'icona di 99 00:05:20,180 --> 00:05:23,723 ‫collegamento, ne specifichiamo anche il tipo, quindi image, e in 100 00:05:24,830 --> 00:05:26,713 ‫questo caso è un 101 00:05:27,966 --> 00:05:30,530 ‫PNG, e poi di nuovo il riferimento ad 102 00:05:30,530 --> 00:05:35,530 ‫esso, ed è una favicon di immagini. png. 103 00:05:37,300 --> 00:05:40,103 ‫E quindi ora andiamo avanti e testiamolo, 104 00:05:40,980 --> 00:05:44,610 ‫e così vedete che in realtà sembra un po' diverso. 105 00:05:44,610 --> 00:05:46,460 ‫Quindi abbiamo la nostra favicon 106 00:05:46,460 --> 00:05:48,943 ‫e anche il nostro testo è ora ben impilato. 107 00:05:50,342 --> 00:05:54,120 ‫E infatti ora vedi alcune proprietà CSS che spuntano qui sul 108 00:05:54,120 --> 00:05:55,153 ‫lato sinistro. 109 00:05:56,490 --> 00:05:59,470 ‫E questo è ovviamente perché ho scritto un 110 00:05:59,470 --> 00:06:01,443 ‫sacco di CSS in 111 00:06:02,980 --> 00:06:07,870 ‫realtà per questa applicazione, quindi è tutto in pubblico, CSS e stile. 112 00:06:07,870 --> 00:06:09,733 ‫Quindi vedi che ho 113 00:06:10,690 --> 00:06:14,600 ‫tipo, non so, come mille righe o più anche di 114 00:06:14,600 --> 00:06:16,950 ‫CSS che ho scritto solo perché 115 00:06:16,950 --> 00:06:19,053 ‫questa applicazione fosse bella come è. 116 00:06:21,784 --> 00:06:25,420 ‫Quindi, in altre parole, perché questo stile. css viene 117 00:06:25,420 --> 00:06:28,820 ‫effettivamente caricato automaticamente dalla cartella CSS e 118 00:06:28,820 --> 00:06:32,110 ‫anche la favicon viene caricata automaticamente 119 00:06:32,110 --> 00:06:34,170 ‫dalla cartella delle immagini. 120 00:06:34,170 --> 00:06:38,040 ‫Bene, prima di tutto, tieni presente che ognuna 121 00:06:38,040 --> 00:06:41,433 ‫di queste risorse attiva effettivamente la propria 122 00:06:42,330 --> 00:06:46,690 ‫richiesta http, quindi confermiamolo qui nei sorgenti o effettivamente 123 00:06:46,690 --> 00:06:48,920 ‫nel pannello di rete. 124 00:06:48,920 --> 00:06:51,270 ‫E quindi qui vedete queste tre richieste, 125 00:06:51,270 --> 00:06:54,970 ‫quindi una per la pagina stessa, l'altra per il nostro stile e 126 00:06:54,970 --> 00:06:56,593 ‫per la nostra favicon. 127 00:06:59,280 --> 00:07:02,410 ‫E così di nuovo, perché funziona 128 00:07:02,410 --> 00:07:06,020 ‫così perché ovviamente non abbiamo un gestore di 129 00:07:06,020 --> 00:07:09,460 ‫route per nessuno di questi file qui. 130 00:07:09,460 --> 00:07:12,250 ‫Ma è ancora un percorso se ci pensi, 131 00:07:12,250 --> 00:07:15,140 ‫perché è una richiesta di get a questo URL 132 00:07:15,140 --> 00:07:17,210 ‫e anche a questo URL. 133 00:07:17,210 --> 00:07:20,930 ‫Quindi fammi ricordare perché funziona davvero, ed è 134 00:07:20,930 --> 00:07:24,590 ‫a causa di questo middleware che 135 00:07:24,590 --> 00:07:29,290 ‫abbiamo definito da qualche parte qui, quindi questo qui. 136 00:07:29,290 --> 00:07:33,100 ‫Quindi ricordalo usando express. static, in pratica 137 00:07:33,100 --> 00:07:36,190 ‫definiamo che tutte le risorse statiche 138 00:07:36,190 --> 00:07:38,170 ‫verranno sempre automaticamente servite 139 00:07:38,170 --> 00:07:43,170 ‫da una cartella chiamata public, quindi con questa cartella qui. 140 00:07:43,690 --> 00:07:47,470 ‫Ed ecco perché quando diciamo stile css slash, che 141 00:07:47,470 --> 00:07:50,050 ‫in effetti proviene dalla cartella pubblica. 142 00:07:50,050 --> 00:07:54,473 ‫E quindi questa cartella CSS è la cartella all'interno di public, e lo 143 00:07:55,612 --> 00:07:57,810 ‫stesso ovviamente per le immagini. 144 00:07:57,810 --> 00:08:01,550 ‫Quindi, se nel nostro html abbiamo la favicon di immagine slash, 145 00:08:01,550 --> 00:08:04,010 ‫si aprirà la cartella delle immagini 146 00:08:04,010 --> 00:08:06,720 ‫che si trova all'interno della nostra cartella pubblica. 147 00:08:06,720 --> 00:08:10,673 ‫Di nuovo perché lo abbiamo definito così nella nostra applicazione espressa. 148 00:08:12,360 --> 00:08:15,400 ‫Quindi hai già imparato a creare elementi in 149 00:08:15,400 --> 00:08:17,570 ‫Pug usando il rientro e 150 00:08:17,570 --> 00:08:20,470 ‫hai anche imparato a usare gli attributi. 151 00:08:20,470 --> 00:08:21,810 ‫Ma un'altra cosa 152 00:08:21,810 --> 00:08:24,380 ‫davvero interessante è usare effettivamente le variabili qui. 153 00:08:24,380 --> 00:08:27,350 ‫Quindi lascia che ora ti mostri come possiamo effettivamente passare 154 00:08:27,350 --> 00:08:31,040 ‫i dati in un modello e poi come possiamo usare quei dati proprio 155 00:08:31,040 --> 00:08:32,153 ‫qui in Pug. 156 00:08:35,300 --> 00:08:38,143 ‫Quindi ricorda che abbiamo questo percorso qui, 157 00:08:39,090 --> 00:08:42,580 ‫che usiamo per rendere il nostro modello di base. 158 00:08:42,580 --> 00:08:43,860 ‫E ovviamente se 159 00:08:43,860 --> 00:08:45,900 ‫è più tardi, avremo effettivamente un 160 00:08:45,900 --> 00:08:48,173 ‫file separato, dove vivranno tutte queste rotte. 161 00:08:49,050 --> 00:08:52,810 ‫Ma per ora tutto quello che voglio fare è far funzionare davvero tutto questo. 162 00:08:52,810 --> 00:08:57,030 ‫Ad ogni modo, per passare ora i dati in questo modello 163 00:08:57,030 --> 00:09:00,560 ‫qui, tutto ciò che dobbiamo fare è definire 164 00:09:00,560 --> 00:09:04,140 ‫un oggetto qui e poi inseriremo semplicemente alcuni dati lì. 165 00:09:04,140 --> 00:09:07,263 ‫E quei dati saranno quindi disponibili nel modello Pug. 166 00:09:08,390 --> 00:09:10,910 ‫Quindi creiamo semplicemente un oggetto qui 167 00:09:10,910 --> 00:09:15,853 ‫con una proprietà tour e impostiamolo su The Forest Tiger, e 168 00:09:18,795 --> 00:09:19,712 ‫poi... 169 00:09:20,950 --> 00:09:23,660 ‫creiamo anche una proprietà utente e 170 00:09:23,660 --> 00:09:25,993 ‫la impostiamo su Jonas. 171 00:09:28,180 --> 00:09:30,710 ‫E queste variabili che abbiamo passato 172 00:09:30,710 --> 00:09:33,543 ‫qui, vengono quindi chiamate locals nel file Pug. 173 00:09:34,840 --> 00:09:39,380 ‫Quindi ora andiamo avanti e utilizziamo quei dati. 174 00:09:39,380 --> 00:09:41,630 ‫E quello che voglio fare 175 00:09:41,630 --> 00:09:45,140 ‫ora è mettere quella variabile tour sul nostro h1. 176 00:09:45,140 --> 00:09:48,600 ‫Quindi, in pratica, voglio creare un elemento h1, dove 177 00:09:48,600 --> 00:09:51,510 ‫il contenuto è il nome del tour. 178 00:09:51,510 --> 00:09:53,260 ‫E il modo più 179 00:09:53,260 --> 00:09:56,510 ‫semplice per farlo è usare semplicemente la sintassi 180 00:09:56,510 --> 00:10:01,340 ‫uguale come questa, quindi h1 è uguale, poi uno spazio, e poi tour. 181 00:10:01,340 --> 00:10:04,353 ‫E questo è tutto, è davvero tutto ciò che dobbiamo fare. 182 00:10:05,830 --> 00:10:07,660 ‫Quindi prendiamo questo qui fuori, 183 00:10:07,660 --> 00:10:09,803 ‫e quindi in realtà un'altra cosa 184 00:10:09,803 --> 00:10:12,830 ‫che volevo mostrarti è che in Pug, possiamo creare 185 00:10:12,830 --> 00:10:15,450 ‫commenti e possiamo creare due tipi di commenti. 186 00:10:15,450 --> 00:10:19,100 ‫Quindi il più semplice è semplicemente come in JavaScript, quindi 187 00:10:19,100 --> 00:10:20,703 ‫proprio come questo. 188 00:10:21,890 --> 00:10:23,600 ‫E questo creerà quindi 189 00:10:23,600 --> 00:10:26,120 ‫un commento che sarà visibile nell'html. 190 00:10:26,120 --> 00:10:27,770 ‫Quindi diamo ora un'occhiata a 191 00:10:29,290 --> 00:10:30,520 ‫questo, e 192 00:10:30,520 --> 00:10:34,330 ‫quindi teniamo presente che ora l'h1 non sarà più The Park 193 00:10:34,330 --> 00:10:37,480 ‫Camper, ma dovrebbe essere The Forest Hiker perché quella 194 00:10:37,480 --> 00:10:39,520 ‫è la variabile del tour, 195 00:10:39,520 --> 00:10:42,090 ‫o in altre parole il tour local, 196 00:10:42,090 --> 00:10:44,640 ‫che ora è passato in questo modello. 197 00:10:44,640 --> 00:10:46,390 ‫E quindi qui, l'ho 198 00:10:46,390 --> 00:10:49,373 ‫poi inserito in h1 usando la sintassi uguale. 199 00:10:51,070 --> 00:10:53,160 ‫Quindi diamo un'occhiata, dai un'occhiata 200 00:10:53,160 --> 00:10:54,293 ‫a questo. 201 00:10:55,360 --> 00:10:57,743 ‫E infatti ora è The Forest Hiker. 202 00:11:00,020 --> 00:11:02,920 ‫Ed ecco anche quel commento di 203 00:11:02,920 --> 00:11:05,250 ‫cui abbiamo appena parlato. 204 00:11:05,250 --> 00:11:07,940 ‫Quindi, come ho detto, quella doppia barra 205 00:11:07,940 --> 00:11:10,810 ‫che abbiamo fatto lì crea fondamentalmente un commento html. 206 00:11:10,810 --> 00:11:14,820 ‫Quindi questa sintassi qui è come scriviamo commenti in html, ma 207 00:11:14,820 --> 00:11:19,380 ‫se vuoi davvero che questo sia un commento per il file Pug ma 208 00:11:19,380 --> 00:11:21,950 ‫non venga realmente emesso in html, devi 209 00:11:21,950 --> 00:11:24,093 ‫aggiungere un trattino come questo. 210 00:11:26,350 --> 00:11:29,513 ‫Quindi, se ora ricarichiamo questo, quel commento dovrebbe essere sparito. 211 00:11:31,880 --> 00:11:34,550 ‫Quindi questo tipo di codice qui, che abbiamo scritto 212 00:11:34,550 --> 00:11:36,163 ‫qui, è chiamato codice bufferizzato. 213 00:11:37,080 --> 00:11:40,550 ‫E in realtà potremmo anche scrivere del 214 00:11:40,550 --> 00:11:44,880 ‫JavaScript qui, quindi diciamo che h2 è uguale all'utente, 215 00:11:44,880 --> 00:11:48,700 ‫e quindi possiamo anche chiamare maiuscolo su quello. 216 00:11:53,080 --> 00:11:54,710 ‫Quindi JavaScript semplice qui perché 217 00:11:54,710 --> 00:11:57,600 ‫di nuovo qui in questo codice bufferizzato, che 218 00:11:57,600 --> 00:11:59,150 ‫è come viene 219 00:11:59,150 --> 00:12:02,403 ‫chiamato, possiamo eseguire JavaScript semplice proprio come abbiamo fatto qui. 220 00:12:05,840 --> 00:12:10,263 ‫Quindi eccoci qui, Jonas in maiuscolo. 221 00:12:12,160 --> 00:12:16,030 ‫Quindi codice bufferizzato, e se abbiamo codice bufferizzato, 222 00:12:16,030 --> 00:12:19,660 ‫allora dobbiamo anche avere codice non bufferizzato. 223 00:12:19,660 --> 00:12:22,890 ‫E quindi fondamentalmente, il codice non bufferizzato è 224 00:12:22,890 --> 00:12:25,620 ‫codice che non aggiungerà nulla all'output. 225 00:12:25,620 --> 00:12:28,510 ‫E lo scriviamo scrivendo dash e poi facciamo 226 00:12:28,510 --> 00:12:30,863 ‫semplicemente un po' di JavaScript 227 00:12:31,990 --> 00:12:34,610 ‫qui, ad esempio semplicemente definendo una variabile. 228 00:12:34,610 --> 00:12:38,330 ‫Quindi diciamo che const x è uguale a nove, e 229 00:12:38,330 --> 00:12:40,720 ‫poi ripetiamo del codice nel buffer. 230 00:12:40,720 --> 00:12:45,200 ‫Quindi di nuovo il codice che aggiungerà qualcosa all'output. 231 00:12:45,200 --> 00:12:47,870 ‫E così di nuovo possiamo usare JavaScript qui, 232 00:12:47,870 --> 00:12:50,290 ‫quindi facciamo solo due volte x. 233 00:12:50,290 --> 00:12:54,613 ‫E quindi qui, avremo accesso a quella variabile x. 234 00:12:56,710 --> 00:13:00,833 ‫Quindi dovrebbe essere 18 e in effetti lo è. 235 00:13:01,990 --> 00:13:04,603 ‫Quindi questi sono tutti i piccoli pezzi di 236 00:13:04,603 --> 00:13:06,950 ‫codice diverso che possiamo usare in Pug. 237 00:13:06,950 --> 00:13:11,130 ‫Ora in realtà c'è anche un terzo modo di scrivere codice, e 238 00:13:11,130 --> 00:13:12,970 ‫permettetemi di mostrarlo qui. 239 00:13:12,970 --> 00:13:15,240 ‫Quindi si chiama interpolazione, e 240 00:13:15,240 --> 00:13:16,690 ‫in realtà assomiglia 241 00:13:16,690 --> 00:13:19,370 ‫un po' alle stringhe del modello ES6. 242 00:13:19,370 --> 00:13:21,430 ‫Quindi, invece di avere solo Natours 243 00:13:21,430 --> 00:13:23,233 ‫qui, aggiungiamo anche il nome 244 00:13:24,100 --> 00:13:26,883 ‫del tour, così possiamo farlo in questo modo. 245 00:13:29,380 --> 00:13:33,620 ‫Quindi con la stringa del modello in ES6, funziona così, ma 246 00:13:33,620 --> 00:13:36,553 ‫qui in Pug è con questo hash, 247 00:13:37,660 --> 00:13:39,350 ‫quindi proprio così. 248 00:13:39,350 --> 00:13:41,230 ‫E qui dobbiamo farlo in 249 00:13:41,230 --> 00:13:45,090 ‫questo modo fondamentalmente perché questo è codice, quindi è variabile, ma 250 00:13:45,090 --> 00:13:47,700 ‫questo non è codice, è semplicemente testo. 251 00:13:47,700 --> 00:13:51,500 ‫E quindi non possiamo farlo perché tutto ciò che è qui 252 00:13:51,500 --> 00:13:53,630 ‫viene quindi trattato come JavaScript, 253 00:13:53,630 --> 00:13:57,150 ‫e quindi poiché questo non è JavaScript non funzionerebbe. 254 00:13:57,150 --> 00:13:59,810 ‫E quindi questa qui è solo 255 00:13:59,810 --> 00:14:02,730 ‫una stringa, quindi se vogliamo aggiungere qualcosa a quella 256 00:14:02,730 --> 00:14:05,430 ‫stringa, allora dobbiamo usare questa sintassi di interpolazione. 257 00:14:05,430 --> 00:14:07,053 ‫Ok, ha senso? 258 00:14:08,620 --> 00:14:11,320 ‫Aggiungiamo semplicemente come questa barra qui, che 259 00:14:11,320 --> 00:14:13,940 ‫è anche semplicemente parte della stringa. 260 00:14:13,940 --> 00:14:15,717 ‫E così ora ci aspettiamo che 261 00:14:17,010 --> 00:14:18,573 ‫Natours riduca The Forest 262 00:14:19,440 --> 00:14:21,810 ‫Hiker, quindi è esattamente quello che hanno ottenuto. 263 00:14:21,810 --> 00:14:24,700 ‫Fantastico, quindi questi sono i fondamenti 264 00:14:24,700 --> 00:14:26,760 ‫del lavoro con Pug. 265 00:14:26,760 --> 00:14:28,970 ‫Ma ovviamente c'è molto altro da imparare 266 00:14:28,970 --> 00:14:30,330 ‫e quindi continuiamo a 267 00:14:30,330 --> 00:14:31,980 ‫farlo nelle prossime due lezioni.