1
00:00:00,990 --> 00:00:01,900
‫-: Tudo bem.

2
00:00:01,900 --> 00:00:04,500
‫Neste vídeo, vou mostrar como

3
00:00:04,500 --> 00:00:06,180
‫usar um dos

4
00:00:06,180 --> 00:00:09,440
‫recursos mais importantes e complexos do Pug.

5
00:00:09,440 --> 00:00:11,940
‫E isso é estende.

6
00:00:11,940 --> 00:00:14,280
‫Com extends, seremos capazes

7
00:00:14,280 --> 00:00:17,000
‫de usar o mesmo layout

8
00:00:17,000 --> 00:00:20,770
‫base para cada página que desejamos renderizar.

9
00:00:20,770 --> 00:00:24,280
‫No momento, terminamos nosso template base com um

10
00:00:24,280 --> 00:00:27,210
‫bom cabeçalho e um bom rodapé.

11
00:00:27,210 --> 00:00:30,760
‫Agora, vamos começar a preencher seu conteúdo.

12
00:00:30,760 --> 00:00:32,670
‫Agora, é claro,

13
00:00:32,670 --> 00:00:35,560
‫queremos carregar conteúdo diferente para páginas diferentes.

14
00:00:35,560 --> 00:00:38,550
‫E, para começar, queremos uma página de visão geral com

15
00:00:38,550 --> 00:00:40,860
‫todos os passeios e, em seguida, uma

16
00:00:40,860 --> 00:00:43,763
‫página com todos os detalhes de um passeio específico.

17
00:00:44,860 --> 00:00:47,080
‫Portanto, agora vamos implementar algumas rotas

18
00:00:47,080 --> 00:00:48,713
‫para essas duas páginas.

19
00:00:51,410 --> 00:00:53,640
‫E vou fazer isso aqui, abaixo

20
00:00:53,640 --> 00:00:55,840
‫do primeiro que já criamos.

21
00:00:59,056 --> 00:01:00,510
‫Portanto, / visão

22
00:01:09,440 --> 00:01:12,750
‫geral E então algo muito semelhante a antes.

23
00:01:12,750 --> 00:01:15,430
‫E novamente, um pouco mais tarde, na verdade, no

24
00:01:15,430 --> 00:01:16,910
‫próximo vídeo, colocaremos essas

25
00:01:16,910 --> 00:01:18,863
‫rotas em seus próprios arquivos separados.

26
00:01:21,530 --> 00:01:24,560
‫Então, renderize, e agora nesta página de visão geral,

27
00:01:24,560 --> 00:01:26,030
‫vamos realmente querer

28
00:01:26,030 --> 00:01:28,223
‫renderizar um modelo chamado visão geral.

29
00:01:32,440 --> 00:01:34,000
‫Isso ainda não existe,

30
00:01:34,000 --> 00:01:36,903
‫então vamos rapidamente em frente e criar um.

31
00:01:40,400 --> 00:01:43,010
‫Então, visão geral. pug E,

32
00:01:48,570 --> 00:01:51,640
‫na verdade, também vamos passar alguns dados.

33
00:01:51,640 --> 00:01:54,080
‫E passaremos no título da página

34
00:01:54,080 --> 00:01:56,113
‫que neste caso, diremos Todos

35
00:01:58,220 --> 00:01:59,063
‫os Passeios.

36
00:02:00,780 --> 00:02:03,130
‫Agora, vamos pegar esse

37
00:02:03,130 --> 00:02:05,503
‫código e copiá-lo para o tour.

38
00:02:06,680 --> 00:02:11,270
‫Portanto, também queremos uma rota para um passeio específico novamente.

39
00:02:11,270 --> 00:02:12,770
‫E aqui, queremos

40
00:02:12,770 --> 00:02:16,160
‫um modelo que também é chamado de tour.

41
00:02:16,160 --> 00:02:18,260
‫E então o título disso, por enquanto,

42
00:02:18,260 --> 00:02:19,300
‫vamos fazer de

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

44
00:02:25,830 --> 00:02:27,990
‫Portanto, por enquanto, este é apenas um espaço

45
00:02:27,990 --> 00:02:29,470
‫reservado e, claro, um

46
00:02:29,470 --> 00:02:31,360
‫pouco mais tarde, faremos isso de fato.

47
00:02:31,360 --> 00:02:33,120
‫Porque, neste ponto, ainda

48
00:02:33,120 --> 00:02:35,723
‫estamos aprendendo como o Pug realmente funciona.

49
00:02:38,830 --> 00:02:42,323
‫Agora, vamos criar esse modelo de passeio também.

50
00:02:44,070 --> 00:02:45,810
‫E é isso.

51
00:02:45,810 --> 00:02:49,363
‫Ok, agora com esses dois novos modelos feitos aqui, é

