1
00:00:00,990 --> 00:00:01,900
‫-: Va bene.

2
00:00:01,900 --> 00:00:04,500
‫In questo video, ti mostrerò come utilizzare

3
00:00:04,500 --> 00:00:06,180
‫una delle funzionalità

4
00:00:06,180 --> 00:00:09,440
‫più importanti e anche più complesse di Pug.

5
00:00:09,440 --> 00:00:11,940
‫E che sono si estende.

6
00:00:11,940 --> 00:00:14,280
‫Con extend, saremo in

7
00:00:14,280 --> 00:00:17,000
‫grado di utilizzare lo stesso layout

8
00:00:17,000 --> 00:00:20,770
‫di base per ogni singola pagina che vogliamo rendere.

9
00:00:20,770 --> 00:00:24,280
‫In questo momento, abbiamo il nostro modello di base finito con

10
00:00:24,280 --> 00:00:27,210
‫una bella intestazione e un bel piè di pagina.

11
00:00:27,210 --> 00:00:30,760
‫Quindi ora, iniziamo effettivamente a compilare il suo contenuto.

12
00:00:30,760 --> 00:00:32,670
‫Ora, ovviamente, vogliamo

13
00:00:32,670 --> 00:00:35,560
‫caricare contenuti diversi per pagine diverse.

14
00:00:35,560 --> 00:00:38,550
‫E per iniziare, vogliamo avere una pagina panoramica con tutti

15
00:00:38,550 --> 00:00:40,860
‫i tour, quindi una pagina con

16
00:00:40,860 --> 00:00:43,763
‫tutti i dettagli del tour per un tour specifico.

17
00:00:44,860 --> 00:00:47,080
‫Quindi ora implementiamo alcuni percorsi per

18
00:00:47,080 --> 00:00:48,713
‫entrambe queste pagine.

19
00:00:51,410 --> 00:00:53,640
‫E lo farò proprio qui sotto il

20
00:00:53,640 --> 00:00:55,840
‫primo che abbiamo già creato.

21
00:00:59,056 --> 00:01:00,510
‫Quindi, /overview E

22
00:01:09,440 --> 00:01:12,750
‫poi qualcosa di molto simile a prima.

23
00:01:12,750 --> 00:01:15,430
‫E ancora, un po' più tardi, in realtà

24
00:01:15,430 --> 00:01:16,910
‫nel prossimo video inseriremo

25
00:01:16,910 --> 00:01:18,863
‫questi percorsi in un file separato.

26
00:01:21,530 --> 00:01:24,560
‫Quindi, esegui il rendering, e ora in questa pagina di

27
00:01:24,560 --> 00:01:26,030
‫panoramica vorremo effettivamente eseguire

28
00:01:26,030 --> 00:01:28,223
‫il rendering di un modello chiamato panoramica.

29
00:01:32,440 --> 00:01:34,000
‫Questo non esiste ancora,

30
00:01:34,000 --> 00:01:36,903
‫quindi ora andiamo avanti rapidamente e ne creiamo uno.

31
00:01:40,400 --> 00:01:43,010
‫Quindi, panoramica. pug E

32
00:01:48,570 --> 00:01:51,640
‫in effetti passiamo anche alcuni dati.

33
00:01:51,640 --> 00:01:54,080
‫E passeremo al titolo della pagina

34
00:01:54,080 --> 00:01:56,113
‫che in questo caso, diremo,

35
00:01:58,220 --> 00:01:59,063
‫All Tours.

36
00:02:00,780 --> 00:02:03,130
‫Ora prendiamo questo codice

37
00:02:03,130 --> 00:02:05,503
‫e copiamolo per il tour.

38
00:02:06,680 --> 00:02:11,270
‫Quindi vogliamo anche di nuovo un itinerario per un tour specifico.

39
00:02:11,270 --> 00:02:12,770
‫E qui, vorremmo

40
00:02:12,770 --> 00:02:16,160
‫avere un modello che si chiama anche tour.

