1
00:00:01,240 --> 00:00:03,170
‫-: Neste vídeo e no

2
00:00:03,170 --> 00:00:06,540
‫próximo, juntos vamos construir a página de detalhes do tour.

3
00:00:06,540 --> 00:00:07,500
‫E ao

4
00:00:07,500 --> 00:00:09,930
‫longo do caminho você aprenderá mais algumas

5
00:00:09,930 --> 00:00:12,107
‫técnicas de Pug, como condicionais e mixins.

6
00:00:14,120 --> 00:00:15,840
‫E, como eu mostrei antes,

7
00:00:15,840 --> 00:00:19,760
‫é assim que a página de detalhes do tour realmente se parece.

8
00:00:19,760 --> 00:00:22,590
‫E é isso que vamos construir neste

9
00:00:22,590 --> 00:00:24,640
‫vídeo e no próximo.

10
00:00:24,640 --> 00:00:26,180
‫Agora, a única coisa que

11
00:00:26,180 --> 00:00:27,550
‫vamos deixar um pouco

12
00:00:27,550 --> 00:00:29,490
‫mais tarde é na verdade este mapa.

13
00:00:29,490 --> 00:00:31,060
‫Tudo bem, mas todo

14
00:00:31,060 --> 00:00:33,760
‫o resto vamos construir nessas palestras de ferramentas.

15
00:00:33,760 --> 00:00:35,873
‫Incluindo esses comentários.

16
00:00:37,510 --> 00:00:39,070
‫Tudo bem.

17
00:00:39,070 --> 00:00:41,830
‫Portanto, agora temos nossa visão geral

18
00:00:41,830 --> 00:00:43,350
‫e, é claro,

19
00:00:43,350 --> 00:00:46,270
‫esses botões com as URLs já criadas.

20
00:00:46,270 --> 00:00:49,430
‫Mas então, quando tentamos acessar esta página, é claro

21
00:00:49,430 --> 00:00:51,380
‫que recebemos este erro.

22
00:00:51,380 --> 00:00:52,380
‫Tudo bem.

23
00:00:52,380 --> 00:00:55,170
‫Então, vamos voltar ao nosso código VS

24
00:00:55,170 --> 00:00:57,470
‫e, na verdade, quero começar com

25
00:00:57,470 --> 00:00:59,650
‫um pequeno desafio para você.

26
00:00:59,650 --> 00:01:00,820
‫Então, o que eu

27
00:01:00,820 --> 00:01:03,310
‫quero que você faça é criar uma rota para a

28
00:01:03,310 --> 00:01:06,180
‫página de detalhes de acordo com a URL que acabamos de construir.

29
00:01:06,180 --> 00:01:07,370
‫E vai ser

30
00:01:07,370 --> 00:01:09,100
‫semelhante ao que já temos

31
00:01:09,100 --> 00:01:11,640
‫aqui, mas você tem que ajustar um pouco.

32
00:01:11,640 --> 00:01:12,473
‫OK.

33
00:01:12,473 --> 00:01:13,306
‫Chega disso,

34
00:01:13,306 --> 00:01:16,120
‫eu também quero que você construa este controlador.

35
00:01:16,120 --> 00:01:17,530
‫Então vá em frente.

36
00:01:17,530 --> 00:01:19,370
‫Porque agora só temos esse

37
00:01:19,370 --> 00:01:20,910
‫marcador de posição.

38
00:01:20,910 --> 00:01:23,410
‫E então, deixe-me mostrar as etapas aqui.

39
00:01:23,410 --> 00:01:25,130
‫E como sempre,

40
00:01:25,130 --> 00:01:26,660
‫primeiro,

41
00:01:26,660 --> 00:01:29,120
‫precisamos obter os dados.

42
00:01:29,120 --> 00:01:31,093
‫Desta vez, para o passeio solicitado.

43
00:01:34,480 --> 00:01:35,313
‫E para

44
00:01:35,313 --> 00:01:37,360
‫isso, lembre-se que realmente precisamos dos comentários aqui

45
00:01:37,360 --> 00:01:38,693
‫e também dos guias turísticos.

46
00:01:43,670 --> 00:01:44,503
‫OK.

47
00:01:45,890 --> 00:01:46,723
‫Então, mais

48
00:01:46,723 --> 00:01:48,700
‫uma vez, vamos dar uma olhada nisso.

49
00:01:48,700 --> 00:01:51,140
‫Portanto, temos esses guias turísticos aqui.

50
00:01:51,140 --> 00:01:54,230
‫Certo, então eles são basicamente um conjunto de dados separado.

51
00:01:54,230 --> 00:01:55,550
‫Então, usuários.

52
00:01:55,550 --> 00:01:57,933
‫E aqui também temos os comentários.

53
00:01:59,380 --> 00:02:00,730
‫Agora, esses guias turísticos

54
00:02:00,730 --> 00:02:03,330
‫aqui, acredito que eles são preenchidos automaticamente em

55
00:02:03,330 --> 00:02:04,400
‫um modelo.

56
00:02:04,400 --> 00:02:06,930
‫Então, vamos dar uma olhada nisso rapidamente.

57
00:02:06,930 --> 00:02:08,270
‫Então, o

58
00:02:09,610 --> 00:02:11,450
‫modelo da turnê e,

59
00:02:11,450 --> 00:02:12,283
‫sim.

60
00:02:12,283 --> 00:02:13,116
‫Então, aqui

61
00:02:13,116 --> 00:02:14,400
‫embaixo, temos esse preenchimento

62
00:02:14,400 --> 00:02:16,600
‫automático sempre que houver uma consulta de localização,

63
00:02:16,600 --> 00:02:18,070
‫mas apenas para os guias.

64
00:02:18,070 --> 00:02:20,160
‫Portanto, não se esqueça de preencher também