52
00:02:50,810 --> 00:02:52,680
‫isso que vamos fazer.

53
00:02:52,680 --> 00:02:54,960
‫Em cada um desses modelos, e neste

54
00:02:54,960 --> 00:02:56,820
‫caso aqui a visão geral,

55
00:02:56,820 --> 00:02:59,500
‫queremos apenas colocar o conteúdo para aquela página específica.

56
00:02:59,500 --> 00:03:01,720
‫Portanto, não queremos nenhum rodapé aqui e

57
00:03:01,720 --> 00:03:04,260
‫nenhum cabeçalho e nenhuma das coisas que temos na base.

58
00:03:04,260 --> 00:03:06,040
‫Então, novamente, apenas o

59
00:03:06,040 --> 00:03:07,900
‫conteúdo da página de visão geral.

60
00:03:07,900 --> 00:03:10,890
‫Então é exatamente isso que vamos colocar

61
00:03:10,890 --> 00:03:14,000
‫neste arquivo e, em seguida, basicamente injetaremos esse

62
00:03:14,000 --> 00:03:16,300
‫conteúdo no modelo base, que podemos

63
00:03:16,300 --> 00:03:18,316
‫chamar de modelo pai.

64
00:03:18,316 --> 00:03:21,620
‫Esse processo é então chamado de extensão.

65
00:03:21,620 --> 00:03:24,750
‫Assim, sempre que o modelo de visão geral é

66
00:03:24,750 --> 00:03:26,550
‫renderizado, pegamos o modelo base

67
00:03:26,550 --> 00:03:29,560
‫e o preenchemos com o conteúdo deste arquivo,

68
00:03:29,560 --> 00:03:31,353
‫e então o estendemos.

69
00:03:32,930 --> 00:03:35,080
‫Aqui está como implementamos isso.

70
00:03:35,080 --> 00:03:38,203
‫Primeiro, na base, precisamos colocar um bloco.

71
00:03:40,110 --> 00:03:41,560
‫Vou realmente fazer isso aqui.

72
00:03:42,890 --> 00:03:45,180
‫Então vamos deletar tudo

73
00:03:45,180 --> 00:03:47,900
‫isso, e aqui, colocar um bloco.

74
00:03:47,900 --> 00:03:52,320
‫E esse bloco, vou chamá-lo de conteúdo.

75
00:03:52,320 --> 00:03:54,260
‫Então, dentro desse bloco, também podemos

76
00:03:54,260 --> 00:03:55,303
‫ter algum conteúdo.

77
00:03:56,490 --> 00:03:58,520
‫Então, vamos colocar um h1 aqui.

78
00:03:58,520 --> 00:04:01,740
‫Mas esse conteúdo será substituído posteriormente.

79
00:04:01,740 --> 00:04:03,600
‫De qualquer forma, vamos colocá-lo

80
00:04:03,600 --> 00:04:06,230
‫aqui apenas como um marcador de posição, basicamente.

81
00:04:06,230 --> 00:04:09,630
‫Portanto, este é um título de espaço reservado.

82
00:04:12,150 --> 00:04:15,600
‫Ok, então temos nosso bloco aqui, e agora podemos

83
00:04:15,600 --> 00:04:18,280
‫ir para nossa página de visão

84
00:04:18,280 --> 00:04:21,473
‫geral e dizer que queremos estender nosso modelo básico.

85
00:04:22,360 --> 00:04:25,053
‫Portanto, estenda a base.

86
00:04:26,400 --> 00:04:28,420
‫Ou, na verdade, isso é chamado de extends.

87
00:04:28,420 --> 00:04:30,823
‫Portanto, este arquivo estende o arquivo base.

88
00:04:31,970 --> 00:04:33,528
‫E claro, se esse aqui fosse

89
00:04:33,528 --> 00:04:36,157
‫chamado, por exemplo, de índice. pug, então

90
00:04:36,157 --> 00:04:38,853
‫aqui diríamos estende o índice.

91
00:04:40,660 --> 00:04:42,510
‫Agora, qual é exatamente o

92
00:04:42,510 --> 00:04:45,083
‫conteúdo que será estendido no modelo base?

93
00:04:46,000 --> 00:04:49,203
‫Bem, isso é tudo o que colocamos no bloco de conteúdo.

94
00:04:52,030 --> 00:04:55,573
‫Então, também aqui, criamos um bloco chamado conteúdo.

95
00:04:57,410 --> 00:05:01,063
‫E aí, como sempre, podemos colocar nosso conteúdo.

96
00:05:02,650 --> 00:05:06,243
‫Digamos apenas: esta é a visão geral do tour.

97
00:05:09,180 --> 00:05:12,075
‫Aqui, basicamente redefinimos o bloco de conteúdo