41
00:02:16,160 --> 00:02:18,260
‫E poi il titolo di quello, per

42
00:02:18,260 --> 00:02:19,300
‫ora, facciamolo di

43
00:02:19,300 --> 00:02:20,950
‫nuovo, The Forest Hiker Tour.

44
00:02:25,830 --> 00:02:27,990
‫Quindi per ora, questo è solo un

45
00:02:27,990 --> 00:02:29,470
‫segnaposto, e ovviamente un

46
00:02:29,470 --> 00:02:31,360
‫po' più tardi realizzeremo questa dinamica.

47
00:02:31,360 --> 00:02:33,120
‫Perché a questo punto,

48
00:02:33,120 --> 00:02:35,723
‫stiamo ancora imparando come funziona davvero Pug.

49
00:02:38,830 --> 00:02:42,323
‫Creiamo ora anche quel modello di tour.

50
00:02:44,070 --> 00:02:45,810
‫E questo è tutto.

51
00:02:45,810 --> 00:02:49,363
‫Ok, ora che questi due nuovi modelli sono stati completati,

52
00:02:50,810 --> 00:02:52,680
‫questo è ciò che faremo.

53
00:02:52,680 --> 00:02:54,960
‫In ciascuno di questi modelli, e in

54
00:02:54,960 --> 00:02:56,820
‫questo caso qui la panoramica,

55
00:02:56,820 --> 00:02:59,500
‫vogliamo solo inserire il contenuto per quella pagina specifica.

56
00:02:59,500 --> 00:03:01,720
‫Quindi non vogliamo piè di pagina qui,

57
00:03:01,720 --> 00:03:04,260
‫nessun header e nessuna delle cose che abbiamo nella base.

58
00:03:04,260 --> 00:03:06,040
‫Quindi, di nuovo, in realtà

59
00:03:06,040 --> 00:03:07,900
‫solo il contenuto della pagina panoramica.

60
00:03:07,900 --> 00:03:10,890
‫Questo è esattamente ciò che inseriremo in

61
00:03:10,890 --> 00:03:14,000
‫questo file, quindi inietteremo sostanzialmente questo contenuto

62
00:03:14,000 --> 00:03:16,300
‫nel modello di base, che

63
00:03:16,300 --> 00:03:18,316
‫possiamo chiamare modello padre.

64
00:03:18,316 --> 00:03:21,620
‫Questo processo viene quindi chiamato estensione.

65
00:03:21,620 --> 00:03:24,750
‫Quindi, ogni volta che viene eseguito il rendering del modello

66
00:03:24,750 --> 00:03:26,550
‫di panoramica, prendiamo il modello di

67
00:03:26,550 --> 00:03:29,560
‫base e lo riempiamo con il contenuto di questo

68
00:03:29,560 --> 00:03:31,353
‫file, quindi lo estendiamo.

69
00:03:32,930 --> 00:03:35,080
‫Ecco come lo implementiamo.

70
00:03:35,080 --> 00:03:38,203
‫Prima di tutto, nella base, dobbiamo mettere un blocco.

71
00:03:40,110 --> 00:03:41,560
‫In realtà lo farò qui.

72
00:03:42,890 --> 00:03:45,180
‫Quindi cancelliamo tutto questo,

73
00:03:45,180 --> 00:03:47,900
‫e qui mettiamo un blocco.

74
00:03:47,900 --> 00:03:52,320
‫E quel blocco, lo chiamerò contenuto.

75
00:03:52,320 --> 00:03:54,260
‫Quindi all'interno di quel blocco, possiamo effettivamente avere

76
00:03:54,260 --> 00:03:55,303
‫anche dei contenuti.

77
00:03:56,490 --> 00:03:58,520
‫Quindi mettiamo un h1 qui.

78
00:03:58,520 --> 00:04:01,740
‫Ma questo contenuto verrà successivamente sovrascritto.

79
00:04:01,740 --> 00:04:03,600
‫Ma comunque, mettiamolo