65
00:02:20,160 --> 00:02:21,173
‫os comentários.

66
00:02:22,530 --> 00:02:23,450
‫OK.

67
00:02:23,450 --> 00:02:24,513
‫Depois disso,

68
00:02:25,900 --> 00:02:27,120
‫vamos construir um modelo,

69
00:02:27,120 --> 00:02:29,670
‫mas que faremos juntos, ok, então não preciso

70
00:02:29,670 --> 00:02:31,470
‫que você faça essa parte.

71
00:02:33,880 --> 00:02:35,220
‫E, finalmente, quero

72
00:02:35,220 --> 00:02:38,030
‫que você conclua esta parte aqui também.

73
00:02:38,030 --> 00:02:38,950
‫Portanto, renderize

74
00:02:40,370 --> 00:02:41,203
‫o

75
00:02:42,130 --> 00:02:43,510
‫modelo usando os

76
00:02:44,930 --> 00:02:47,050
‫dados da etapa um novamente.

77
00:02:47,050 --> 00:02:48,580
‫Tudo bem.

78
00:02:48,580 --> 00:02:50,120
‫Isso também é muito simples.

79
00:02:50,120 --> 00:02:51,300
‫E então o que

80
00:02:51,300 --> 00:02:52,870
‫eu quero que você faça é criar

81
00:02:52,870 --> 00:02:54,410
‫a rota e também obter os dados.

82
00:02:54,410 --> 00:02:57,763
‫Ok, então pause o vídeo aqui e boa sorte com isso.

83
00:03:01,540 --> 00:03:03,280
‫Então, espero que você tenha

84
00:03:03,280 --> 00:03:05,950
‫feito isso e, para me informar, resolva aqui para você.

85
00:03:05,950 --> 00:03:08,090
‫E vamos começar com a rota.

86
00:03:08,090 --> 00:03:11,360
‫E agora tudo o que realmente precisamos adicionar aqui é esta lesma.

87
00:03:11,360 --> 00:03:14,510
‫E, claro, estamos fazendo isso como um parâmetro de URL.

88
00:03:14,510 --> 00:03:17,693
‫Assim, chamando de lesma.

89
00:03:18,885 --> 00:03:21,150
‫Então, antes de usarmos o ID certo?

90
00:03:21,150 --> 00:03:22,660
‫E então nós

91
00:03:22,660 --> 00:03:25,480
‫tínhamos assim e agora vamos chamá-lo de lesma.

92
00:03:25,480 --> 00:03:26,313
‫Tudo bem.

93
00:03:26,313 --> 00:03:27,146
‫Porque, novamente, é

94
00:03:27,146 --> 00:03:29,560
‫assim que a página de visão geral se parece.

95
00:03:29,560 --> 00:03:32,413
‫Basicamente, temos slug slug da turnê.

96
00:03:33,780 --> 00:03:36,100
‫Ok, então é isso

97
00:03:36,100 --> 00:03:39,460
‫que usaremos para criar o tour no controlador.

98
00:03:39,460 --> 00:03:41,500
‫Então vamos fazer isso agora aqui.

99
00:03:41,500 --> 00:03:44,460
‫Portanto, const, tour

100
00:03:44,460 --> 00:03:48,633
‫igual, aguarda tour e encontre

101
00:03:51,970 --> 00:03:53,440
‫um.

102
00:03:53,440 --> 00:03:56,540
‫Portanto, desta vez, não podemos usar localizar por ID.

103
00:03:56,540 --> 00:03:58,330
‫Pois bem, não

104
00:03:58,330 --> 00:04:00,130
‫sabemos a identificação do passeio.

105
00:04:00,130 --> 00:04:01,030
‫E então,

106
00:04:01,030 --> 00:04:04,040
‫em vez disso, estamos procurando pela lesma.

107
00:04:04,040 --> 00:04:05,140
‫E a

108
00:04:06,140 --> 00:04:07,540
‫lesma é como espero

109
00:04:07,540 --> 00:04:09,940
‫que conheçam pedido. params

110
00:04:09,940 --> 00:04:12,960
‫dot slug certo.

111
00:04:12,960 --> 00:04:15,180
‫E agora, finalmente, isso é tudo para

112
00:04:16,570 --> 00:04:18,263
‫preencher o campo matrizes.

113
00:04:19,390 --> 00:04:20,223
‫Tudo bem.

114
00:04:21,540 --> 00:04:24,063
‫Portanto, o caminho para preencher são os comentários.

115
00:04:25,080 --> 00:04:27,690
‫E, na verdade, não precisamos de todos os campos aqui.

116
00:04:27,690 --> 00:04:29,890
‫Então, vamos apenas especificar aqueles de que precisamos.

117
00:04:30,810 --> 00:04:32,480
‫E isso é apenas

118
00:04:32,480 --> 00:04:34,023
‫a revisão, a

119
00:04:35,200 --> 00:04:36,113
‫avaliação

120
00:04:37,290 --> 00:04:38,450
‫e o usuário.

121
00:04:38,450 --> 00:04:39,283
‫Porque lembre-se

122
00:04:39,283 --> 00:04:40,600
‫de que realmente exibimos

123
00:04:41,500 --> 00:04:44,490
‫o nome do usuário e a foto do usuário.

124
00:04:44,490 --> 00:04:45,460
‫E, claro,

125
00:04:45,460 --> 00:04:47,873
‫a própria avaliação e a avaliação.

126
00:04:50,065 --> 00:04:50,898
‫OK.

127
00:04:50,898 --> 00:04:51,910
‫Então, é claro,

128
00:04:51,910 --> 00:04:54,604
‫ele está reclamando que não usamos o assíncrono.

129
00:04:54,604 --> 00:04:56,763
‫E é claro que eu não ia esquecer isso.

130
00:04:58,140 --> 00:04:59,300
‫Mas de qualquer forma