98
00:05:12,075 --> 00:05:14,073
‫que está na base.

99
00:05:15,270 --> 00:05:16,900
‫Então, novamente, temos este

100
00:05:16,900 --> 00:05:19,450
‫bloco aqui que é chamado de conteúdo,

101
00:05:19,450 --> 00:05:22,400
‫e agora, colocando o mesmo bloco de conteúdo bem

102
00:05:22,400 --> 00:05:24,370
‫aqui nesta página, que está

103
00:05:24,370 --> 00:05:27,293
‫estendendo a base, estamos basicamente redefinindo esse bloco.

104
00:05:28,171 --> 00:05:31,820
‫Cada arquivo pode estender apenas um outro arquivo.

105
00:05:31,820 --> 00:05:33,860
‫Portanto, só podemos estender a

106
00:05:33,860 --> 00:05:38,390
‫base aqui, mas podemos ter blocos diferentes em cada um dos arquivos.

107
00:05:38,390 --> 00:05:41,730
‫Portanto, poderíamos ter um bloqueio para a cabeça aqui também.

108
00:05:41,730 --> 00:05:43,760
‫E então podemos estender isso também

109
00:05:43,760 --> 00:05:45,790
‫no modelo de visão geral.

110
00:05:45,790 --> 00:05:48,330
‫E, na verdade, faremos isso um pouco mais tarde.

111
00:05:48,330 --> 00:05:51,260
‫Mas, por enquanto, é claro, vamos manter as coisas simples.

112
00:05:51,260 --> 00:05:52,923
‫Ok, isso faz sentido?

113
00:05:54,270 --> 00:05:57,020
‫Vamos agora prosseguir e realmente fazer a mesma coisa aqui.

114
00:05:57,930 --> 00:06:02,190
‫Portanto, isso estende o layout de base.

115
00:06:02,190 --> 00:06:04,083
‫E o que exatamente isso se estende?

116
00:06:05,200 --> 00:06:08,900
‫Bem, isso vai estender o bloco de conteúdo.

117
00:06:08,900 --> 00:06:11,660
‫E então colocaremos este no

118
00:06:11,660 --> 00:06:16,180
‫h1, esta é a página de detalhes do tour.

119
00:06:19,230 --> 00:06:21,830
‫Portanto, antes de testar isso, vamos recapitular rapidamente o

120
00:06:21,830 --> 00:06:23,020
‫que acabamos de fazer.

121
00:06:23,020 --> 00:06:26,100
‫Então, queremos usar este modelo básico aqui

122
00:06:26,100 --> 00:06:28,330
‫como nosso ponto de partida.

123
00:06:28,330 --> 00:06:31,600
‫Então, como um esqueleto que tem todo o material

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

125
00:06:32,815 --> 00:06:36,360
‫este cabeçalho, e também o cabeçalho e o rodapé,

126
00:06:36,360 --> 00:06:39,610
‫mas não o conteúdo específico de cada página.

127
00:06:39,610 --> 00:06:41,720
‫Então, em cada uma dessas

128
00:06:41,720 --> 00:06:44,933
‫páginas aqui, temos apenas o conteúdo dessa página em si.

129
00:06:46,020 --> 00:06:47,650
‫E podemos fazer

130
00:06:47,650 --> 00:06:49,913
‫isso porque podemos basicamente injetar

131
00:06:49,913 --> 00:06:53,650
‫esse conteúdo aqui no template base pai usando extend.

132
00:06:53,650 --> 00:06:57,353
‫Então, basicamente, pense nisso como o oposto de incluir.

133
00:06:58,881 --> 00:07:03,298
‫Aqui, este modelo inclui dois modelos pais.

134
00:07:03,298 --> 00:07:07,424
‫Este modelo aqui inclui dois modelos filhos, o

135
00:07:07,424 --> 00:07:10,293
‫cabeçalho e o rodapé.

136
00:07:12,284 --> 00:07:14,200
‫Portanto, novamente, a base é o

137
00:07:14,200 --> 00:07:17,140
‫pai, e o cabeçalho e o rodapé são os filhos.

138
00:07:17,140 --> 00:07:19,890
‫Então, aqui, o pai incluiu os filhos.

139
00:07:19,890 --> 00:07:22,740
‫Mas com extends, é o contrário, onde

140
00:07:22,740 --> 00:07:25,660
‫as crianças, como podemos dizer, então podemos dizer

141
00:07:25,660 --> 00:07:27,300
‫que a visão

142
00:07:27,300 --> 00:07:29,570
‫geral também é uma criança da

143
00:07:29,570 --> 00:07:33,160
‫base, mas aqui é a criança que inclui a base.