80
00:04:03,600 --> 00:04:06,230
‫qui solo come segnaposto, in pratica.

81
00:04:06,230 --> 00:04:09,630
‫Quindi, questa è un'intestazione segnaposto.

82
00:04:12,150 --> 00:04:15,600
‫Ok, quindi abbiamo il nostro blocco qui, e ora possiamo

83
00:04:15,600 --> 00:04:18,280
‫andare alla nostra pagina di panoramica e

84
00:04:18,280 --> 00:04:21,473
‫dire che vogliamo estendere il nostro modello di base.

85
00:04:22,360 --> 00:04:25,053
‫Quindi, estendi la base.

86
00:04:26,400 --> 00:04:28,420
‫O in realtà, si chiama estende.

87
00:04:28,420 --> 00:04:30,823
‫Quindi questo file estende il file di base.

88
00:04:31,970 --> 00:04:33,528
‫E ovviamente, se questo qui si

89
00:04:33,528 --> 00:04:36,157
‫chiamasse, ad esempio, index. pug,

90
00:04:36,157 --> 00:04:38,853
‫allora qui diremmo estende index.

91
00:04:40,660 --> 00:04:42,510
‫Ora qual è esattamente il

92
00:04:42,510 --> 00:04:45,083
‫contenuto che verrà esteso nel modello di base?

93
00:04:46,000 --> 00:04:49,203
‫Bene, questo è tutto ciò che inseriamo nel blocco del contenuto.

94
00:04:52,030 --> 00:04:55,573
‫Quindi, anche qui, creiamo un blocco chiamato contenuto.

95
00:04:57,410 --> 00:05:01,063
‫E poi lì dentro, come sempre, possiamo mettere i nostri contenuti.

96
00:05:02,650 --> 00:05:06,243
‫Quindi diciamo solo che questa è la panoramica del tour.

97
00:05:09,180 --> 00:05:12,075
‫Qui, ridefiniamo sostanzialmente il blocco di contenuto che

98
00:05:12,075 --> 00:05:14,073
‫si trova nella base.

99
00:05:15,270 --> 00:05:16,900
‫Quindi, di nuovo, abbiamo

100
00:05:16,900 --> 00:05:19,450
‫questo blocco qui chiamato contenuto, e ora

101
00:05:19,450 --> 00:05:22,400
‫mettendo lo stesso blocco di contenuto proprio qui

102
00:05:22,400 --> 00:05:24,370
‫in questa pagina, che estende

103
00:05:24,370 --> 00:05:27,293
‫quindi la base, stiamo praticamente ridefinendo quel blocco.

104
00:05:28,171 --> 00:05:31,820
‫Ogni file può estendere solo un altro file.

105
00:05:31,820 --> 00:05:33,860
‫Quindi possiamo solo estendere

106
00:05:33,860 --> 00:05:38,390
‫la base qui, ma possiamo avere blocchi diversi in ciascuno dei file.

107
00:05:38,390 --> 00:05:41,730
‫Quindi potremmo avere anche qui un blocco per la testa.

108
00:05:41,730 --> 00:05:43,760
‫E quindi potremmo estenderlo anche

109
00:05:43,760 --> 00:05:45,790
‫nel modello di panoramica.

110
00:05:45,790 --> 00:05:48,330
‫E, in realtà, lo faremo un po' più tardi.

111
00:05:48,330 --> 00:05:51,260
‫Ma per ora, ovviamente, cerchiamo di mantenere le cose semplici.

112
00:05:51,260 --> 00:05:52,923
‫Ok, ha senso?

113
00:05:54,270 --> 00:05:57,020
‫Ora andiamo avanti e in realtà facciamo la stessa cosa qui.

114
00:05:57,930 --> 00:06:02,190
‫Quindi questo estende il layout di base.

115
00:06:02,190 --> 00:06:04,083
‫E cosa si estende esattamente?

116
00:06:05,200 --> 00:06:08,900
‫Bene, estenderà il blocco del contenuto.