131
00:04:59,300 --> 00:05:02,290
‫é bom que a ES Line nos avise sobre este tipo de erros.

132
00:05:02,290 --> 00:05:04,660
‫Realmente elimina muitos bugs

133
00:05:04,660 --> 00:05:06,353
‫do desenvolvimento.

134
00:05:07,880 --> 00:05:08,713
‫OK.

135
00:05:08,713 --> 00:05:09,770
‫E aqui,

136
00:05:09,770 --> 00:05:12,030
‫é claro, vamos passar essa variável

137
00:05:12,030 --> 00:05:14,660
‫de passeio em nosso modelo de passeio.

138
00:05:14,660 --> 00:05:16,240
‫Então aquele.

139
00:05:16,240 --> 00:05:17,380
‫Dê uma chance.

140
00:05:17,380 --> 00:05:19,010
‫Sem mais erros.

141
00:05:19,010 --> 00:05:21,590
‫E então essa parte agora está completa.

142
00:05:21,590 --> 00:05:22,940
‫Portanto, tudo o

143
00:05:22,940 --> 00:05:26,420
‫que precisamos fazer agora é prosseguir e construir nosso modelo.

144
00:05:26,420 --> 00:05:27,730
‫OK.

145
00:05:27,730 --> 00:05:28,940
‫Então, já

146
00:05:28,940 --> 00:05:30,920
‫deveríamos ter isso aqui.

147
00:05:30,920 --> 00:05:32,193
‫E esses são os dados de desenvolvimento.

148
00:05:33,050 --> 00:05:34,230
‫Portanto, temos muitas

149
00:05:34,230 --> 00:05:35,490
‫pastas e muitos dados.

150
00:05:35,490 --> 00:05:37,370
‫E pode se tornar um pouco

151
00:05:37,370 --> 00:05:39,090
‫confuso em algum ponto.

152
00:05:39,090 --> 00:05:39,923
‫OK.

153
00:05:39,923 --> 00:05:40,923
‫E então,

154
00:05:41,780 --> 00:05:45,310
‫vamos nos livrar desse conteúdo de espaço reservado aqui.

155
00:05:45,310 --> 00:05:47,510
‫E antes de qualquer

156
00:05:47,510 --> 00:05:51,690
‫coisa, vamos dar uma olhada no arquivo HTML original.

157
00:05:51,690 --> 00:05:53,510
‫Que está naquela

158
00:05:53,510 --> 00:05:55,900
‫pasta pública que acabei de fechar.

159
00:05:55,900 --> 00:05:58,080
‫Vamos fechar tudo isso aqui, porque

160
00:05:59,180 --> 00:06:00,980
‫acho isso muito confuso.

161
00:06:03,150 --> 00:06:05,470
‫Ok, os modelos também.

162
00:06:05,470 --> 00:06:08,290
‫E agora o que precisamos é público e

163
00:06:08,290 --> 00:06:09,893
‫depois turnê. html.

164
00:06:12,180 --> 00:06:14,950
‫Portanto, o cabeçalho que já temos, é claro.

165
00:06:14,950 --> 00:06:16,970
‫E aí vai todo o conteúdo.

166
00:06:16,970 --> 00:06:17,803
‫Portanto,

167
00:06:17,803 --> 00:06:18,880
‫todas essas seções

168
00:06:18,880 --> 00:06:20,070
‫que temos em

169
00:06:20,070 --> 00:06:23,110
‫nossa página são, obviamente, traduzidas aqui como HTML.

170
00:06:23,110 --> 00:06:24,360
‫E, assim

171
00:06:24,360 --> 00:06:26,830
‫como antes, eu na verdade já

172
00:06:26,830 --> 00:06:30,649
‫criei um template Pug baseado em todo esse código HTML.

173
00:06:30,649 --> 00:06:33,390
‫Tudo bem, não queremos traduzir

174
00:06:33,390 --> 00:06:35,630
‫isso aqui manualmente juntos.

175
00:06:35,630 --> 00:06:36,640
‫OK.

176
00:06:36,640 --> 00:06:40,050
‫Portanto, já o tenho aqui neste arquivo de modelo.

177
00:06:40,050 --> 00:06:40,883
‫Mas é

178
00:06:40,883 --> 00:06:42,630
‫claro, mais uma vez, se você

179
00:06:42,630 --> 00:06:44,020
‫quiser, pode pausar o vídeo

180
00:06:44,020 --> 00:06:46,113
‫agora e traduzi-lo por conta própria também.

181
00:06:47,010 --> 00:06:47,843
‫Tudo bem.

182
00:06:47,843 --> 00:06:49,870
‫Mas o que vou fazer agora é seguir

183
00:06:49,870 --> 00:06:51,850
‫em frente e copiar todo esse código.

184
00:06:51,850 --> 00:06:54,933
‫O que ainda é uma tonelada de código, como você pode ver.

185
00:06:56,310 --> 00:07:00,270
‫Então, vamos copiar tudo isso e entrar em nosso

186
00:07:00,270 --> 00:07:02,090
‫tour e colá-lo aqui.

187
00:07:02,090 --> 00:07:05,240
‫Agora, a anotação estará errada novamente.

188
00:07:05,240 --> 00:07:08,920
‫Então, vamos copiar ou selecionar o que acabamos de colar aqui.

189
00:07:08,920 --> 00:07:11,990
‫E então tudo, exceto a primeira linha, está incorreto.

190
00:07:11,990 --> 00:07:14,490
‫Mas tudo o que precisamos fazer aqui é adicionar mais uma guia.

191
00:07:15,400 --> 00:07:16,910
‫E é isso.

192
00:07:16,910 --> 00:07:20,420
‫Então, agora eles estão todos dentro deste bloco de conteúdo, todos

193
00:07:20,420 --> 00:07:21,720
‫no mesmo nível.