144
00:07:33,160 --> 00:07:36,883
‫Então, basicamente, tudo o que está em torno deste conteúdo de bloco.

145
00:07:38,260 --> 00:07:40,960
‫Você pode imaginar que todo esse

146
00:07:40,960 --> 00:07:43,750
‫código aqui, tudo isso que não é o

147
00:07:43,750 --> 00:07:47,090
‫conteúdo do bloco, é então copiado para este arquivo.

148
00:07:47,090 --> 00:07:49,843
‫Essa é uma boa maneira de imaginar como isso funciona.

149
00:07:51,334 --> 00:07:55,360
‫Isso nos permite usar aqui em nossa rota a visão

150
00:07:55,360 --> 00:07:59,430
‫geral e os modelos de passeio em vez de usar a base.

151
00:07:59,430 --> 00:08:02,750
‫Mas ainda, é claro, usando todo esse HTML

152
00:08:02,750 --> 00:08:04,620
‫que temos aqui.

153
00:08:04,620 --> 00:08:08,460
‫Ok, então espero que faça sentido agora.

154
00:08:08,460 --> 00:08:10,653
‫Vamos tentar fazer isso.

155
00:08:12,030 --> 00:08:13,783
‫Vou apenas copiar o URL.

156
00:08:14,960 --> 00:08:16,913
‫Então, agora vamos escrever uma visão geral.

157
00:08:18,960 --> 00:08:22,350
‫E assim, de fato, obtemos o h1 que diz Esta

158
00:08:22,350 --> 00:08:24,460
‫é a visão geral do tour.

159
00:08:24,460 --> 00:08:27,810
‫E, na verdade, também vamos usar a variável title

160
00:08:27,810 --> 00:08:29,683
‫que passamos para esses modelos.

161
00:08:31,810 --> 00:08:34,096
‫Lembre-se de que aqui temos o

162
00:08:34,096 --> 00:08:37,320
‫título Todos os passeios na visão geral e, no passeio,

163
00:08:37,320 --> 00:08:39,310
‫temos O caminhante da floresta.

164
00:08:39,310 --> 00:08:41,563
‫Então, vamos colocar isso no título.

165
00:08:42,590 --> 00:08:44,860
‫Na verdade, podemos fazer isso aqui

166
00:08:44,860 --> 00:08:47,110
‫mesmo no modelo básico.

167
00:08:47,110 --> 00:08:48,850
‫Então, quando bem

168
00:08:48,850 --> 00:08:51,140
‫aqui na visão geral, estendemos o

169
00:08:51,140 --> 00:08:54,970
‫modelo básico, o modelo básico ainda tem acesso aos locais,

170
00:08:54,970 --> 00:08:57,843
‫portanto, às variáveis que passamos para o modelo.

171
00:08:58,810 --> 00:09:02,300
‫Aqui, podemos fazer o que fizemos antes,

172
00:09:02,300 --> 00:09:05,973
‫então, interpolação com a variável, então com o local.

173
00:09:07,620 --> 00:09:12,580
‫Então, tudo que precisamos fazer é colocar o título aqui, assim.

174
00:09:12,580 --> 00:09:14,400
‫E se recarregarmos agora, você

175
00:09:14,400 --> 00:09:16,823
‫verá Todos os passeios aqui no topo.

176
00:09:19,267 --> 00:09:20,573
‫Agora vamos fazer um tour.

177
00:09:21,630 --> 00:09:24,420
‫Esta é a página de detalhes do tour e aqui

178
00:09:24,420 --> 00:09:26,833
‫você vê o The Forest Hiker Tour.

179
00:09:28,610 --> 00:09:30,660
‫Agora, se carregarmos este, devemos

180
00:09:30,660 --> 00:09:32,540
‫obter aquele placeholder que

181
00:09:32,540 --> 00:09:34,230
‫colocamos no bloco.

182
00:09:34,230 --> 00:09:35,113
‫Lembre-se disso?

183
00:09:36,890 --> 00:09:40,430
‫E, de fato, este é o título de espaço reservado.

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

185
00:09:41,570 --> 00:09:44,466
‫Este é um mecanismo poderoso e muito importante

186
00:09:44,466 --> 00:09:47,220
‫para entendermos e usarmos para todos os

187
00:09:47,220 --> 00:09:49,200
‫modelos que construiremos no restante

188
00:09:49,200 --> 00:09:50,550
‫da seção.

189
00:09:52,210 --> 00:09:54,250
‫No próximo vídeo, vamos finalmente limpar

190
00:09:54,250 --> 00:09:57,710
‫um pouco essa bagunça que temos aqui e refatorar

191
00:09:57,710 --> 00:09:59,328
‫todo esse código

192
00:09:59,328 --> 00:10:01,303
‫aqui em alguns arquivos diferentes.