117
00:06:08,900 --> 00:06:11,660
‫E quindi questo lo metteremo

118
00:06:11,660 --> 00:06:16,180
‫su h1, questa è la pagina dei dettagli del tour.

119
00:06:19,230 --> 00:06:21,830
‫Quindi, prima di testarlo, ricapitoliamo rapidamente ciò che

120
00:06:21,830 --> 00:06:23,020
‫abbiamo appena fatto.

121
00:06:23,020 --> 00:06:26,100
‫Quindi, vogliamo usare questo modello di base

122
00:06:26,100 --> 00:06:28,330
‫qui come punto di partenza.

123
00:06:28,330 --> 00:06:31,600
‫Quindi, come uno scheletro che ha tutto il materiale

124
00:06:31,600 --> 00:06:32,815
‫HTML, come

125
00:06:32,815 --> 00:06:36,360
‫questa testa, e anche l'intestazione e il piè di pagina,

126
00:06:36,360 --> 00:06:39,610
‫ma non il contenuto specifico per ogni pagina.

127
00:06:39,610 --> 00:06:41,720
‫Quindi, in ciascuna di queste

128
00:06:41,720 --> 00:06:44,933
‫pagine qui, abbiamo solo il contenuto per quella pagina stessa.

129
00:06:46,020 --> 00:06:47,650
‫E possiamo farlo

130
00:06:47,650 --> 00:06:49,913
‫perché possiamo sostanzialmente iniettare questo

131
00:06:49,913 --> 00:06:53,650
‫contenuto qui nel modello di base genitore usando extend.

132
00:06:53,650 --> 00:06:57,353
‫Quindi, in pratica, pensa a questo come l'opposto dell'inclusione.

133
00:06:58,881 --> 00:07:03,298
‫Ecco, questo modello includeva due modelli principali.

134
00:07:03,298 --> 00:07:07,424
‫Questo modello qui includeva due modelli figlio, l'intestazione

135
00:07:07,424 --> 00:07:10,293
‫e il piè di pagina.

136
00:07:12,284 --> 00:07:14,200
‫Quindi, di nuovo, la base è il

137
00:07:14,200 --> 00:07:17,140
‫genitore e l'intestazione e il piè di pagina sono i figli.

138
00:07:17,140 --> 00:07:19,890
‫Quindi qui, il genitore includeva i bambini.

139
00:07:19,890 --> 00:07:22,740
‫Ma con le estensioni, è il contrario,

140
00:07:22,740 --> 00:07:25,660
‫dove i bambini, come possiamo dire, quindi possiamo

141
00:07:25,660 --> 00:07:27,300
‫dire che la

142
00:07:27,300 --> 00:07:29,570
‫panoramica è anche un bambino della

143
00:07:29,570 --> 00:07:33,160
‫base, ma qui è il bambino che include la base.

144
00:07:33,160 --> 00:07:36,883
‫Quindi, in pratica, tutto ciò che è intorno a questo contenuto di blocco.

145
00:07:38,260 --> 00:07:40,960
‫Puoi immaginare che tutto questo codice

146
00:07:40,960 --> 00:07:43,750
‫qui, tutto ciò che non è il contenuto

147
00:07:43,750 --> 00:07:47,090
‫del blocco, venga quindi copiato direttamente in questo file.

148
00:07:47,090 --> 00:07:49,843
‫È un bel modo di immaginare come funziona.

149
00:07:51,334 --> 00:07:55,360
‫Ciò ci consente di utilizzare qui nel nostro percorso la

150
00:07:55,360 --> 00:07:59,430
‫panoramica e i modelli di tour invece di utilizzare la base.

151
00:07:59,430 --> 00:08:02,750
‫Ma ancora, ovviamente, usando tutto questo HTML

152
00:08:02,750 --> 00:08:04,620
‫che abbiamo qui.

153
00:08:04,620 --> 00:08:08,460
‫Ok, spero che ora abbia senso.