194
00:07:21,720 --> 00:07:22,920
‫Portanto, seção e

195
00:07:22,920 --> 00:07:23,980
‫seção

196
00:07:23,980 --> 00:07:26,410
‫e, basicamente, todas as seções estão

197
00:07:26,410 --> 00:07:27,700
‫agora no mesmo

198
00:07:27,700 --> 00:07:29,570
‫nível, portanto, são todas irmãs.

199
00:07:29,570 --> 00:07:30,403
‫Excelente.

200
00:07:30,403 --> 00:07:32,650
‫Então, vamos fechar tudo isso de que

201
00:07:32,650 --> 00:07:33,973
‫não precisamos mais.

202
00:07:34,820 --> 00:07:36,070
‫E assim como

203
00:07:36,070 --> 00:07:38,150
‫antes, agora temos essa página estática

204
00:07:38,150 --> 00:07:40,120
‫aqui com todos esses dados estáticos.

205
00:07:40,120 --> 00:07:43,310
‫Sabemos que teremos que ir em frente e substituir.

206
00:07:43,310 --> 00:07:44,700
‫Mas antes de fazer isso,

207
00:07:44,700 --> 00:07:46,960
‫vamos apenas dar uma olhada se nossa rota

208
00:07:46,960 --> 00:07:48,173
‫já está funcionando.

209
00:07:49,670 --> 00:07:50,840
‫OK.

210
00:07:50,840 --> 00:07:52,600
‫Então, vamos recarregá-lo e

211
00:07:52,600 --> 00:07:54,700
‫isso nos dá o mesmo erro.

212
00:07:54,700 --> 00:07:55,690
‫E eu acho

213
00:07:55,690 --> 00:07:56,970
‫que é porque aqui

214
00:07:56,970 --> 00:07:58,720
‫nós temos tours e não tour como

215
00:07:58,720 --> 00:08:00,673
‫eu acho que temos em nosso roteiro.

216
00:08:03,410 --> 00:08:04,800
‫Bem aqui temos um tour.

217
00:08:04,800 --> 00:08:07,560
‫E é assim que faz sentido.

218
00:08:07,560 --> 00:08:10,443
‫E então vamos mudar isso aqui em nossa

219
00:08:11,480 --> 00:08:12,313
‫visão geral.

220
00:08:13,690 --> 00:08:14,950
‫Ok e aqui

221
00:08:14,950 --> 00:08:16,670
‫nós realmente queremos uma turnê.

222
00:08:16,670 --> 00:08:17,680
‫Na verdade,

223
00:08:17,680 --> 00:08:19,950
‫estamos vendo apenas uma turnê e

224
00:08:19,950 --> 00:08:21,333
‫não várias turnês.

225
00:08:22,460 --> 00:08:23,570
‫Direito?

226
00:08:23,570 --> 00:08:25,800
‫E se voltarmos para a visão

227
00:08:25,800 --> 00:08:27,940
‫geral agora, carregarmos e abrirmos

228
00:08:27,940 --> 00:08:29,800
‫The Forest Hiker,

229
00:08:29,800 --> 00:08:32,500
‫então você verá que será uma turnê.

230
00:08:32,500 --> 00:08:33,420
‫E então,

231
00:08:33,420 --> 00:08:35,533
‫é claro, obtemos o HTML

232
00:08:35,533 --> 00:08:38,160
‫para a página que acabamos de criar.

233
00:08:38,160 --> 00:08:41,360
‫Agora, por algum motivo, o CSS não está aqui.

234
00:08:41,360 --> 00:08:42,860
‫Vamos apenas tentar recarregar isso.

235
00:08:44,410 --> 00:08:46,100
‫Bem, o que está acontecendo aqui?

236
00:08:46,100 --> 00:08:48,340
‫Vamos tentar inspecionar isso.

237
00:08:48,340 --> 00:08:50,440
‫E vejo que temos alguns erros.

238
00:08:50,440 --> 00:08:52,510
‫Então podemos clicar nisso.

239
00:08:52,510 --> 00:08:55,000
‫E então a razão para o CSS ausente,

240
00:08:55,000 --> 00:08:57,630
‫porque em vez disso, ele está tentando carregar o arquivo

241
00:08:57,630 --> 00:08:58,640
‫no lugar errado.

242
00:08:58,640 --> 00:09:01,320
‫Então, ele está tentando carregá-lo na pasta CSS dentro

243
00:09:01,320 --> 00:09:02,310
‫do tour.

244
00:09:02,310 --> 00:09:04,890
‫Mas é claro que isso não existe.

245
00:09:04,890 --> 00:09:05,950
‫E isso é

246
00:09:05,950 --> 00:09:08,430
‫porque estamos aqui nesta rota de turismo, ok.

247
00:09:08,430 --> 00:09:10,230
‫E, portanto, precisamos basicamente consertar

248
00:09:10,230 --> 00:09:13,493
‫a maneira como importamos o CSS em nosso template base.

249
00:09:14,850 --> 00:09:16,113
‫Vamos lá.

250
00:09:18,720 --> 00:09:19,950
‫E aqui,

251
00:09:19,950 --> 00:09:23,070
‫de fato, devemos ter outra barra.

252
00:09:23,070 --> 00:09:25,010
‫Ok, e o mesmo aqui.

253
00:09:25,010 --> 00:09:25,910
‫E isso

254
00:09:25,910 --> 00:09:27,153
‫é exatamente o mesmo

255
00:09:27,153 --> 00:09:30,770
‫motivo que expliquei a você antes na visão geral aqui embaixo.

256
00:09:30,770 --> 00:09:33,930
‫Então, começamos este URL também com uma barra.

257
00:09:33,930 --> 00:09:36,260
‫E, novamente, isso vai começar na

258
00:09:36,260 --> 00:09:38,120
‫raiz da página.

