1 00:00:01,240 --> 00:00:03,170 ‫-: In questo video e 2 00:00:03,170 --> 00:00:06,540 ‫nel prossimo, costruiremo insieme la pagina dei dettagli del tour. 3 00:00:06,540 --> 00:00:07,500 ‫E lungo 4 00:00:07,500 --> 00:00:09,930 ‫la strada imparerai altre tecniche di 5 00:00:09,930 --> 00:00:12,107 ‫Pug come condizionali e mixin. 6 00:00:14,120 --> 00:00:15,840 ‫E come ti ho 7 00:00:15,840 --> 00:00:19,760 ‫mostrato prima, ecco come appare la pagina dei dettagli del tour. 8 00:00:19,760 --> 00:00:22,590 ‫Ed è quello che costruiremo in questo 9 00:00:22,590 --> 00:00:24,640 ‫video e nel prossimo. 10 00:00:24,640 --> 00:00:26,180 ‫L'unica cosa che lasceremo per 11 00:00:26,180 --> 00:00:27,550 ‫un po' più 12 00:00:27,550 --> 00:00:29,490 ‫tardi è in realtà questa mappa. 13 00:00:29,490 --> 00:00:31,060 ‫Va bene, ma tutto 14 00:00:31,060 --> 00:00:33,760 ‫il resto che costruiremo in queste lezioni sugli strumenti. 15 00:00:33,760 --> 00:00:35,873 ‫Comprese queste recensioni. 16 00:00:37,510 --> 00:00:39,070 ‫Va bene. 17 00:00:39,070 --> 00:00:41,830 ‫Quindi in questo momento abbiamo la nostra 18 00:00:41,830 --> 00:00:43,350 ‫panoramica e ovviamente 19 00:00:43,350 --> 00:00:46,270 ‫abbiamo questi pulsanti con gli URL già creati. 20 00:00:46,270 --> 00:00:49,430 ‫Ma poi quando proviamo ad accedere a questa pagina 21 00:00:49,430 --> 00:00:51,380 ‫ovviamente riceviamo questo errore. 22 00:00:51,380 --> 00:00:52,380 ‫Va bene. 23 00:00:52,380 --> 00:00:55,170 ‫Quindi torniamo al nostro codice VS e 24 00:00:55,170 --> 00:00:57,470 ‫in realtà voglio iniziare con una 25 00:00:57,470 --> 00:00:59,650 ‫piccola sfida per te. 26 00:00:59,650 --> 00:01:00,820 ‫Quindi quello che voglio 27 00:01:00,820 --> 00:01:03,310 ‫che tu faccia è creare un percorso per la 28 00:01:03,310 --> 00:01:06,180 ‫pagina dei dettagli in base all'URL che abbiamo appena creato prima. 29 00:01:06,180 --> 00:01:07,370 ‫E sarà 30 00:01:07,370 --> 00:01:09,100 ‫simile a quello che abbiamo 31 00:01:09,100 --> 00:01:11,640 ‫già qui, ma devi modificarlo un po'. 32 00:01:11,640 --> 00:01:12,473 ‫Va bene. 33 00:01:12,473 --> 00:01:13,306 ‫Basta con 34 00:01:13,306 --> 00:01:16,120 ‫questo, voglio anche che tu costruisca questo controller. 35 00:01:16,120 --> 00:01:17,530 ‫Quindi raggiungilo. 36 00:01:17,530 --> 00:01:19,370 ‫Perché in questo momento abbiamo 37 00:01:19,370 --> 00:01:20,910 ‫solo questo segnaposto. 38 00:01:20,910 --> 00:01:23,410 ‫E quindi lascia che ti dia effettivamente i passaggi qui. 39 00:01:23,410 --> 00:01:25,130 ‫E quindi, come 40 00:01:25,130 --> 00:01:26,660 ‫sempre, prima 41 00:01:26,660 --> 00:01:29,120 ‫dobbiamo ottenere i dati. 42 00:01:29,120 --> 00:01:31,093 ‫Questa volta per il tour richiesto. 43 00:01:34,480 --> 00:01:35,313 ‫E per questo, 44 00:01:35,313 --> 00:01:37,360 ‫tieni presente che in realtà abbiamo bisogno delle recensioni 45 00:01:37,360 --> 00:01:38,693 ‫qui e anche delle guide turistiche. 46 00:01:43,670 --> 00:01:44,503 ‫Va bene. 47 00:01:45,890 --> 00:01:46,723 ‫Quindi, 48 00:01:46,723 --> 00:01:48,700 ‫diamo ancora un'occhiata a questo. 49 00:01:48,700 --> 00:01:51,140 ‫Quindi abbiamo queste guide turistiche qui. 50 00:01:51,140 --> 00:01:54,230 ‫Giusto, e quindi sono fondamentalmente un set di dati separato. 51 00:01:54,230 --> 00:01:55,550 ‫Quindi utenti. 52 00:01:55,550 --> 00:01:57,933 ‫E poi qui abbiamo anche le recensioni. 53 00:01:59,380 --> 00:02:00,730 ‫Ora, queste guide turistiche 54 00:02:00,730 --> 00:02:03,330 ‫qui, credo che siano effettivamente popolate automaticamente in 55 00:02:03,330 --> 00:02:04,400 ‫un modello. 56 00:02:04,400 --> 00:02:06,930 ‫Quindi diamo un'occhiata a questo molto velocemente. 57 00:02:06,930 --> 00:02:08,270 ‫Quindi il modello 58 00:02:09,610 --> 00:02:11,450 ‫del tour e così, 59 00:02:11,450 --> 00:02:12,283 ‫sì. 60 00:02:12,283 --> 00:02:13,116 ‫Quindi quaggiù, 61 00:02:13,116 --> 00:02:14,400 ‫abbiamo questo popolamento automatico 62 00:02:14,400 --> 00:02:16,600 ‫ogni volta che c'è una query di ricerca, 63 00:02:16,600 --> 00:02:18,070 ‫ma solo per le guide. 64 00:02:18,070 --> 00:02:20,160 ‫E quindi non dimenticare di popolare anche 65 00:02:20,160 --> 00:02:21,173 ‫le recensioni. 66 00:02:22,530 --> 00:02:23,450 ‫Va bene. 67 00:02:23,450 --> 00:02:24,513 ‫Dopodiché, costruiremo 68 00:02:25,900 --> 00:02:27,120 ‫un modello ma 69 00:02:27,120 --> 00:02:29,670 ‫lo faremo insieme, quindi non ho bisogno 70 00:02:29,670 --> 00:02:31,470 ‫che tu faccia questa parte. 71 00:02:33,880 --> 00:02:35,220 ‫E infine, 72 00:02:35,220 --> 00:02:38,030 ‫voglio che completi anche questa parte. 73 00:02:38,030 --> 00:02:38,950 ‫Quindi esegui il 74 00:02:40,370 --> 00:02:41,203 ‫rendering 75 00:02:42,130 --> 00:02:43,510 ‫del modello utilizzando di 76 00:02:44,930 --> 00:02:47,050 ‫nuovo i dati del passaggio uno. 77 00:02:47,050 --> 00:02:48,580 ‫Va bene. 78 00:02:48,580 --> 00:02:50,120 ‫Quindi anche questo è molto semplice. 79 00:02:50,120 --> 00:02:51,300 ‫E quindi quello che 80 00:02:51,300 --> 00:02:52,870 ‫voglio che tu faccia è creare il 81 00:02:52,870 --> 00:02:54,410 ‫percorso e poi anche ottenere i dati. 82 00:02:54,410 --> 00:02:57,763 ‫Ok, metti in pausa il video qui e buona fortuna. 83 00:03:01,540 --> 00:03:03,280 ‫Quindi spero che tu l'abbia 84 00:03:03,280 --> 00:03:05,950 ‫fatto e per farmi sapere, risolvilo qui per te. 85 00:03:05,950 --> 00:03:08,090 ‫E inizieremo con il percorso. 86 00:03:08,090 --> 00:03:11,360 ‫E ora tutto ciò che dobbiamo effettivamente aggiungere qui è questa lumaca. 87 00:03:11,360 --> 00:03:14,510 ‫E, naturalmente, lo stiamo facendo come parametro URL. 88 00:03:14,510 --> 00:03:17,693 ‫Quindi proprio così, chiamandolo lumaca. 89 00:03:18,885 --> 00:03:21,150 ‫Quindi prima di usare l'ID giusto? 90 00:03:21,150 --> 00:03:22,660 ‫E così abbiamo 91 00:03:22,660 --> 00:03:25,480 ‫avuto così e ora chiamiamola semplicemente lumaca. 92 00:03:25,480 --> 00:03:26,313 ‫Va bene. 93 00:03:26,313 --> 00:03:27,146 ‫Perché, ancora una 94 00:03:27,146 --> 00:03:29,560 ‫volta, è così che appare la pagina di panoramica. 95 00:03:29,560 --> 00:03:32,413 ‫Fondamentalmente abbiamo il tour slash slug. 96 00:03:33,780 --> 00:03:36,100 ‫Ok, quindi è quello 97 00:03:36,100 --> 00:03:39,460 ‫che useremo per creare il tour nel controller. 98 00:03:39,460 --> 00:03:41,500 ‫Quindi facciamolo ora qui. 99 00:03:41,500 --> 00:03:44,460 ‫Quindi const, tour 100 00:03:44,460 --> 00:03:48,633 ‫uguale aspetta tour e trovane 101 00:03:51,970 --> 00:03:53,440 ‫uno. 102 00:03:53,440 --> 00:03:56,540 ‫Quindi questa volta non possiamo usare la ricerca per ID. 103 00:03:56,540 --> 00:03:58,330 ‫Beh, perché non 104 00:03:58,330 --> 00:04:00,130 ‫conosciamo l'ID del tour. 105 00:04:00,130 --> 00:04:01,030 ‫E 106 00:04:01,030 --> 00:04:04,040 ‫così, invece, stiamo cercando per la lumaca. 107 00:04:04,040 --> 00:04:05,140 ‫E la 108 00:04:06,140 --> 00:04:07,540 ‫lumaca è come spero 109 00:04:07,540 --> 00:04:09,940 ‫tu sappia richiesta. params dot 110 00:04:09,940 --> 00:04:11,060 ‫slug 111 00:04:11,060 --> 00:04:12,960 ‫tutto a posto. 112 00:04:12,960 --> 00:04:15,180 ‫E ora, finalmente, è tutto per popolare 113 00:04:16,570 --> 00:04:18,263 ‫il campo degli array. 114 00:04:19,390 --> 00:04:20,223 ‫Va bene. 115 00:04:21,540 --> 00:04:24,063 ‫Quindi il percorso da popolare sono le recensioni. 116 00:04:25,080 --> 00:04:27,690 ‫E in realtà non abbiamo bisogno di tutti i campi qui. 117 00:04:27,690 --> 00:04:29,890 ‫Quindi specifichiamo solo quelli di cui abbiamo bisogno. 118 00:04:30,810 --> 00:04:32,480 ‫E quindi, questa è 119 00:04:32,480 --> 00:04:34,023 ‫solo la recensione, 120 00:04:35,200 --> 00:04:36,113 ‫la 121 00:04:37,290 --> 00:04:38,450 ‫valutazione e l'utente. 122 00:04:38,450 --> 00:04:39,283 ‫Perché 123 00:04:39,283 --> 00:04:40,600 ‫ricorda che in realtà 124 00:04:41,500 --> 00:04:44,490 ‫mostriamo così il nome utente e la foto dell'utente. 125 00:04:44,490 --> 00:04:45,460 ‫E poi, 126 00:04:45,460 --> 00:04:47,873 ‫naturalmente, la recensione stessa e la valutazione. 127 00:04:50,065 --> 00:04:50,898 ‫Va bene. 128 00:04:50,898 --> 00:04:51,910 ‫Poi, naturalmente, 129 00:04:51,910 --> 00:04:54,604 ‫si lamenta che non abbiamo usato asincrono. 130 00:04:54,604 --> 00:04:56,763 ‫E ovviamente non l'avrei dimenticato. 131 00:04:58,140 --> 00:04:59,300 ‫Ma comunque è 132 00:04:59,300 --> 00:05:02,290 ‫bene che ES Line ci avverta di questo tipo di errori. 133 00:05:02,290 --> 00:05:04,660 ‫Elimina davvero molti bug 134 00:05:04,660 --> 00:05:06,353 ‫dallo sviluppo. 135 00:05:07,880 --> 00:05:08,713 ‫Va bene. 136 00:05:08,713 --> 00:05:09,770 ‫E poi 137 00:05:09,770 --> 00:05:12,030 ‫qui, ovviamente, passeremo quella variabile 138 00:05:12,030 --> 00:05:14,660 ‫di tour nel nostro modello di tour. 139 00:05:14,660 --> 00:05:16,240 ‫Quindi quello. 140 00:05:16,240 --> 00:05:17,380 ‫Dagli un salvataggio. 141 00:05:17,380 --> 00:05:19,010 ‫Niente più errori. 142 00:05:19,010 --> 00:05:21,590 ‫E quindi quella parte è in realtà ora completa. 143 00:05:21,590 --> 00:05:22,940 ‫E quindi tutto ciò 144 00:05:22,940 --> 00:05:26,420 ‫che dobbiamo fare ora è andare avanti e costruire il nostro modello. 145 00:05:26,420 --> 00:05:27,730 ‫Va bene. 146 00:05:27,730 --> 00:05:28,940 ‫Quindi, 147 00:05:28,940 --> 00:05:30,920 ‫dovremmo già averlo qui. 148 00:05:30,920 --> 00:05:32,193 ‫E questi sono i dati di sviluppo. 149 00:05:33,050 --> 00:05:34,230 ‫Quindi abbiamo molte 150 00:05:34,230 --> 00:05:35,490 ‫cartelle e molti dati. 151 00:05:35,490 --> 00:05:37,370 ‫E ad un certo punto può 152 00:05:37,370 --> 00:05:39,090 ‫diventare un po' confuso. 153 00:05:39,090 --> 00:05:39,923 ‫Va bene. 154 00:05:39,923 --> 00:05:40,923 ‫E 155 00:05:41,780 --> 00:05:45,310 ‫quindi, liberiamoci di questo contenuto segnaposto qui. 156 00:05:45,310 --> 00:05:47,510 ‫E prima di fare qualsiasi 157 00:05:47,510 --> 00:05:51,690 ‫altra cosa, diamo di nuovo un'occhiata al file HTML originale. 158 00:05:51,690 --> 00:05:53,510 ‫Che è in quella 159 00:05:53,510 --> 00:05:55,900 ‫cartella pubblica che ho appena chiuso. 160 00:05:55,900 --> 00:05:58,080 ‫In realtà chiudiamo tutto qui, perché 161 00:05:59,180 --> 00:06:00,980 ‫lo trovo davvero confuso. 162 00:06:03,150 --> 00:06:05,470 ‫Ok, anche i modelli. 163 00:06:05,470 --> 00:06:08,290 ‫E quindi ora ciò di cui abbiamo bisogno è pubblico e 164 00:06:08,290 --> 00:06:09,893 ‫poi tour. html. 165 00:06:12,180 --> 00:06:14,950 ‫Quindi l'intestazione che abbiamo già ovviamente. 166 00:06:14,950 --> 00:06:16,970 ‫E poi ecco tutto il contenuto. 167 00:06:16,970 --> 00:06:17,803 ‫Quindi, 168 00:06:17,803 --> 00:06:18,880 ‫tutte queste sezioni 169 00:06:18,880 --> 00:06:20,070 ‫che abbiamo sulla 170 00:06:20,070 --> 00:06:23,110 ‫nostra pagina sono ovviamente tradotte qui come HTML. 171 00:06:23,110 --> 00:06:24,360 ‫E proprio 172 00:06:24,360 --> 00:06:26,830 ‫come prima, in realtà ho già 173 00:06:26,830 --> 00:06:30,649 ‫creato un modello Pug basato su tutto questo codice HTML. 174 00:06:30,649 --> 00:06:33,390 ‫Va bene, non vorremmo tradurlo 175 00:06:33,390 --> 00:06:35,630 ‫qui manualmente insieme. 176 00:06:35,630 --> 00:06:36,640 ‫Va bene. 177 00:06:36,640 --> 00:06:40,050 ‫Quindi ce l'ho già qui in questo file modello. 178 00:06:40,050 --> 00:06:40,883 ‫Ma ovviamente, 179 00:06:40,883 --> 00:06:42,630 ‫di nuovo, se ne hai voglia, 180 00:06:42,630 --> 00:06:44,020 ‫puoi mettere in pausa 181 00:06:44,020 --> 00:06:46,113 ‫il video ora e tradurlo anche tu. 182 00:06:47,010 --> 00:06:47,843 ‫Va bene. 183 00:06:47,843 --> 00:06:49,870 ‫Ma quello che farò ora è andare 184 00:06:49,870 --> 00:06:51,850 ‫avanti e copiare tutto questo codice. 185 00:06:51,850 --> 00:06:54,933 ‫Che è ancora una tonnellata di codice come puoi vedere. 186 00:06:56,310 --> 00:07:00,270 ‫Quindi copiamo tutto questo e entriamo nel nostro tour 187 00:07:00,270 --> 00:07:02,090 ‫e incolliamolo qui. 188 00:07:02,090 --> 00:07:05,240 ‫Ora l'annotazione sarà di nuovo sbagliata. 189 00:07:05,240 --> 00:07:08,920 ‫Quindi copiamo o selezioniamo effettivamente ciò che abbiamo appena incollato qui. 190 00:07:08,920 --> 00:07:11,990 ‫E quindi tutto tranne la prima riga non è corretto. 191 00:07:11,990 --> 00:07:14,490 ‫Ma tutto ciò che dobbiamo fare qui è aggiungere un'altra scheda. 192 00:07:15,400 --> 00:07:16,910 ‫E questo è tutto. 193 00:07:16,910 --> 00:07:20,420 ‫Quindi ora sono tutti all'interno di questo blocco di contenuti 194 00:07:20,420 --> 00:07:21,720 ‫allo stesso livello. 195 00:07:21,720 --> 00:07:22,920 ‫Quindi sezione e 196 00:07:22,920 --> 00:07:23,980 ‫sezione e 197 00:07:23,980 --> 00:07:26,410 ‫quindi fondamentalmente tutte le sezioni sono 198 00:07:26,410 --> 00:07:27,700 ‫ora allo stesso 199 00:07:27,700 --> 00:07:29,570 ‫livello, quindi sono tutti fratelli. 200 00:07:29,570 --> 00:07:30,403 ‫Grande. 201 00:07:30,403 --> 00:07:32,650 ‫Quindi chiudiamo tutto ciò di cui non 202 00:07:32,650 --> 00:07:33,973 ‫abbiamo più bisogno. 203 00:07:34,820 --> 00:07:36,070 ‫E così, proprio 204 00:07:36,070 --> 00:07:38,150 ‫come prima, ora abbiamo questa pagina statica 205 00:07:38,150 --> 00:07:40,120 ‫qui con tutti questi dati statici. 206 00:07:40,120 --> 00:07:43,310 ‫Che sappiamo che dovremo procedere con una sostituzione. 207 00:07:43,310 --> 00:07:44,700 ‫Ma prima di farlo, 208 00:07:44,700 --> 00:07:46,960 ‫diamo un'occhiata se il nostro percorso 209 00:07:46,960 --> 00:07:48,173 ‫funziona già. 210 00:07:49,670 --> 00:07:50,840 ‫Va bene. 211 00:07:50,840 --> 00:07:52,600 ‫Quindi ricarichiamolo e questo 212 00:07:52,600 --> 00:07:54,700 ‫ci dà lo stesso errore. 213 00:07:54,700 --> 00:07:55,690 ‫E immagino 214 00:07:55,690 --> 00:07:56,970 ‫che sia perché qui 215 00:07:56,970 --> 00:07:58,720 ‫abbiamo tour e non tour come 216 00:07:58,720 --> 00:08:00,673 ‫penso che abbiamo nel nostro percorso. 217 00:08:03,410 --> 00:08:04,800 ‫Proprio così qui abbiamo tour. 218 00:08:04,800 --> 00:08:07,560 ‫E questo è il modo in cui ha senso. 219 00:08:07,560 --> 00:08:10,443 ‫E quindi andiamo avanti e cambiamo questo qui nella 220 00:08:11,480 --> 00:08:12,313 ‫nostra panoramica. 221 00:08:13,690 --> 00:08:14,950 ‫Ok, quindi qui 222 00:08:14,950 --> 00:08:16,670 ‫vogliamo davvero fare un tour. 223 00:08:16,670 --> 00:08:17,680 ‫Perché in 224 00:08:17,680 --> 00:08:19,950 ‫realtà stiamo vedendo solo un tour 225 00:08:19,950 --> 00:08:21,333 ‫e non più tour. 226 00:08:22,460 --> 00:08:23,570 ‫Destra? 227 00:08:23,570 --> 00:08:25,800 ‫E quindi se torniamo ora alla 228 00:08:25,800 --> 00:08:27,940 ‫panoramica, la carichiamo e ora 229 00:08:27,940 --> 00:08:29,800 ‫apriamo The Forest 230 00:08:29,800 --> 00:08:32,500 ‫Hiker, allora vedrai che sarà un tour. 231 00:08:32,500 --> 00:08:33,420 ‫E 232 00:08:33,420 --> 00:08:35,533 ‫poi, ovviamente, otteniamo l'HTML per 233 00:08:35,533 --> 00:08:38,160 ‫la pagina che abbiamo appena creato. 234 00:08:38,160 --> 00:08:41,360 ‫Ora per qualche ragione il CSS non è qui. 235 00:08:41,360 --> 00:08:42,860 ‫Proviamo a ricaricare questo. 236 00:08:44,410 --> 00:08:46,100 ‫Bene, cosa sta succedendo qui? 237 00:08:46,100 --> 00:08:48,340 ‫Proviamo a ispezionare questo. 238 00:08:48,340 --> 00:08:50,440 ‫E vedo che abbiamo un paio di errori. 239 00:08:50,440 --> 00:08:52,510 ‫Quindi possiamo fare clic su questo. 240 00:08:52,510 --> 00:08:55,000 ‫E quindi il motivo del CSS mancante, perché 241 00:08:55,000 --> 00:08:57,630 ‫invece sta cercando di caricare il file nel 242 00:08:57,630 --> 00:08:58,640 ‫posto sbagliato. 243 00:08:58,640 --> 00:09:01,320 ‫Quindi sta cercando di caricarlo nella cartella CSS all'interno 244 00:09:01,320 --> 00:09:02,310 ‫di tour. 245 00:09:02,310 --> 00:09:04,890 ‫Ma questo ovviamente non esiste. 246 00:09:04,890 --> 00:09:05,950 ‫E questo 247 00:09:05,950 --> 00:09:08,430 ‫è perché siamo qui per questo tour, ok. 248 00:09:08,430 --> 00:09:10,230 ‫E quindi dobbiamo sostanzialmente correggere il 249 00:09:10,230 --> 00:09:13,493 ‫modo in cui importiamo il CSS nel nostro modello di base. 250 00:09:14,850 --> 00:09:16,113 ‫Andiamo la. 251 00:09:18,720 --> 00:09:19,950 ‫E quindi 252 00:09:19,950 --> 00:09:23,070 ‫qui, in effetti, dovremmo avere un'altra barra. 253 00:09:23,070 --> 00:09:25,010 ‫Ok, e lo stesso in realtà qui. 254 00:09:25,010 --> 00:09:25,910 ‫E quindi 255 00:09:25,910 --> 00:09:27,153 ‫è per lo 256 00:09:27,153 --> 00:09:30,770 ‫stesso motivo che ti ho spiegato prima nella panoramica qui sotto. 257 00:09:30,770 --> 00:09:33,930 ‫Quindi abbiamo iniziato anche questo URL con una barra. 258 00:09:33,930 --> 00:09:36,260 ‫E così di nuovo, questo inizierà 259 00:09:36,260 --> 00:09:38,120 ‫dalla radice della pagina. 260 00:09:38,120 --> 00:09:40,350 ‫Ed è così che dovrebbe funzionare. 261 00:09:40,350 --> 00:09:43,470 ‫E in effetti, lo stesso vale per tutte le immagini qui. 262 00:09:43,470 --> 00:09:45,630 ‫Quindi tutte le immagini 263 00:09:45,630 --> 00:09:49,080 ‫dovrebbero sempre iniziare anche in relazione all'URL radice. 264 00:09:49,080 --> 00:09:52,030 ‫Quindi aggiungiamolo molto rapidamente qui a tutte queste immagini. 265 00:09:54,800 --> 00:09:55,633 ‫E, 266 00:09:55,633 --> 00:09:56,590 ‫sì, è così. 267 00:09:56,590 --> 00:09:57,723 ‫Quindi sono tutti loro. 268 00:09:58,800 --> 00:09:59,813 ‫E così, 269 00:10:01,020 --> 00:10:02,810 ‫con ciò abbiamo corretto 270 00:10:02,810 --> 00:10:06,210 ‫la panoramica e anche questo file di base. 271 00:10:06,210 --> 00:10:07,950 ‫Quindi, se ora 272 00:10:07,950 --> 00:10:11,610 ‫ricarichiamo, dovremmo ottenere l'accesso al CSS corretto. 273 00:10:11,610 --> 00:10:13,610 ‫E infatti, ci siamo. 274 00:10:13,610 --> 00:10:15,000 ‫C'è solo un altro errore 275 00:10:15,000 --> 00:10:16,610 ‫che è qui in questa immagine. 276 00:10:16,610 --> 00:10:17,480 ‫E così 277 00:10:17,480 --> 00:10:19,390 ‫di nuovo, è perché sta cercando 278 00:10:19,390 --> 00:10:20,830 ‫di caricarlo qui dal 279 00:10:20,830 --> 00:10:22,830 ‫tour e non dall'URL di root. 280 00:10:22,830 --> 00:10:23,663 ‫E così, 281 00:10:23,663 --> 00:10:25,563 ‫quel problema è qui nell'intestazione. 282 00:10:27,040 --> 00:10:27,873 ‫E 283 00:10:27,873 --> 00:10:29,770 ‫quindi, ovviamente, anche qui dobbiamo 284 00:10:29,770 --> 00:10:31,700 ‫renderlo relativo al percorso radice. 285 00:10:31,700 --> 00:10:33,853 ‫Probabilmente lo stesso nel piè di pagina. 286 00:10:34,950 --> 00:10:35,783 ‫E sì. 287 00:10:37,180 --> 00:10:38,033 ‫Va bene. 288 00:10:39,320 --> 00:10:41,960 ‫Solo per confermarlo rapidamente, sì, 289 00:10:41,960 --> 00:10:43,573 ‫eccoci qui. 290 00:10:45,320 --> 00:10:46,350 ‫Grande. 291 00:10:46,350 --> 00:10:47,830 ‫Quindi, come ho 292 00:10:47,830 --> 00:10:49,890 ‫detto ovviamente, questo ha tutti i 293 00:10:49,890 --> 00:10:52,380 ‫dati statici su The Park Camper Tour 294 00:10:52,380 --> 00:10:54,650 ‫che è quello che abbiamo nel modello. 295 00:10:54,650 --> 00:10:57,140 ‫Ma stiamo guardando l'escursionista della foresta. 296 00:10:57,140 --> 00:11:01,060 ‫E quindi, iniziamo ora correggendo il nostro modello e 297 00:11:01,060 --> 00:11:04,663 ‫fondamentalmente utilizzando i dati dinamici proprio qui. 298 00:11:07,620 --> 00:11:10,720 ‫Quindi, ricorda che la variabile che abbiamo passato qui 299 00:11:10,720 --> 00:11:12,053 ‫si chiama tour. 300 00:11:13,210 --> 00:11:14,043 ‫Destra? 301 00:11:14,043 --> 00:11:15,480 ‫Quindi si chiama semplicemente 302 00:11:15,480 --> 00:11:18,100 ‫tour ed è così che dobbiamo chiamarlo qui. 303 00:11:18,100 --> 00:11:18,933 ‫Quindi tour. nome, e 304 00:11:19,997 --> 00:11:20,883 ‫anche lo stesso quassù. 305 00:11:21,720 --> 00:11:23,600 ‫E ora sai già che dobbiamo usare 306 00:11:23,600 --> 00:11:24,630 ‫una stringa modello 307 00:11:24,630 --> 00:11:26,840 ‫qui perché in effetti vogliamo creare una stringa. 308 00:11:26,840 --> 00:11:29,993 ‫Così chiamato. tour. 309 00:11:31,240 --> 00:11:32,463 ‫E qui anche questo percorso non è corretto. 310 00:11:33,460 --> 00:11:36,543 ‫Prima di tutto deve essere una stringa 311 00:11:37,920 --> 00:11:40,530 ‫modello e poi le nostre immagini, 312 00:11:40,530 --> 00:11:42,250 ‫scriverò image slash 313 00:11:42,250 --> 00:11:45,000 ‫tours slash il nome dell'immagine di copertina. 314 00:11:46,280 --> 00:11:48,983 ‫Quindi tour dot, e ora non 315 00:11:52,140 --> 00:11:53,330 ‫ricordo se 316 00:11:53,330 --> 00:11:56,880 ‫è l'immagine di copertina o l'immagine di copertina. 317 00:11:56,880 --> 00:12:00,080 ‫Quindi, sì. 318 00:12:00,080 --> 00:12:01,160 ‫Copertina dell'immagine. 319 00:12:01,160 --> 00:12:01,993 ‫Va bene. 320 00:12:03,780 --> 00:12:04,613 ‫Quindi proviamolo velocemente. 321 00:12:04,613 --> 00:12:07,140 ‫E quindi ricorda, siamo al The First Hiker. 322 00:12:07,140 --> 00:12:09,830 ‫E quindi questo dovrebbe essere il nome. 323 00:12:09,830 --> 00:12:11,580 ‫E l'ennesimo errore. 324 00:12:12,710 --> 00:12:14,480 ‫Quindi, dice qui, non è possibile leggere il tour 325 00:12:14,480 --> 00:12:15,450 ‫della proprietà di undefined. 326 00:12:15,450 --> 00:12:19,310 ‫Quindi torniamo indietro e 327 00:12:19,310 --> 00:12:21,020 ‫sì. 328 00:12:21,890 --> 00:12:22,770 ‫Quindi ecco questo stupido errore. 329 00:12:22,770 --> 00:12:27,900 ‫Quindi è ovviamente un tour. nome e non nome. 330 00:12:27,900 --> 00:12:27,900 ‫tour. 331 00:12:27,900 --> 00:12:30,420 ‫Allora, cosa stavo 332 00:12:30,420 --> 00:12:31,290 ‫pensando lì? 333 00:12:31,290 --> 00:12:32,663 ‫Ricarichiamo questo e ora davvero, 334 00:12:33,980 --> 00:12:34,910 ‫otteniamo The 335 00:12:34,910 --> 00:12:37,820 ‫Forest Hiker con questa bella immagine di copertina sullo sfondo. 336 00:12:37,820 --> 00:12:41,980 ‫Grande. 337 00:12:41,980 --> 00:12:42,813 ‫E continuiamo a muoverci qui. 338 00:12:42,813 --> 00:12:44,373 ‫Quindi crea un'altra stringa modello. 339 00:12:45,550 --> 00:12:47,723 ‫Tour. 340 00:12:49,980 --> 00:12:50,813 ‫Durata e poi 341 00:12:52,320 --> 00:12:53,343 ‫il numero di giorni. 342 00:12:55,421 --> 00:12:57,680 ‫Poi quaggiù, abbiamo di nuovo la posizione 343 00:12:57,680 --> 00:12:58,560 ‫di partenza. 344 00:12:58,560 --> 00:13:03,930 ‫Quindi, giro. 345 00:13:03,930 --> 00:13:05,570 ‫posizione di partenza. descrizione, ricorda. 346 00:13:07,000 --> 00:13:09,643 ‫Va bene. 347 00:13:11,440 --> 00:13:12,520 ‫Ora quaggiù 348 00:13:12,520 --> 00:13:14,070 ‫abbiamo queste caselle panoramiche qui. 349 00:13:14,070 --> 00:13:16,220 ‫Quindi dettaglio della casella panoramica. 350 00:13:16,220 --> 00:13:18,110 ‫E come vedi, abbiamo quattro 351 00:13:18,110 --> 00:13:19,100 ‫caselle uguali 352 00:13:19,100 --> 00:13:21,660 ‫qui dove l'unica cosa che cambia è il 353 00:13:21,660 --> 00:13:23,530 ‫nome di questa icona, quindi 354 00:13:23,530 --> 00:13:25,687 ‫la data e la data successiva. 355 00:13:25,687 --> 00:13:28,810 ‫Ok, quindi qui quello che cambia non è la prossima 356 00:13:28,810 --> 00:13:29,643 ‫data, quello 357 00:13:29,643 --> 00:13:32,140 ‫che cambia è la descrizione delle scatole. 358 00:13:32,140 --> 00:13:34,210 ‫Quindi prossima data, 359 00:13:34,210 --> 00:13:36,540 ‫difficoltà, partecipanti e voto. 360 00:13:36,540 --> 00:13:38,500 ‫Va bene. 361 00:13:38,500 --> 00:13:39,350 ‫E quindi 362 00:13:39,350 --> 00:13:40,260 ‫fondamentalmente, questo codice qui 363 00:13:40,260 --> 00:13:42,550 ‫è sempre lo stesso solo con tre pezzi che cambiano. 364 00:13:42,550 --> 00:13:44,710 ‫Quindi il nome dell'icona, la descrizione e il 365 00:13:44,710 --> 00:13:46,100 ‫valore di quella descrizione. 366 00:13:46,100 --> 00:13:49,560 ‫E quindi, dal momento che non ci piace il codice 367 00:13:49,560 --> 00:13:50,393 ‫ripetuto, giusto? 368 00:13:50,393 --> 00:13:53,510 ‫Usiamo un'altra caratteristica di Pug che non 369 00:13:53,510 --> 00:13:56,070 ‫abbiamo ancora usato che si 370 00:13:56,070 --> 00:13:57,410 ‫chiama mixin. 371 00:13:57,410 --> 00:13:59,500 ‫Quindi i mixin sono fondamentalmente 372 00:13:59,500 --> 00:14:03,060 ‫pezzi di codice riutilizzabili in cui possiamo passare argomenti. 373 00:14:03,060 --> 00:14:05,060 ‫Quindi un po' come una funzione. 374 00:14:05,060 --> 00:14:06,940 ‫Ed è anche esattamente come i mixin in SAS. 375 00:14:06,940 --> 00:14:10,400 ‫Quindi questo è un preprocessore CSS con 376 00:14:10,400 --> 00:14:12,460 ‫cui potresti avere familiarità. 377 00:14:12,460 --> 00:14:14,370 ‫Quindi copiamo questo codice qui per questa finestra panoramica. 378 00:14:14,370 --> 00:14:17,950 ‫Quindi copiandolo. 379 00:14:17,950 --> 00:14:19,200 ‫E ora qui, 380 00:14:19,200 --> 00:14:22,240 ‫fuori da questo blocco, creiamo un nuovo mixin. 381 00:14:22,240 --> 00:14:24,353 ‫Quindi scriviamo mixin e poi 382 00:14:25,930 --> 00:14:29,140 ‫il nome del mixin, che chiamo riquadro di panoramica. 383 00:14:29,140 --> 00:14:30,793 ‫E poi, un po' come 384 00:14:33,400 --> 00:14:35,200 ‫una funzione, possiamo specificare alcuni argomenti. 385 00:14:35,200 --> 00:14:37,200 ‫E quindi ricorda come 386 00:14:37,200 --> 00:14:41,430 ‫abbiamo la descrizione della scatola, quindi abbiamo il valore di quella 387 00:14:41,430 --> 00:14:43,600 ‫descrizione e chiamiamolo semplicemente testo qui. 388 00:14:43,600 --> 00:14:45,283 ‫E poi anche il nome dell'icona. 389 00:14:46,241 --> 00:14:48,570 ‫Va bene. 390 00:14:48,570 --> 00:14:49,790 ‫Quindi ora, copiamo quel 391 00:14:49,790 --> 00:14:52,020 ‫testo qui e ovviamente questo ora incasina la 392 00:14:53,447 --> 00:14:54,450 ‫nostra formattazione. 393 00:14:54,450 --> 00:14:56,853 ‫Risolviamolo velocemente. 394 00:14:58,420 --> 00:14:59,980 ‫E così ora, queste variabili qui, funzionano 395 00:15:02,047 --> 00:15:02,880 ‫davvero come 396 00:15:02,880 --> 00:15:04,320 ‫tutte le altre variabili in Pug. 397 00:15:04,320 --> 00:15:07,940 ‫Quindi, qui questo dovrebbe ora essere il 398 00:15:07,940 --> 00:15:08,773 ‫testo. 399 00:15:08,773 --> 00:15:11,563 ‫Destra? 400 00:15:13,640 --> 00:15:14,473 ‫E questa qui dovrebbe essere la descrizione. 401 00:15:14,473 --> 00:15:16,410 ‫Quindi uguale descrizione. 402 00:15:18,300 --> 00:15:20,920 ‫Bene, qui in realtà si chiama label nei CSS. 403 00:15:20,920 --> 00:15:23,730 ‫Quindi chiamiamola etichetta anche qui. 404 00:15:23,730 --> 00:15:26,303 ‫Ok, quindi etichetta, testo e icona. 405 00:15:28,210 --> 00:15:30,833 ‫E quindi qui dobbiamo anche cambiare il nome 406 00:15:31,850 --> 00:15:35,280 ‫di quell'icona e tutti questi nomi di icone iniziano sempre con 407 00:15:35,280 --> 00:15:36,530 ‫il trattino dell'icona. 408 00:15:36,530 --> 00:15:38,730 ‫E quindi tutto ciò che dobbiamo 409 00:15:38,730 --> 00:15:40,630 ‫veramente sostituire è questa parte. 410 00:15:40,630 --> 00:15:42,350 ‫Quindi creiamo di nuovo una stringa modello. 411 00:15:42,350 --> 00:15:44,963 ‫E poi liberati di questo. 412 00:15:46,500 --> 00:15:48,493 ‫E icona. 413 00:15:51,690 --> 00:15:52,943 ‫Ok, ora possiamo usare questo. 414 00:15:54,000 --> 00:15:56,363 ‫Volevo anche dire che avremmo anche 415 00:15:57,310 --> 00:15:58,800 ‫potuto esportare questo 416 00:15:58,800 --> 00:16:03,200 ‫mixin in un altro file e quindi includere quel file qui. 417 00:16:03,200 --> 00:16:05,170 ‫Ma penso che questo non abbia molto senso. 418 00:16:05,170 --> 00:16:07,040 ‫In questo caso 419 00:16:07,040 --> 00:16:09,780 ‫perché non è davvero molto codice. 420 00:16:09,780 --> 00:16:11,890 ‫Ad ogni modo, ora andiamo avanti e usiamo 421 00:16:11,890 --> 00:16:12,723 ‫questo mixin. 422 00:16:12,723 --> 00:16:15,760 ‫Quindi fammi copiare solo il nome. 423 00:16:15,760 --> 00:16:17,510 ‫E così qui invece di questa finestra panoramica. 424 00:16:18,490 --> 00:16:22,203 ‫E per ora permettetemi di duplicarlo qui. 425 00:16:23,290 --> 00:16:25,840 ‫Ok, quindi abbiamo usato questo mixin scrivendo 426 00:16:27,290 --> 00:16:29,310 ‫plus e poi, proprio come 427 00:16:29,310 --> 00:16:31,220 ‫una normale funzione, gli 428 00:16:31,220 --> 00:16:33,130 ‫abbiamo passato argomenti vuoti. 429 00:16:33,130 --> 00:16:35,340 ‫E così la nostra prima finestra panoramica è la prossima data. 430 00:16:35,340 --> 00:16:38,043 ‫Quindi per ora, solo la data che è qui. 431 00:16:41,150 --> 00:16:43,380 ‫Quindi solo per mostrarti che funziona in effetti. 432 00:16:43,380 --> 00:16:46,383 ‫Quindi 20, 21 433 00:16:47,600 --> 00:16:49,480 ‫agosto. 434 00:16:49,480 --> 00:16:50,380 ‫E 435 00:16:50,380 --> 00:16:51,363 ‫poi ecco, calendario. 436 00:16:52,400 --> 00:16:53,510 ‫Ok perché questo è il nome qui dell'icona. 437 00:16:53,510 --> 00:16:56,280 ‫E così ora dovremmo 438 00:16:56,280 --> 00:16:58,420 ‫ottenere due scatole. 439 00:16:58,420 --> 00:16:59,810 ‫Quindi questo e questo 440 00:16:59,810 --> 00:17:01,560 ‫che dovrebbero avere lo stesso aspetto. 441 00:17:01,560 --> 00:17:03,740 ‫Quindi confermiamolo rapidamente. 442 00:17:03,740 --> 00:17:05,800 ‫E quindi possiamo passare all'uso 443 00:17:05,800 --> 00:17:07,830 ‫effettivo del mixin correttamente. 444 00:17:07,830 --> 00:17:10,103 ‫E sì, quindi ecco le nostre due 445 00:17:11,220 --> 00:17:12,240 ‫scatole esattamente uguali. 446 00:17:12,240 --> 00:17:15,163 ‫Grande. 447 00:17:16,450 --> 00:17:17,490 ‫Quindi liberiamoci di questo primo. 448 00:17:17,490 --> 00:17:20,203 ‫E ovviamente poi qui vogliamo la 449 00:17:24,450 --> 00:17:25,760 ‫vera data. 450 00:17:25,760 --> 00:17:27,233 ‫Va bene. 451 00:17:28,540 --> 00:17:29,410 ‫E 452 00:17:29,410 --> 00:17:33,960 ‫così è, aggiungi tour. inizio, date, zero. 453 00:17:33,960 --> 00:17:34,793 ‫Quindi diamo un'occhiata a questo. 454 00:17:36,450 --> 00:17:37,283 ‫E ricorda 455 00:17:38,330 --> 00:17:39,910 ‫che sembrerà un po' strano. 456 00:17:39,910 --> 00:17:41,310 ‫Come faceva prima. 457 00:17:41,310 --> 00:17:43,410 ‫Va bene. 458 00:17:43,410 --> 00:17:45,083 ‫Quindi andiamo avanti e risolviamolo. 459 00:17:45,920 --> 00:17:46,860 ‫Quindi prendiamolo da qui. 460 00:17:46,860 --> 00:17:49,820 ‫E quindi ciò di cui abbiamo 461 00:17:49,820 --> 00:17:52,503 ‫bisogno è fondamentalmente questo. 462 00:17:53,610 --> 00:17:55,220 ‫Ora non 463 00:17:55,220 --> 00:17:57,603 ‫voglio allungare troppo questa riga 464 00:17:59,370 --> 00:18:01,290 ‫qui semplicemente incollandola qui. 465 00:18:01,290 --> 00:18:02,300 ‫E quindi perché non 466 00:18:02,300 --> 00:18:04,800 ‫creare semplicemente una nuova variabile di script java per questo. 467 00:18:04,800 --> 00:18:06,700 ‫Quindi ricorda che dobbiamo usare questa 468 00:18:06,700 --> 00:18:08,560 ‫sintassi qui per creare 469 00:18:08,560 --> 00:18:11,100 ‫codice java script che non produrrà alcun output. 470 00:18:11,100 --> 00:18:12,910 ‫E poi di nuovo 471 00:18:12,910 --> 00:18:15,083 ‫possiamo semplicemente scrivere qui uno script java. 472 00:18:16,780 --> 00:18:17,613 ‫Va bene. 473 00:18:17,613 --> 00:18:20,133 ‫E quindi ora qui userò semplicemente quella 474 00:18:21,060 --> 00:18:21,893 ‫data. 475 00:18:21,893 --> 00:18:24,780 ‫Grande. 476 00:18:24,780 --> 00:18:26,240 ‫E ora duplichiamo questo qui un paio di volte per 477 00:18:26,240 --> 00:18:27,073 ‫tutte le scatole che abbiamo. 478 00:18:27,073 --> 00:18:29,470 ‫Quindi il primo è per la difficoltà. 479 00:18:29,470 --> 00:18:31,610 ‫E l'icona è in trend. 480 00:18:31,610 --> 00:18:33,623 ‫Quindi il prossimo è per i partecipanti. 481 00:18:37,150 --> 00:18:38,833 ‫Con l'icona dell'utente. 482 00:18:41,970 --> 00:18:44,483 ‫E l'ultimo è il voto. 483 00:18:48,040 --> 00:18:50,220 ‫E l'icona è una stella. 484 00:18:50,220 --> 00:18:52,383 ‫Quindi qui abbiamo la data ma, qui nella 485 00:18:58,010 --> 00:18:59,403 ‫difficoltà abbiamo effettivamente il tour. difficoltà. 486 00:19:00,540 --> 00:19:02,770 ‫Allora qui per 487 00:19:02,770 --> 00:19:05,080 ‫i partecipanti vogliamo questa stringa. 488 00:19:06,860 --> 00:19:07,860 ‫Tipo 10 persone. 489 00:19:09,149 --> 00:19:10,810 ‫Quindi una stringa 490 00:19:10,810 --> 00:19:12,740 ‫modello che dice tour. mix, dimensione 491 00:19:12,740 --> 00:19:14,053 ‫del 492 00:19:15,160 --> 00:19:19,120 ‫gruppo e poi persone. 493 00:19:21,327 --> 00:19:22,940 ‫E infine vogliamo il voto e 494 00:19:22,940 --> 00:19:23,823 ‫poi su cinque. 495 00:19:24,740 --> 00:19:25,573 ‫Quindi tour, 496 00:19:26,950 --> 00:19:28,570 ‫e non riesco mai 497 00:19:28,570 --> 00:19:30,850 ‫a ricordare come ho chiamato questo campo. 498 00:19:30,850 --> 00:19:32,333 ‫Ed è valutazioni nella media. 499 00:19:37,130 --> 00:19:38,530 ‫Va bene. 500 00:19:38,530 --> 00:19:40,730 ‫E poi, su 501 00:19:40,730 --> 00:19:44,673 ‫cinque. 502 00:19:49,730 --> 00:19:50,563 ‫Va bene. 503 00:19:50,563 --> 00:19:51,396 ‫E questo dovrebbe essere tutto. 504 00:19:51,396 --> 00:19:52,380 ‫Ora possiamo sbarazzarci di tutto questo codice. 505 00:19:52,380 --> 00:19:53,213 ‫E in questo modo sembra molto più bello. 506 00:19:54,560 --> 00:19:55,393 ‫E 507 00:19:55,393 --> 00:19:56,530 ‫giusto per 508 00:19:56,530 --> 00:19:58,660 ‫assicurarci che funzioni, salviamolo qui, 509 00:19:58,660 --> 00:20:01,760 ‫ricarichiamo e, in effetti, otteniamo facile, 25 510 00:20:01,760 --> 00:20:03,820 ‫persone e il punteggio di 511 00:20:03,820 --> 00:20:05,203 ‫cinque su cinque. 512 00:20:06,370 --> 00:20:08,140 ‫Stupendo. 513 00:20:08,140 --> 00:20:09,350 ‫Quindi abbiamo già trattato 514 00:20:09,350 --> 00:20:12,170 ‫molto terreno, ma dividiamo questo video in due e continuiamo con 515 00:20:12,170 --> 00:20:13,453 ‫il resto della pagina proprio 516 00:20:14,360 --> 00:20:15,193 ‫nel prossimo.