154
00:08:08,460 --> 00:08:10,653
‫In realtà andiamo avanti e proviamo questo.

155
00:08:12,030 --> 00:08:13,783
‫Sto solo andando a copiare l'URL.

156
00:08:14,960 --> 00:08:16,913
‫Quindi ora scriviamo una panoramica.

157
00:08:18,960 --> 00:08:22,350
‫E così, in effetti, otteniamo l'h1 che dice Questa

158
00:08:22,350 --> 00:08:24,460
‫è la panoramica del tour.

159
00:08:24,460 --> 00:08:27,810
‫E in effetti usiamo anche la variabile title che

160
00:08:27,810 --> 00:08:29,683
‫abbiamo passato in questi modelli.

161
00:08:31,810 --> 00:08:34,096
‫Ricorda che qui abbiamo il titolo

162
00:08:34,096 --> 00:08:37,320
‫Tutti i tour nella panoramica, e poi nel tour

163
00:08:37,320 --> 00:08:39,310
‫abbiamo The Forest Hiker.

164
00:08:39,310 --> 00:08:41,563
‫Quindi mettiamolo davvero nel titolo.

165
00:08:42,590 --> 00:08:44,860
‫In effetti, possiamo effettivamente farlo proprio

166
00:08:44,860 --> 00:08:47,110
‫qui nel modello di base.

167
00:08:47,110 --> 00:08:48,850
‫Quindi, quando proprio qui

168
00:08:48,850 --> 00:08:51,140
‫nella panoramica estendiamo il modello di

169
00:08:51,140 --> 00:08:54,970
‫base, il modello di base ha ancora accesso ai locali,

170
00:08:54,970 --> 00:08:57,843
‫quindi, alle variabili, che abbiamo passato nel modello.

171
00:08:58,810 --> 00:09:02,300
‫Qui possiamo fare quello che abbiamo fatto prima,

172
00:09:02,300 --> 00:09:05,973
‫quindi, interpolazione con la variabile, quindi con il locale.

173
00:09:07,620 --> 00:09:12,580
‫Quindi, tutto ciò che dobbiamo fare è mettere il titolo qui, in questo modo.

174
00:09:12,580 --> 00:09:14,400
‫E se ora ricarichiamo,

175
00:09:14,400 --> 00:09:16,823
‫vedrai Tutti i tour qui in alto.

176
00:09:19,267 --> 00:09:20,573
‫Ora proviamo con il tour.

177
00:09:21,630 --> 00:09:24,420
‫E quindi questa è la pagina dei dettagli del tour,

178
00:09:24,420 --> 00:09:26,833
‫e qui sopra vedi The Forest Hiker Tour.

179
00:09:28,610 --> 00:09:30,660
‫Ora, se carichiamo questo, dovremmo

180
00:09:30,660 --> 00:09:32,540
‫ottenere quel segnaposto che

181
00:09:32,540 --> 00:09:34,230
‫inseriamo nel blocco.

182
00:09:34,230 --> 00:09:35,113
‫Ricordati che?

183
00:09:36,890 --> 00:09:40,430
‫E, in effetti, questa è l'intestazione segnaposto.

184
00:09:40,430 --> 00:09:41,570
‫Grande.

185
00:09:41,570 --> 00:09:44,466
‫Questo è un meccanismo potente e molto importante per

186
00:09:44,466 --> 00:09:47,220
‫noi da capire e da usare per tutti i

187
00:09:47,220 --> 00:09:49,200
‫modelli che andremo a costruire nel

188
00:09:49,200 --> 00:09:50,550
‫resto della sezione.

189
00:09:52,210 --> 00:09:54,250
‫Nel prossimo video, infine, ripuliremo

190
00:09:54,250 --> 00:09:57,710
‫un po' questo pasticcio che abbiamo qui e rifaremo

191
00:09:57,710 --> 00:09:59,328
‫tutto questo codice

192
00:09:59,328 --> 00:10:01,303
‫qui in alcuni file diversi.