259
00:09:38,120 --> 00:09:40,350
‫E é assim que deve funcionar.

260
00:09:40,350 --> 00:09:43,470
‫E, de fato, o mesmo se aplica a todas as imagens aqui.

261
00:09:43,470 --> 00:09:45,630
‫Portanto, todas as imagens

262
00:09:45,630 --> 00:09:49,080
‫devem sempre começar em relação ao URL raiz.

263
00:09:49,080 --> 00:09:52,030
‫Então, vamos adicionar isso rapidamente aqui a todas essas imagens.

264
00:09:54,800 --> 00:09:55,633
‫E,

265
00:09:55,633 --> 00:09:56,590
‫sim, é isso.

266
00:09:56,590 --> 00:09:57,723
‫Então são todos eles.

267
00:09:58,800 --> 00:09:59,813
‫E

268
00:10:01,020 --> 00:10:02,810
‫assim, com isso corrigimos

269
00:10:02,810 --> 00:10:06,210
‫a visão geral e também este arquivo base.

270
00:10:06,210 --> 00:10:07,950
‫Portanto, se recarregarmos

271
00:10:07,950 --> 00:10:11,610
‫agora, devemos obter acesso ao CSS correto.

272
00:10:11,610 --> 00:10:13,610
‫E, de fato, aqui vamos nós.

273
00:10:13,610 --> 00:10:15,000
‫Há apenas mais um

274
00:10:15,000 --> 00:10:16,610
‫erro que está aqui nesta imagem.

275
00:10:16,610 --> 00:10:17,480
‫E então,

276
00:10:17,480 --> 00:10:19,390
‫novamente, é porque ele está

277
00:10:19,390 --> 00:10:20,830
‫tentando carregá-lo aqui do

278
00:10:20,830 --> 00:10:22,830
‫tour e não da URL raiz.

279
00:10:22,830 --> 00:10:23,663
‫E então,

280
00:10:23,663 --> 00:10:25,563
‫esse problema está aqui no cabeçalho.

281
00:10:27,040 --> 00:10:27,873
‫E então,

282
00:10:27,873 --> 00:10:29,770
‫é claro, aqui também precisamos

283
00:10:29,770 --> 00:10:31,700
‫torná-lo relativo ao caminho da raiz.

284
00:10:31,700 --> 00:10:33,853
‫Provavelmente o mesmo no rodapé.

285
00:10:34,950 --> 00:10:35,783
‫E sim.

286
00:10:37,180 --> 00:10:38,033
‫Tudo bem.

287
00:10:39,320 --> 00:10:41,960
‫Apenas para confirmar isso rapidamente,

288
00:10:41,960 --> 00:10:43,573
‫sim, vamos lá.

289
00:10:45,320 --> 00:10:46,350
‫Excelente.

290
00:10:46,350 --> 00:10:47,830
‫Como mencionei, é

291
00:10:47,830 --> 00:10:49,890
‫claro, isso contém todos os dados

292
00:10:49,890 --> 00:10:52,380
‫estáticos sobre o The Park Camper Tour,

293
00:10:52,380 --> 00:10:54,650
‫que é o que temos no modelo.

294
00:10:54,650 --> 00:10:57,140
‫Mas estamos olhando para o caminhante da floresta.

295
00:10:57,140 --> 00:11:01,060
‫E então, vamos começar corrigindo nosso modelo e,

296
00:11:01,060 --> 00:11:04,663
‫basicamente, usando os dados dinâmicos bem aqui.

297
00:11:07,620 --> 00:11:10,720
‫Portanto, lembre-se de que a variável que passamos aqui é

298
00:11:10,720 --> 00:11:12,053
‫chamada de tour.

299
00:11:13,210 --> 00:11:14,043
‫Direito?

300
00:11:14,043 --> 00:11:15,480
‫Então, é simplesmente chamado

301
00:11:15,480 --> 00:11:18,100
‫de tour e é assim que temos que chamá-lo aqui.

302
00:11:18,100 --> 00:11:18,933
‫Então faça um tour. nome, e

303
00:11:19,997 --> 00:11:20,883
‫também o mesmo aqui.

304
00:11:21,720 --> 00:11:23,600
‫E agora você já sabe que precisamos usar

305
00:11:23,600 --> 00:11:24,630
‫uma string de

306
00:11:24,630 --> 00:11:26,840
‫modelo aqui porque, de fato, queremos criar uma string.

307
00:11:26,840 --> 00:11:29,993
‫Assim chamado. Tour.

308
00:11:31,240 --> 00:11:32,463
‫E aqui esse caminho também não está correto.

309
00:11:33,460 --> 00:11:36,543
‫Primeiro de tudo, ele precisa ser uma string de

310
00:11:37,920 --> 00:11:40,530
‫modelo e, em seguida, nossas imagens, vou

311
00:11:40,530 --> 00:11:42,250
‫escrever tours de imagem,

312
00:11:42,250 --> 00:11:45,000
‫barra, barra o nome da imagem da capa.

313
00:11:46,280 --> 00:11:48,983
‫Então, ponto turístico, e agora não me

314
00:11:52,140 --> 00:11:53,330
‫lembro se

315
00:11:53,330 --> 00:11:56,880
‫é a capa da imagem ou a imagem da capa.

316
00:11:56,880 --> 00:12:00,080
‫Então sim.

317
00:12:00,080 --> 00:12:01,160
‫Capa da imagem.

318
00:12:01,160 --> 00:12:01,993
‫OK.

319
00:12:03,780 --> 00:12:04,613
‫Então, vamos testar isso rapidamente.

320
00:12:04,613 --> 00:12:07,140
‫E então lembre-se, estamos no The First Hiker.

321
00:12:07,140 --> 00:12:09,830
‫E agora esse deve ser o nome.

322
00:12:09,830 --> 00:12:11,580
‫E mais um erro.

323
00:12:12,710 --> 00:12:14,480
‫Portanto, diz aqui, não é possível ler o tour

324
00:12:14,480 --> 00:12:15,450
‫de propriedade de indefinido.

325
00:12:15,450 --> 00:12:19,310
‫Então vamos voltar e

326
00:12:19,310 --> 00:12:21,020
‫sim.

327
00:12:21,890 --> 00:12:22,770
‫Então aqui está este erro estúpido.

328
00:12:22,770 --> 00:12:27,900
‫Portanto, é claro que é uma turnê. nome e não nome.

329
00:12:27,900 --> 00:12:27,900
‫Tour.

330
00:12:27,900 --> 00:12:30,420
‫Então, o que eu estava

331
00:12:30,420 --> 00:12:31,290
‫pensando lá?

332
00:12:31,290 --> 00:12:32,663
‫Vamos recarregar isso e agora,

333
00:12:33,980 --> 00:12:34,910
‫de fato, temos

334
00:12:34,910 --> 00:12:37,820
‫The Forest Hiker com essa imagem de capa bem legal no fundo.

335
00:12:37,820 --> 00:12:41,980
‫Excelente.

336
00:12:41,980 --> 00:12:42,813
‫E vamos continuar andando aqui.

337
00:12:42,813 --> 00:12:44,373
‫Portanto, crie mais uma string de modelo.

338
00:12:45,550 --> 00:12:47,723
‫Tour.

339
00:12:49,980 --> 00:12:50,813
‫Duração e depois

340
00:12:52,320 --> 00:12:53,343
‫o número de dias.

341
00:12:55,421 --> 00:12:57,680
‫Então, aqui embaixo, temos novamente o local

342
00:12:57,680 --> 00:12:58,560
‫de início.

343
00:12:58,560 --> 00:13:03,930
‫Então, tour.

344
00:13:03,930 --> 00:13:05,570
‫localização de início. descrição, lembre-se.

345
00:13:07,000 --> 00:13:09,643
‫Tudo bem.

346
00:13:11,440 --> 00:13:12,520
‫Agora, aqui embaixo, temos

347
00:13:12,520 --> 00:13:14,070
‫essas caixas de visão geral aqui.

348
00:13:14,070 --> 00:13:16,220
‫Então, detalhes da caixa de visão geral.

349
00:13:16,220 --> 00:13:18,110
‫E, como você pode ver, temos

350
00:13:18,110 --> 00:13:19,100
‫quatro caixas

351
00:13:19,100 --> 00:13:21,660
‫iguais aqui, onde a única coisa que muda

352
00:13:21,660 --> 00:13:23,530
‫é o nome do ícone,

353
00:13:23,530 --> 00:13:25,687
‫depois a data e a próxima data.

354
00:13:25,687 --> 00:13:28,810
‫Ok, então aqui o que muda não é a próxima

355
00:13:28,810 --> 00:13:29,643
‫data, o

356
00:13:29,643 --> 00:13:32,140
‫que muda é a descrição das caixas.

357
00:13:32,140 --> 00:13:34,210
‫Então, próxima data,

358
00:13:34,210 --> 00:13:36,540
‫dificuldade, participantes e classificação.

359
00:13:36,540 --> 00:13:38,500
‫Tudo bem.

360
00:13:38,500 --> 00:13:39,350
‫E então,

361
00:13:39,350 --> 00:13:40,260
‫basicamente, este código aqui

362
00:13:40,260 --> 00:13:42,550
‫é sempre o mesmo apenas com três partes que mudam.

363
00:13:42,550 --> 00:13:44,710
‫Portanto, o nome do ícone, a descrição e

364
00:13:44,710 --> 00:13:46,100
‫o valor dessa descrição.

365
00:13:46,100 --> 00:13:49,560
‫E então, já que não gostamos de código repetido,

366
00:13:49,560 --> 00:13:50,393
‫certo?

367
00:13:50,393 --> 00:13:53,510
‫Vamos usar outro recurso do Pug

368
00:13:53,510 --> 00:13:56,070
‫que ainda não usamos,

369
00:13:56,070 --> 00:13:57,410
‫chamado mixins.

370
00:13:57,410 --> 00:13:59,500
‫Portanto, os mixins são basicamente

371
00:13:59,500 --> 00:14:03,060
‫pedaços de código reutilizáveis para os quais podemos passar argumentos.

372
00:14:03,060 --> 00:14:05,060
‫É um pouco como uma função.

373
00:14:05,060 --> 00:14:06,940
‫E também é exatamente como mixins no SAS.

374
00:14:06,940 --> 00:14:10,400
‫Esse é um pré-processador CSS com o qual

375
00:14:10,400 --> 00:14:12,460
‫você deve estar familiarizado.

376
00:14:12,460 --> 00:14:14,370
‫Então, vamos copiar este código aqui para esta caixa de visão geral.

377
00:14:14,370 --> 00:14:17,950
‫Então, copiando.

378
00:14:17,950 --> 00:14:19,200
‫E agora,

379
00:14:19,200 --> 00:14:22,240
‫fora deste bloco, vamos criar um novo mixin.

380
00:14:22,240 --> 00:14:24,353
‫Então escrevemos o mixin e o

381
00:14:25,930 --> 00:14:29,140
‫nome do mixin, que estou chamando de caixa de visão geral.

382
00:14:29,140 --> 00:14:30,793
‫E um pouco como

383
00:14:33,400 --> 00:14:35,200
‫uma função, podemos especificar alguns argumentos.

384
00:14:35,200 --> 00:14:37,200
‫E então lembre-se de

385
00:14:37,200 --> 00:14:41,430
‫como temos a descrição da caixa, então temos o valor dessa descrição

386
00:14:41,430 --> 00:14:43,600
‫e vamos chamá-la de texto aqui.

387
00:14:43,600 --> 00:14:45,283
‫E também o nome do ícone.

388
00:14:46,241 --> 00:14:48,570
‫OK.

389
00:14:48,570 --> 00:14:49,790
‫Agora, vamos copiar esse

390
00:14:49,790 --> 00:14:52,020
‫texto aqui e, claro, isso agora bagunça

391
00:14:53,447 --> 00:14:54,450
‫nossa formatação.

392
00:14:54,450 --> 00:14:56,853
‫Vamos corrigir isso rapidamente.

393
00:14:58,420 --> 00:14:59,980
‫E agora, essas variáveis aqui, elas realmente

394
00:15:02,047 --> 00:15:02,880
‫funcionam como

395
00:15:02,880 --> 00:15:04,320
‫todas as outras variáveis no Pug.

396
00:15:04,320 --> 00:15:07,940
‫Portanto, aqui deve estar o

397
00:15:07,940 --> 00:15:08,773
‫texto.

398
00:15:08,773 --> 00:15:11,563
‫Direito?

399
00:15:13,640 --> 00:15:14,473
‫E esta aqui deve ser a descrição.

400
00:15:14,473 --> 00:15:16,410
‫Descrição tão igual.

401
00:15:18,300 --> 00:15:20,920
‫Bem, aqui é realmente chamado de rótulo no CSS.

402
00:15:20,920 --> 00:15:23,730
‫Então, vamos chamá-lo de rótulo aqui também.

403
00:15:23,730 --> 00:15:26,303
‫Ok, então rótulo, texto e ícone.

404
00:15:28,210 --> 00:15:30,833
‫E aqui também precisamos alterar o nome desse

405
00:15:31,850 --> 00:15:35,280
‫ícone e todos esses nomes de ícone sempre começam com um

406
00:15:35,280 --> 00:15:36,530
‫traço de ícone.

407
00:15:36,530 --> 00:15:38,730
‫E tudo o que realmente precisamos

408
00:15:38,730 --> 00:15:40,630
‫substituir é essa parte.

409
00:15:40,630 --> 00:15:42,350
‫Então, vamos criar novamente uma string de modelo.

410
00:15:42,350 --> 00:15:44,963
‫E então se livre disso.

411
00:15:46,500 --> 00:15:48,493
‫E o ícone.

412
00:15:51,690 --> 00:15:52,943
‫Ok e agora podemos usar isso.

413
00:15:54,000 --> 00:15:56,363
‫Também gostaria de dizer que

414
00:15:57,310 --> 00:15:58,800
‫poderíamos ter exportado

415
00:15:58,800 --> 00:16:03,200
‫esse mixin para outro arquivo e incluído esse arquivo aqui.

416
00:16:03,200 --> 00:16:05,170
‫Mas acho que isso não faz muito sentido.

417
00:16:05,170 --> 00:16:07,040
‫Neste caso, porque

418
00:16:07,040 --> 00:16:09,780
‫não é realmente muito código.

419
00:16:09,780 --> 00:16:11,890
‫De qualquer forma, vamos seguir em frente e

420
00:16:11,890 --> 00:16:12,723
‫usar esse mixin.

421
00:16:12,723 --> 00:16:15,760
‫Deixe-me copiar apenas o nome dele.

422
00:16:15,760 --> 00:16:17,510
‫E aqui, em vez desta caixa de visão geral.

423
00:16:18,490 --> 00:16:22,203
‫E, por enquanto, deixe-me apenas duplicá-lo aqui.

424
00:16:23,290 --> 00:16:25,840
‫Ok, então usamos esse mixin escrevendo

425
00:16:27,290 --> 00:16:29,310
‫plus e, como uma

426
00:16:29,310 --> 00:16:31,220
‫função regular, passamos argumentos

427
00:16:31,220 --> 00:16:33,130
‫vazios para ele.

428
00:16:33,130 --> 00:16:35,340
‫E assim nossa primeira caixa de visão geral é a próxima data.

429
00:16:35,340 --> 00:16:38,043
‫Então, por enquanto, apenas a data que está aqui.

430
00:16:41,150 --> 00:16:43,380
‫Só para poder mostrar que funciona de fato.

431
00:16:43,380 --> 00:16:46,383
‫Portanto, 20 e 21

432
00:16:47,600 --> 00:16:49,480
‫de agosto.

433
00:16:49,480 --> 00:16:50,380
‫E

434
00:16:50,380 --> 00:16:51,363
‫então aqui, calendário.

435
00:16:52,400 --> 00:16:53,510
‫Ok, porque esse é o nome do ícone aqui.

436
00:16:53,510 --> 00:16:56,280
‫E agora devemos obter

437
00:16:56,280 --> 00:16:58,420
‫duas caixas.

438
00:16:58,420 --> 00:16:59,810
‫Portanto, este e

439
00:16:59,810 --> 00:17:01,560
‫este devem ser exatamente iguais.

440
00:17:01,560 --> 00:17:03,740
‫Portanto, vamos confirmar isso rapidamente.

441
00:17:03,740 --> 00:17:05,800
‫E então podemos seguir em frente

442
00:17:05,800 --> 00:17:07,830
‫para usar o mixin apropriadamente.

443
00:17:07,830 --> 00:17:10,103
‫E sim, então aqui estão nossas duas

444
00:17:11,220 --> 00:17:12,240
‫caixas exatamente iguais.

445
00:17:12,240 --> 00:17:15,163
‫Excelente.

446
00:17:16,450 --> 00:17:17,490
‫Então, vamos nos livrar deste primeiro.

447
00:17:17,490 --> 00:17:20,203
‫E, claro, aqui queremos a

448
00:17:24,450 --> 00:17:25,760
‫data real.

449
00:17:25,760 --> 00:17:27,233
‫OK.

450
00:17:28,540 --> 00:17:29,410
‫E

451
00:17:29,410 --> 00:17:33,960
‫então, adicione o tour. início, datas, zero.

452
00:17:33,960 --> 00:17:34,793
‫Então, vamos dar uma olhada nisso.

453
00:17:36,450 --> 00:17:37,283
‫E lembre-se de

454
00:17:38,330 --> 00:17:39,910
‫que isso vai parecer um pouco estranho.

455
00:17:39,910 --> 00:17:41,310
‫Como antes.

456
00:17:41,310 --> 00:17:43,410
‫OK.

457
00:17:43,410 --> 00:17:45,083
‫Então, vamos em frente e consertar isso.

458
00:17:45,920 --> 00:17:46,860
‫Então, vamos realmente prosseguir a partir daqui.

459
00:17:46,860 --> 00:17:49,820
‫E então o que precisamos

460
00:17:49,820 --> 00:17:52,503
‫é basicamente isso.

461
00:17:53,610 --> 00:17:55,220
‫Agora, não quero

462
00:17:55,220 --> 00:17:57,603
‫deixar essa linha aqui muito

463
00:17:59,370 --> 00:18:01,290
‫longa simplesmente colando-a aqui.

464
00:18:01,290 --> 00:18:02,300
‫E então por que

465
00:18:02,300 --> 00:18:04,800
‫não apenas criar uma nova variável de script java para isso.

466
00:18:04,800 --> 00:18:06,700
‫Portanto, lembre-se de que precisamos usar essa

467
00:18:06,700 --> 00:18:08,560
‫sintaxe aqui para criar um

468
00:18:08,560 --> 00:18:11,100
‫código de script java que não produza nenhuma saída.

469
00:18:11,100 --> 00:18:12,910
‫E, novamente, podemos

470
00:18:12,910 --> 00:18:15,083
‫simplesmente escrever java script aqui.

471
00:18:16,780 --> 00:18:17,613
‫OK.

472
00:18:17,613 --> 00:18:20,133
‫E agora aqui vou simplesmente usar essa

473
00:18:21,060 --> 00:18:21,893
‫data.

474
00:18:21,893 --> 00:18:24,780
‫Excelente.

475
00:18:24,780 --> 00:18:26,240
‫E agora vamos apenas duplicar isso aqui algumas vezes para

476
00:18:26,240 --> 00:18:27,073
‫todas as caixas que temos.

477
00:18:27,073 --> 00:18:29,470
‫Portanto, o primeiro é para dificuldade.

478
00:18:29,470 --> 00:18:31,610
‫E o ícone está aumentando.

479
00:18:31,610 --> 00:18:33,623
‫Em seguida, o próximo é para os participantes.

480
00:18:37,150 --> 00:18:38,833
‫Com o ícone do usuário.

481
00:18:41,970 --> 00:18:44,483
‫E o último é a classificação.

482
00:18:48,040 --> 00:18:50,220
‫E o ícone é uma estrela.

483
00:18:50,220 --> 00:18:52,383
‫Então, aqui temos a data, mas, aqui na

484
00:18:58,010 --> 00:18:59,403
‫dificuldade, realmente temos o tour. dificuldade.

485
00:19:00,540 --> 00:19:02,770
‫Então, aqui para

486
00:19:02,770 --> 00:19:05,080
‫os participantes, queremos esta corda.

487
00:19:06,860 --> 00:19:07,860
‫Tipo 10 pessoas.

488
00:19:09,149 --> 00:19:10,810
‫Portanto, uma string

489
00:19:10,810 --> 00:19:12,740
‫de modelo dizendo tour. mix, tamanho

490
00:19:12,740 --> 00:19:14,053
‫do

491
00:19:15,160 --> 00:19:19,120
‫grupo e, em seguida, pessoas.

492
00:19:21,327 --> 00:19:22,940
‫E, finalmente, queremos a classificação e, em

493
00:19:22,940 --> 00:19:23,823
‫seguida, de cinco.

494
00:19:24,740 --> 00:19:25,573
‫Então faça

495
00:19:26,950 --> 00:19:28,570
‫um tour, e eu nunca

496
00:19:28,570 --> 00:19:30,850
‫vou me lembrar como chamei esse campo.

497
00:19:30,850 --> 00:19:32,333
‫E é a média de classificações.

498
00:19:37,130 --> 00:19:38,530
‫Tudo bem.

499
00:19:38,530 --> 00:19:40,730
‫E então, de

500
00:19:40,730 --> 00:19:44,673
‫cinco.

501
00:19:49,730 --> 00:19:50,563
‫OK.

502
00:19:50,563 --> 00:19:51,396
‫E deve ser isso.

503
00:19:51,396 --> 00:19:52,380
‫Agora podemos nos livrar de todo esse código.

504
00:19:52,380 --> 00:19:53,213
‫E assim fica muito melhor.

505
00:19:54,560 --> 00:19:55,393
‫E

506
00:19:55,393 --> 00:19:56,530
‫apenas para ter

507
00:19:56,530 --> 00:19:58,660
‫certeza de que funciona, vamos salvar

508
00:19:58,660 --> 00:20:01,760
‫aqui, recarregar e, de fato, ficaremos com facilidade,

509
00:20:01,760 --> 00:20:03,820
‫25 pessoas, e a pontuação

510
00:20:03,820 --> 00:20:05,203
‫de cinco em cinco.

511
00:20:06,370 --> 00:20:08,140
‫Impressionante.

512
00:20:08,140 --> 00:20:09,350
‫Já cobrimos muito terreno,

513
00:20:09,350 --> 00:20:12,170
‫mas vamos dividir este vídeo em dois e continuar com

514
00:20:12,170 --> 00:20:13,453
‫o resto da página

515
00:20:14,360 --> 00:20:15,193
‫no próximo.