1
00:00:01,240 --> 00:00:03,170
‫-: En este video y en

2
00:00:03,170 --> 00:00:06,540
‫el siguiente, juntos crearemos la página de detalles de la gira.

3
00:00:06,540 --> 00:00:07,500
‫Y en

4
00:00:07,500 --> 00:00:09,930
‫el camino aprenderás más técnicas de

5
00:00:09,930 --> 00:00:12,107
‫Pug como condicionales y mixins.

6
00:00:14,120 --> 00:00:15,840
‫Y como les mostré antes,

7
00:00:15,840 --> 00:00:19,760
‫así es como se ve realmente la página de detalles del recorrido.

8
00:00:19,760 --> 00:00:22,590
‫Y eso es lo que vamos a construir en

9
00:00:22,590 --> 00:00:24,640
‫este video y en el siguiente.

10
00:00:24,640 --> 00:00:26,180
‫Ahora, lo único que

11
00:00:26,180 --> 00:00:27,550
‫dejaremos para un

12
00:00:27,550 --> 00:00:29,490
‫poco más tarde es este mapa.

13
00:00:29,490 --> 00:00:31,060
‫Está bien, pero todo lo

14
00:00:31,060 --> 00:00:33,760
‫demás lo vamos a construir en estas conferencias sobre herramientas.

15
00:00:33,760 --> 00:00:35,873
‫Incluyendo estas revisiones.

16
00:00:37,510 --> 00:00:39,070
‫Está bien.

17
00:00:39,070 --> 00:00:41,830
‫Así que ahora mismo tenemos nuestra descripción general

18
00:00:41,830 --> 00:00:43,350
‫y, por supuesto,

19
00:00:43,350 --> 00:00:46,270
‫tenemos estos botones con las URL ya creadas.

20
00:00:46,270 --> 00:00:49,430
‫Pero luego, cuando intentamos acceder a esta

21
00:00:49,430 --> 00:00:51,380
‫página, obtenemos este error.

22
00:00:51,380 --> 00:00:52,380
‫Está bien.

23
00:00:52,380 --> 00:00:55,170
‫Así que volvamos a nuestro código VS

24
00:00:55,170 --> 00:00:57,470
‫y realmente quiero comenzar esto con

25
00:00:57,470 --> 00:00:59,650
‫un pequeño desafío para ti.

26
00:00:59,650 --> 00:01:00,820
‫Entonces, lo que quiero

27
00:01:00,820 --> 00:01:03,310
‫que hagas es crear una ruta para la página

28
00:01:03,310 --> 00:01:06,180
‫de detalles de acuerdo con la URL que acabamos de construir.

29
00:01:06,180 --> 00:01:07,370
‫Y será similar

30
00:01:07,370 --> 00:01:09,100
‫a lo que ya tenemos

31
00:01:09,100 --> 00:01:11,640
‫aquí, pero tienes que modificarlo un poco.

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

33
00:01:12,473 --> 00:01:13,306
‫Suficiente de

34
00:01:13,306 --> 00:01:16,120
‫eso, también quiero que construyas este controlador.

35
00:01:16,120 --> 00:01:17,530
‫Así que ponte manos a la obra.

36
00:01:17,530 --> 00:01:19,370
‫Porque ahora mismo solo tenemos

37
00:01:19,370 --> 00:01:20,910
‫este marcador de posición.

38
00:01:20,910 --> 00:01:23,410
‫Así que déjame darte los pasos aquí.

39
00:01:23,410 --> 00:01:25,130
‫Y como siempre,

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

41
00:01:26,660 --> 00:01:29,120
‫necesitamos obtener los datos.

42
00:01:29,120 --> 00:01:31,093
‫Esta vez para el tour solicitado.

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

44
00:01:35,313 --> 00:01:37,360
‫tenga en cuenta que en realidad necesitamos las reseñas

45
00:01:37,360 --> 00:01:38,693
‫aquí y también los guías turísticos.

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

47
00:01:45,890 --> 00:01:46,723
‫Entonces, nuevamente

48
00:01:46,723 --> 00:01:48,700
‫echemos un vistazo a eso.

49
00:01:48,700 --> 00:01:51,140
‫Entonces tenemos estos guías turísticos aquí.

50
00:01:51,140 --> 00:01:54,230
‫Correcto, por lo que básicamente son un conjunto de datos separado.

51
00:01:54,230 --> 00:01:55,550
‫Entonces usuarios.

52
00:01:55,550 --> 00:01:57,933
‫Y luego aquí también tenemos las reseñas.

53
00:01:59,380 --> 00:02:00,730
‫Ahora, estos guías turísticos

54
00:02:00,730 --> 00:02:03,330
‫aquí, creo que en realidad se completan automáticamente

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

56
00:02:04,400 --> 00:02:06,930
‫Así que echemos un vistazo a eso muy rápido.

57
00:02:06,930 --> 00:02:08,270
‫Así que el

58
00:02:09,610 --> 00:02:11,450
‫modelo de gira y así,

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

60
00:02:12,283 --> 00:02:13,116
‫Entonces, aquí

61
00:02:13,116 --> 00:02:14,400
‫abajo, tenemos este autocompletado

62
00:02:14,400 --> 00:02:16,600
‫cada vez que hay una consulta de búsqueda,

63
00:02:16,600 --> 00:02:18,070
‫pero solo para las guías.

64
00:02:18,070 --> 00:02:20,160
‫Por tanto, no olvide rellenar también

65
00:02:20,160 --> 00:02:21,173
‫las reseñas.

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

67
00:02:23,450 --> 00:02:24,513
‫Luego, después

68
00:02:25,900 --> 00:02:27,120
‫de eso, crearemos una

69
00:02:27,120 --> 00:02:29,670
‫plantilla, pero lo haremos juntos bien, así que

70
00:02:29,670 --> 00:02:31,470
‫no necesito que hagas esta parte.

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

72
00:02:35,220 --> 00:02:38,030
‫quiero que complete esta parte aquí también.

73
00:02:38,030 --> 00:02:38,950
‫Entonces renderice

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

75
00:02:42,130 --> 00:02:43,510
‫plantilla usando los

76
00:02:44,930 --> 00:02:47,050
‫datos del paso uno nuevamente.

77
00:02:47,050 --> 00:02:48,580
‫Está bien.

78
00:02:48,580 --> 00:02:50,120
‫Así que eso también es muy simple.

79
00:02:50,120 --> 00:02:51,300
‫Entonces, lo que quiero

80
00:02:51,300 --> 00:02:52,870
‫que hagas es crear la ruta

81
00:02:52,870 --> 00:02:54,410
‫y luego también obtener los datos.

82
00:02:54,410 --> 00:02:57,763
‫De acuerdo, pausa el video aquí y buena suerte con eso.

83
00:03:01,540 --> 00:03:03,280
‫Así que espero que

84
00:03:03,280 --> 00:03:05,950
‫lo hayas hecho y, para avisarme, resuélvelo aquí.

85
00:03:05,950 --> 00:03:08,090
‫Y comenzaremos con la ruta.

86
00:03:08,090 --> 00:03:11,360
‫Y ahora todo lo que necesitamos agregar aquí es esta babosa.

87
00:03:11,360 --> 00:03:14,510
‫Y, por supuesto, lo estamos haciendo como un parámetro de URL.

88
00:03:14,510 --> 00:03:17,693
‫Así que así, llamándolo babosa.

89
00:03:18,885 --> 00:03:21,150
‫Entonces, antes de usar la identificación, ¿verdad?

90
00:03:21,150 --> 00:03:22,660
‫Entonces lo teníamos

91
00:03:22,660 --> 00:03:25,480
‫así y ahora llamémoslo la babosa.

92
00:03:25,480 --> 00:03:26,313
‫Está bien.

93
00:03:26,313 --> 00:03:27,146
‫Porque, de nuevo,

94
00:03:27,146 --> 00:03:29,560
‫así es como se ve la página de descripción general.

95
00:03:29,560 --> 00:03:32,413
‫Tenemos gira slash slug básicamente.

96
00:03:33,780 --> 00:03:36,100
‫Bien, y eso es lo

97
00:03:36,100 --> 00:03:39,460
‫que usaremos para crear el recorrido en el controlador.

98
00:03:39,460 --> 00:03:41,500
‫Así que hagámoslo ahora aquí.

99
00:03:41,500 --> 00:03:44,460
‫Así que const,

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

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

102
00:03:53,440 --> 00:03:56,540
‫Entonces, esta vez no podemos usar buscar por ID.

103
00:03:56,540 --> 00:03:58,330
‫Bueno, porque no conocemos

104
00:03:58,330 --> 00:04:00,130
‫la identificación de la gira.

105
00:04:00,130 --> 00:04:01,030
‫Y así,

106
00:04:01,030 --> 00:04:04,040
‫en cambio, estamos buscando por la babosa.

107
00:04:04,040 --> 00:04:05,140
‫Y la

108
00:04:06,140 --> 00:04:07,540
‫babosa es como espero

109
00:04:07,540 --> 00:04:09,940
‫que sepas pedir. params

110
00:04:09,940 --> 00:04:12,960
‫dot slug está bien.

111
00:04:12,960 --> 00:04:15,180
‫Y ahora, finalmente, eso es todo para

112
00:04:16,570 --> 00:04:18,263
‫llenar el campo de matrices.

113
00:04:19,390 --> 00:04:20,223
‫Está bien.

114
00:04:21,540 --> 00:04:24,063
‫Entonces, el camino para poblar son las revisiones.

115
00:04:25,080 --> 00:04:27,690
‫Y de hecho no necesitamos todos los campos aquí.

116
00:04:27,690 --> 00:04:29,890
‫Así que especifiquemos los que necesitamos.

117
00:04:30,810 --> 00:04:32,480
‫Y entonces, eso es

118
00:04:32,480 --> 00:04:34,023
‫solo la revisión, la

119
00:04:35,200 --> 00:04:36,113
‫calificación

120
00:04:37,290 --> 00:04:38,450
‫y el usuario.

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

122
00:04:39,283 --> 00:04:40,600
‫que en realidad mostramos

123
00:04:41,500 --> 00:04:44,490
‫el nombre de usuario y la foto de usuario.

124
00:04:44,490 --> 00:04:45,460
‫Y luego, por

125
00:04:45,460 --> 00:04:47,873
‫supuesto, la revisión en sí y la calificación.

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

127
00:04:50,898 --> 00:04:51,910
‫Luego, por

128
00:04:51,910 --> 00:04:54,604
‫supuesto, se queja de que no usamos async.

129
00:04:54,604 --> 00:04:56,763
‫Y, por supuesto, no lo iba a olvidar.

130
00:04:58,140 --> 00:04:59,300
‫Pero de todos modos

131
00:04:59,300 --> 00:05:02,290
‫es bueno que ES Line nos advierta sobre este tipo de errores.

132
00:05:02,290 --> 00:05:04,660
‫Realmente elimina muchos errores

133
00:05:04,660 --> 00:05:06,353
‫del desarrollo.

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

135
00:05:08,713 --> 00:05:09,770
‫Y luego

136
00:05:09,770 --> 00:05:12,030
‫aquí, por supuesto, vamos a pasar esa

137
00:05:12,030 --> 00:05:14,660
‫variable de recorrido a nuestra plantilla de recorrido.

138
00:05:14,660 --> 00:05:16,240
‫Así que ese.

139
00:05:16,240 --> 00:05:17,380
‫Dale una oportunidad.

140
00:05:17,380 --> 00:05:19,010
‫No más errores.

141
00:05:19,010 --> 00:05:21,590
‫Y esa parte ahora está completa.

142
00:05:21,590 --> 00:05:22,940
‫Entonces, todo lo que

143
00:05:22,940 --> 00:05:26,420
‫tenemos que hacer ahora es seguir adelante y crear nuestra plantilla.

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

145
00:05:27,730 --> 00:05:28,940
‫Entonces, ya

146
00:05:28,940 --> 00:05:30,920
‫deberíamos tener eso aquí.

147
00:05:30,920 --> 00:05:32,193
‫Y esos son los datos de los desarrolladores.

148
00:05:33,050 --> 00:05:34,230
‫Entonces tenemos muchas

149
00:05:34,230 --> 00:05:35,490
‫carpetas y muchos datos.

150
00:05:35,490 --> 00:05:37,370
‫Y puede volverse un poco

151
00:05:37,370 --> 00:05:39,090
‫confuso en algún momento.

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

153
00:05:39,923 --> 00:05:40,923
‫Entonces,

154
00:05:41,780 --> 00:05:45,310
‫eliminemos este contenido de marcador de posición aquí.

155
00:05:45,310 --> 00:05:47,510
‫Y antes de hacer cualquier

156
00:05:47,510 --> 00:05:51,690
‫otra cosa, echemos un vistazo nuevamente al archivo HTML original.

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

158
00:05:53,510 --> 00:05:55,900
‫carpeta pública que acabo de cerrar.

159
00:05:55,900 --> 00:05:58,080
‫De hecho, cerremos todos estos aquí, porque

160
00:05:59,180 --> 00:06:00,980
‫lo encuentro realmente confuso.

161
00:06:03,150 --> 00:06:05,470
‫Bien, los modelos también.

162
00:06:05,470 --> 00:06:08,290
‫Y ahora lo que necesitamos es público y

163
00:06:08,290 --> 00:06:09,893
‫luego gira. html.

164
00:06:12,180 --> 00:06:14,950
‫Así que el encabezado ya lo tenemos, por supuesto.

165
00:06:14,950 --> 00:06:16,970
‫Y luego aquí va todo el contenido.

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

167
00:06:17,803 --> 00:06:18,880
‫todas estas secciones

168
00:06:18,880 --> 00:06:20,070
‫que tenemos en nuestra

169
00:06:20,070 --> 00:06:23,110
‫página, por supuesto, están traducidas aquí como HTML.

170
00:06:23,110 --> 00:06:24,360
‫Y al igual

171
00:06:24,360 --> 00:06:26,830
‫que antes, en realidad ya creé

172
00:06:26,830 --> 00:06:30,649
‫una plantilla de Pug basada en todo este código HTML.

173
00:06:30,649 --> 00:06:33,390
‫Muy bien, no querríamos traducir

174
00:06:33,390 --> 00:06:35,630
‫esto aquí manualmente juntos.

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

176
00:06:36,640 --> 00:06:40,050
‫Así que ya lo tengo aquí en este archivo de plantilla.

177
00:06:40,050 --> 00:06:40,883
‫Pero, por

178
00:06:40,883 --> 00:06:42,630
‫supuesto, de nuevo, si te

179
00:06:42,630 --> 00:06:44,020
‫apetece, puedes pausar el

180
00:06:44,020 --> 00:06:46,113
‫video ahora y traducirlo tú mismo también.

181
00:06:47,010 --> 00:06:47,843
‫Está bien.

182
00:06:47,843 --> 00:06:49,870
‫Pero lo que voy a hacer ahora es

183
00:06:49,870 --> 00:06:51,850
‫seguir adelante y copiar todo este código.

184
00:06:51,850 --> 00:06:54,933
‫Que sigue siendo un montón de código como puede ver.

185
00:06:56,310 --> 00:07:00,270
‫Copiemos todo esto, vayamos a nuestro recorrido y

186
00:07:00,270 --> 00:07:02,090
‫peguemos eso aquí.

187
00:07:02,090 --> 00:07:05,240
‫Ahora la anotación volverá a estar mal.

188
00:07:05,240 --> 00:07:08,920
‫Copiemos, o seleccionemos lo que acabamos de pegar aquí.

189
00:07:08,920 --> 00:07:11,990
‫Entonces, todo excepto la primera línea es incorrecto.

190
00:07:11,990 --> 00:07:14,490
‫Pero todo lo que tenemos que hacer aquí es agregar una pestaña más.

191
00:07:15,400 --> 00:07:16,910
‫Y eso es.

192
00:07:16,910 --> 00:07:20,420
‫Así que ahora están todos dentro de este bloque de contenido

193
00:07:20,420 --> 00:07:21,720
‫al mismo nivel.

194
00:07:21,720 --> 00:07:22,920
‫Así que la sección

195
00:07:22,920 --> 00:07:23,980
‫y la

196
00:07:23,980 --> 00:07:26,410
‫sección y básicamente todas las secciones están ahora

197
00:07:26,410 --> 00:07:27,700
‫en el mismo nivel,

198
00:07:27,700 --> 00:07:29,570
‫por lo que todas son hermanas.

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

200
00:07:30,403 --> 00:07:32,650
‫Así que cerremos todos estos que

201
00:07:32,650 --> 00:07:33,973
‫ya no necesitamos.

202
00:07:34,820 --> 00:07:36,070
‫Y así, como

203
00:07:36,070 --> 00:07:38,150
‫antes, ahora tenemos esta página estática

204
00:07:38,150 --> 00:07:40,120
‫aquí con todos estos datos estáticos.

205
00:07:40,120 --> 00:07:43,310
‫Que sabemos que tendremos que seguir adelante con un reemplazo.

206
00:07:43,310 --> 00:07:44,700
‫Pero antes de hacer

207
00:07:44,700 --> 00:07:46,960
‫eso, echemos un vistazo si nuestra ruta

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

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

210
00:07:50,840 --> 00:07:52,600
‫Así que vamos a recargarlo

211
00:07:52,600 --> 00:07:54,700
‫y eso nos da el mismo error.

212
00:07:54,700 --> 00:07:55,690
‫Y supongo

213
00:07:55,690 --> 00:07:56,970
‫que es porque aquí

214
00:07:56,970 --> 00:07:58,720
‫tenemos giras y no giras como

215
00:07:58,720 --> 00:08:00,673
‫creo que lo tenemos en nuestra ruta.

216
00:08:03,410 --> 00:08:04,800
‫Así que aquí tenemos un recorrido.

217
00:08:04,800 --> 00:08:07,560
‫Y esa es realmente la forma en que tiene sentido.

218
00:08:07,560 --> 00:08:10,443
‫Así que sigamos adelante y cambiemos eso aquí en nuestra

219
00:08:11,480 --> 00:08:12,313
‫descripción general.

220
00:08:13,690 --> 00:08:14,950
‫De acuerdo,

221
00:08:14,950 --> 00:08:16,670
‫aquí realmente queremos una gira.

222
00:08:16,670 --> 00:08:17,680
‫Porque, de

223
00:08:17,680 --> 00:08:19,950
‫hecho, en realidad solo estamos viendo un

224
00:08:19,950 --> 00:08:21,333
‫recorrido y no múltiples recorridos.

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

226
00:08:23,570 --> 00:08:25,800
‫Entonces, si volvemos a la descripción

227
00:08:25,800 --> 00:08:27,940
‫general ahora, lo cargamos y

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

229
00:08:29,800 --> 00:08:32,500
‫Hiker, entonces verá que será un recorrido.

230
00:08:32,500 --> 00:08:33,420
‫Y luego,

231
00:08:33,420 --> 00:08:35,533
‫por supuesto, obtenemos el HTML

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

233
00:08:38,160 --> 00:08:41,360
‫Ahora, por alguna razón, el CSS no está aquí.

234
00:08:41,360 --> 00:08:42,860
‫Intentemos recargar esto.

235
00:08:44,410 --> 00:08:46,100
‫Bueno, ¿qué está pasando aquí?

236
00:08:46,100 --> 00:08:48,340
‫Intentemos inspeccionar esto.

237
00:08:48,340 --> 00:08:50,440
‫Y veo que tenemos un par de errores.

238
00:08:50,440 --> 00:08:52,510
‫Entonces podemos hacer clic en eso.

239
00:08:52,510 --> 00:08:55,000
‫Y entonces la razón de la falta de CSS, porque

240
00:08:55,000 --> 00:08:57,630
‫en su lugar está tratando de cargar el archivo en

241
00:08:57,630 --> 00:08:58,640
‫el lugar equivocado.

242
00:08:58,640 --> 00:09:01,320
‫Entonces está tratando de cargarlo en la carpeta CSS

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

244
00:09:02,310 --> 00:09:04,890
‫Pero eso, por supuesto, no existe.

245
00:09:04,890 --> 00:09:05,950
‫Y eso es

246
00:09:05,950 --> 00:09:08,430
‫porque estamos aquí en esta ruta turística, está bien.

247
00:09:08,430 --> 00:09:10,230
‫Entonces, básicamente, necesitamos arreglar la

248
00:09:10,230 --> 00:09:13,493
‫forma en que importamos el CSS en nuestra plantilla base.

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

250
00:09:18,720 --> 00:09:19,950
‫Y aquí,

251
00:09:19,950 --> 00:09:23,070
‫de hecho, deberíamos tener otra barra.

252
00:09:23,070 --> 00:09:25,010
‫Está bien, y lo mismo en realidad aquí.

253
00:09:25,010 --> 00:09:25,910
‫Y eso

254
00:09:25,910 --> 00:09:27,153
‫es exactamente por la

255
00:09:27,153 --> 00:09:30,770
‫misma razón que les expliqué antes en la descripción general aquí abajo.

256
00:09:30,770 --> 00:09:33,930
‫Así que comenzamos esta URL también con una barra.

257
00:09:33,930 --> 00:09:36,260
‫Y nuevamente, eso comenzará en la

258
00:09:36,260 --> 00:09:38,120
‫raíz de la página.

259
00:09:38,120 --> 00:09:40,350
‫Y esa es la forma en que se supone que funciona.

260
00:09:40,350 --> 00:09:43,470
‫Y de hecho, lo mismo se aplica a todas las imágenes aquí.

261
00:09:43,470 --> 00:09:45,630
‫Por lo tanto, todas las

262
00:09:45,630 --> 00:09:49,080
‫imágenes siempre deben comenzar en relación con la URL raíz.

263
00:09:49,080 --> 00:09:52,030
‫Así que agreguemos eso muy rápidamente aquí a todas estas imágenes.

264
00:09:54,800 --> 00:09:55,633
‫Y sí,

265
00:09:55,633 --> 00:09:56,590
‫eso es todo.

266
00:09:56,590 --> 00:09:57,723
‫Así que esos son todos.

267
00:09:58,800 --> 00:09:59,813
‫Y así,

268
00:10:01,020 --> 00:10:02,810
‫con eso, hemos arreglado

269
00:10:02,810 --> 00:10:06,210
‫la descripción general y también este archivo base.

270
00:10:06,210 --> 00:10:07,950
‫Entonces, si ahora

271
00:10:07,950 --> 00:10:11,610
‫recargamos, deberíamos tener acceso al CSS correcto.

272
00:10:11,610 --> 00:10:13,610
‫Y de hecho, aquí vamos.

273
00:10:13,610 --> 00:10:15,000
‫Solo hay un error más

274
00:10:15,000 --> 00:10:16,610
‫que está aquí en esta imagen.

275
00:10:16,610 --> 00:10:17,480
‫Y nuevamente,

276
00:10:17,480 --> 00:10:19,390
‫es porque está tratando de cargarlo

277
00:10:19,390 --> 00:10:20,830
‫aquí desde el recorrido

278
00:10:20,830 --> 00:10:22,830
‫y no desde la URL raíz.

279
00:10:22,830 --> 00:10:23,663
‫Y entonces,

280
00:10:23,663 --> 00:10:25,563
‫ese problema está aquí en el encabezado.

281
00:10:27,040 --> 00:10:27,873
‫Y, por

282
00:10:27,873 --> 00:10:29,770
‫supuesto, aquí también debemos hacerlo

283
00:10:29,770 --> 00:10:31,700
‫relativo a la ruta raíz.

284
00:10:31,700 --> 00:10:33,853
‫Probablemente lo mismo en el pie de página.

285
00:10:34,950 --> 00:10:35,783
‫Y si.

286
00:10:37,180 --> 00:10:38,033
‫Está bien.

287
00:10:39,320 --> 00:10:41,960
‫Solo para confirmar rápidamente eso, sí, de

288
00:10:41,960 --> 00:10:43,573
‫hecho, aquí vamos.

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

290
00:10:46,350 --> 00:10:47,830
‫Entonces, como mencioné,

291
00:10:47,830 --> 00:10:49,890
‫por supuesto, esto tiene todos los

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

293
00:10:52,380 --> 00:10:54,650
‫es el que tenemos en la plantilla.

294
00:10:54,650 --> 00:10:57,140
‫Pero estamos mirando al caminante del bosque.

295
00:10:57,140 --> 00:11:01,060
‫Entonces, comencemos ahora arreglando nuestra plantilla y

296
00:11:01,060 --> 00:11:04,663
‫básicamente usando los datos dinámicos aquí.

297
00:11:07,620 --> 00:11:10,720
‫Entonces, recuerde que la variable que pasamos aquí

298
00:11:10,720 --> 00:11:12,053
‫se llama tour.

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

300
00:11:14,043 --> 00:11:15,480
‫Así que simplemente se

301
00:11:15,480 --> 00:11:18,100
‫llama gira y así es como tenemos que llamarlo aquí.

302
00:11:18,100 --> 00:11:18,933
‫Así que gira. nombre, y

303
00:11:19,997 --> 00:11:20,883
‫también el mismo aquí.

304
00:11:21,720 --> 00:11:23,600
‫Y ahora ya sabe que necesitamos usar

305
00:11:23,600 --> 00:11:24,630
‫una cadena de

306
00:11:24,630 --> 00:11:26,840
‫plantilla aquí porque de hecho queremos crear una cadena.

307
00:11:26,840 --> 00:11:29,993
‫Asi llamado . excursión.

308
00:11:31,240 --> 00:11:32,463
‫Y aquí este camino tampoco es correcto.

309
00:11:33,460 --> 00:11:36,543
‫En primer lugar, debe ser una cadena de plantilla y

310
00:11:37,920 --> 00:11:40,530
‫luego nuestras imágenes, escribiré recorridos de barra inclinada

311
00:11:40,530 --> 00:11:42,250
‫de imagen con barra

312
00:11:42,250 --> 00:11:45,000
‫inclinada el nombre de la imagen de portada.

313
00:11:46,280 --> 00:11:48,983
‫Así que tour dot, y ahora no

314
00:11:52,140 --> 00:11:53,330
‫recuerdo si

315
00:11:53,330 --> 00:11:56,880
‫es la imagen de portada o la imagen de portada.

316
00:11:56,880 --> 00:11:57,933
‫Así

317
00:11:59,000 --> 00:12:00,080
‫que sí.

318
00:12:00,080 --> 00:12:01,160
‫Imagen de portada.

319
00:12:01,160 --> 00:12:01,993
‫Bueno.

320
00:12:03,780 --> 00:12:04,613
‫Así que probemos eso rápidamente.

321
00:12:04,613 --> 00:12:07,140
‫Y recuerda, estamos en The First Hiker.

322
00:12:07,140 --> 00:12:09,830
‫Y ese debería ser ahora el nombre.

323
00:12:09,830 --> 00:12:11,580
‫Y otro error más.

324
00:12:12,710 --> 00:12:14,480
‫Entonces, dice aquí, no se puede leer el recorrido por

325
00:12:14,480 --> 00:12:15,450
‫la propiedad de indefinido.

326
00:12:15,450 --> 00:12:19,310
‫Así que regresemos y

327
00:12:19,310 --> 00:12:21,020
‫sí.

328
00:12:21,890 --> 00:12:22,770
‫Así que aquí está este estúpido error.

329
00:12:22,770 --> 00:12:27,900
‫Así que, por supuesto, es una gira. nombre y no nombre.

330
00:12:27,900 --> 00:12:27,900
‫excursión.

331
00:12:27,900 --> 00:12:30,420
‫Entonces, ¿qué estaba

332
00:12:30,420 --> 00:12:31,290
‫pensando allí?

333
00:12:31,290 --> 00:12:32,663
‫Recarguemos esto y ahora, de

334
00:12:33,980 --> 00:12:34,910
‫hecho, obtenemos The

335
00:12:34,910 --> 00:12:37,820
‫Forest Hiker con esta imagen de portada realmente agradable en el fondo.

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

337
00:12:41,980 --> 00:12:42,813
‫Y sigamos moviéndonos aquí.

338
00:12:42,813 --> 00:12:44,373
‫Así que crea otra cadena de plantilla.

339
00:12:45,550 --> 00:12:47,723
‫Excursión.

340
00:12:49,980 --> 00:12:50,813
‫Duración y luego

341
00:12:52,320 --> 00:12:53,343
‫el número de días.

342
00:12:55,421 --> 00:12:57,680
‫Luego, aquí abajo, tenemos nuevamente la ubicación

343
00:12:57,680 --> 00:12:58,560
‫de inicio.

344
00:12:58,560 --> 00:13:03,930
‫Entonces, gira.

345
00:13:03,930 --> 00:13:05,570
‫ubicación de inicio. descripción, recuerda.

346
00:13:07,000 --> 00:13:09,643
‫Está bien.

347
00:13:11,440 --> 00:13:12,520
‫Ahora aquí abajo tenemos

348
00:13:12,520 --> 00:13:14,070
‫estos cuadros de descripción general aquí.

349
00:13:14,070 --> 00:13:16,220
‫Entonces, detalle del cuadro de descripción general.

350
00:13:16,220 --> 00:13:18,110
‫Y como puede ver, tenemos cuatro

351
00:13:18,110 --> 00:13:19,100
‫casillas iguales

352
00:13:19,100 --> 00:13:21,660
‫aquí donde lo único que cambia es el

353
00:13:21,660 --> 00:13:23,530
‫nombre de este ícono, luego

354
00:13:23,530 --> 00:13:25,687
‫la fecha y la próxima fecha.

355
00:13:25,687 --> 00:13:28,810
‫Bien, entonces aquí lo que cambia no es la próxima

356
00:13:28,810 --> 00:13:29,643
‫fecha, lo

357
00:13:29,643 --> 00:13:32,140
‫que cambia es la descripción de las cajas.

358
00:13:32,140 --> 00:13:34,210
‫Así que la próxima

359
00:13:34,210 --> 00:13:36,540
‫fecha, dificultad, participantes y valoración.

360
00:13:36,540 --> 00:13:38,500
‫Está bien.

361
00:13:38,500 --> 00:13:39,350
‫Básicamente, este

362
00:13:39,350 --> 00:13:40,260
‫código aquí es siempre

363
00:13:40,260 --> 00:13:42,550
‫el mismo solo con tres piezas que cambian.

364
00:13:42,550 --> 00:13:44,710
‫Entonces el nombre del icono, la descripción y

365
00:13:44,710 --> 00:13:46,100
‫el valor de esa descripción.

366
00:13:46,100 --> 00:13:49,560
‫Y así, dado que no nos gusta el código

367
00:13:49,560 --> 00:13:50,393
‫repetido, ¿verdad?

368
00:13:50,393 --> 00:13:53,510
‫Usemos otra característica de Pug que aún

369
00:13:53,510 --> 00:13:56,070
‫no hemos usado y que se

370
00:13:56,070 --> 00:13:57,410
‫llama mixins.

371
00:13:57,410 --> 00:13:59,500
‫Así que los mixins son

372
00:13:59,500 --> 00:14:03,060
‫básicamente piezas de código reutilizables a las que podemos pasar argumentos.

373
00:14:03,060 --> 00:14:05,060
‫Así que un poco como una función.

374
00:14:05,060 --> 00:14:06,940
‫Y también es exactamente como mixins en SAS.

375
00:14:06,940 --> 00:14:10,400
‫Así que ese es un preprocesador de CSS con

376
00:14:10,400 --> 00:14:12,460
‫el que quizás esté familiarizado.

377
00:14:12,460 --> 00:14:14,370
‫Copiemos este código aquí para este cuadro de descripción general.

378
00:14:14,370 --> 00:14:17,950
‫Así que lo copia.

379
00:14:17,950 --> 00:14:19,200
‫Y ahora aquí,

380
00:14:19,200 --> 00:14:22,240
‫fuera de este bloque, creemos un nuevo mixin.

381
00:14:22,240 --> 00:14:24,353
‫Así que escribimos mixin y luego

382
00:14:25,930 --> 00:14:29,140
‫el nombre del mixin, al que llamo cuadro de descripción general.

383
00:14:29,140 --> 00:14:30,793
‫Y luego, un poco como

384
00:14:33,400 --> 00:14:35,200
‫una función, podemos especificar algunos argumentos.

385
00:14:35,200 --> 00:14:37,200
‫Y entonces recuerde cómo

386
00:14:37,200 --> 00:14:41,430
‫tenemos la descripción del cuadro, luego tenemos el valor de esa

387
00:14:41,430 --> 00:14:43,600
‫descripción y llamémoslo texto aquí.

388
00:14:43,600 --> 00:14:45,283
‫Y luego también, el nombre del icono.

389
00:14:46,241 --> 00:14:48,570
‫Bueno.

390
00:14:48,570 --> 00:14:49,790
‫Así que ahora, copiemos

391
00:14:49,790 --> 00:14:52,020
‫ese texto aquí y, por supuesto, esto arruina

392
00:14:53,447 --> 00:14:54,450
‫nuestro formato.

393
00:14:54,450 --> 00:14:56,853
‫Arreglemos eso rápidamente.

394
00:14:58,420 --> 00:14:59,980
‫Y ahora, estas variables aquí, realmente

395
00:15:02,047 --> 00:15:02,880
‫funcionan como

396
00:15:02,880 --> 00:15:04,320
‫todas las demás variables en Pug.

397
00:15:04,320 --> 00:15:07,940
‫Entonces, aquí este debería ser ahora el

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

399
00:15:08,773 --> 00:15:11,563
‫¿Derecha?

400
00:15:13,640 --> 00:15:14,473
‫Y esta debería ser la descripción.

401
00:15:14,473 --> 00:15:16,410
‫Tan igual descripción.

402
00:15:18,300 --> 00:15:20,920
‫Bueno, aquí en realidad se llama etiqueta en el CSS.

403
00:15:20,920 --> 00:15:23,730
‫Así que llamémoslo etiqueta aquí también.

404
00:15:23,730 --> 00:15:26,303
‫Bien, etiqueta, texto e icono.

405
00:15:28,210 --> 00:15:30,833
‫Y aquí también necesitamos cambiar el nombre de ese

406
00:15:31,850 --> 00:15:35,280
‫ícono y todos estos nombres de íconos siempre comienzan con un

407
00:15:35,280 --> 00:15:36,530
‫guión de íconos.

408
00:15:36,530 --> 00:15:38,730
‫Entonces, todo lo que realmente necesitamos

409
00:15:38,730 --> 00:15:40,630
‫reemplazar es esta parte.

410
00:15:40,630 --> 00:15:42,350
‫Así que creemos de nuevo una cadena de plantilla.

411
00:15:42,350 --> 00:15:44,963
‫Y luego deshazte de esto.

412
00:15:46,500 --> 00:15:48,493
‫E icono.

413
00:15:51,690 --> 00:15:52,943
‫Está bien y ahora podemos usar esto.

414
00:15:54,000 --> 00:15:56,363
‫También quería decir que también

415
00:15:57,310 --> 00:15:58,800
‫podríamos haber exportado

416
00:15:58,800 --> 00:16:03,200
‫este mixin a otro archivo y luego incluir ese archivo aquí.

417
00:16:03,200 --> 00:16:05,170
‫Pero creo que esto no tiene mucho sentido.

418
00:16:05,170 --> 00:16:07,040
‫En este caso porque

419
00:16:07,040 --> 00:16:09,780
‫en realidad no es mucho código.

420
00:16:09,780 --> 00:16:11,890
‫De todos modos, sigamos adelante y usemos

421
00:16:11,890 --> 00:16:12,723
‫este mixin.

422
00:16:12,723 --> 00:16:15,760
‫Déjame copiar solo el nombre.

423
00:16:15,760 --> 00:16:17,510
‫Y aquí en lugar de este cuadro de descripción general.

424
00:16:18,490 --> 00:16:22,203
‫Y por ahora permítanme duplicarlo aquí.

425
00:16:23,290 --> 00:16:25,840
‫Bien, usamos este mixin escribiendo

426
00:16:27,290 --> 00:16:29,310
‫plus y luego, como

427
00:16:29,310 --> 00:16:31,220
‫una función regular, le

428
00:16:31,220 --> 00:16:33,130
‫pasamos argumentos vacíos.

429
00:16:33,130 --> 00:16:35,340
‫Entonces, nuestro primer cuadro de descripción general es la próxima fecha.

430
00:16:35,340 --> 00:16:38,043
‫Entonces, por ahora, solo la fecha que está aquí.

431
00:16:41,150 --> 00:16:43,380
‫Así que puedo mostrarte que, de hecho, funciona.

432
00:16:43,380 --> 00:16:46,383
‫Así que el 20 de

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

434
00:16:49,480 --> 00:16:50,380
‫Y

435
00:16:50,380 --> 00:16:51,363
‫luego aquí, calendario.

436
00:16:52,400 --> 00:16:53,510
‫Está bien porque ese es el nombre aquí del icono.

437
00:16:53,510 --> 00:16:56,280
‫Y ahora deberíamos conseguir

438
00:16:56,280 --> 00:16:58,420
‫dos cajas.

439
00:16:58,420 --> 00:16:59,810
‫Así que este

440
00:16:59,810 --> 00:17:01,560
‫y este deberían verse exactamente iguales.

441
00:17:01,560 --> 00:17:03,740
‫Así que confirmemos eso rápidamente.

442
00:17:03,740 --> 00:17:05,800
‫Y entonces podemos pasar a

443
00:17:05,800 --> 00:17:07,830
‫usar el mixin correctamente.

444
00:17:07,830 --> 00:17:10,103
‫Y sí, aquí están nuestras dos cajas

445
00:17:11,220 --> 00:17:12,240
‫exactamente iguales.

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

447
00:17:16,450 --> 00:17:17,490
‫Así que deshagámonos de este primero.

448
00:17:17,490 --> 00:17:20,203
‫Y, por supuesto, aquí queremos la

449
00:17:24,450 --> 00:17:25,760
‫fecha real.

450
00:17:25,760 --> 00:17:27,233
‫Bueno.

451
00:17:28,540 --> 00:17:29,410
‫Y

452
00:17:29,410 --> 00:17:33,960
‫eso es, agregue tour. inicio, fechas, cero.

453
00:17:33,960 --> 00:17:34,793
‫Así que echemos un vistazo a eso.

454
00:17:36,450 --> 00:17:37,283
‫Y recuerde,

455
00:17:38,330 --> 00:17:39,910
‫esto se verá un poco extraño.

456
00:17:39,910 --> 00:17:41,310
‫Como lo hizo antes.

457
00:17:41,310 --> 00:17:43,410
‫Bueno.

458
00:17:43,410 --> 00:17:45,083
‫Así que sigamos adelante y arreglemos eso.

459
00:17:45,920 --> 00:17:46,860
‫Así que tomemos eso de aquí.

460
00:17:46,860 --> 00:17:49,820
‫Entonces, lo que necesitamos

461
00:17:49,820 --> 00:17:52,503
‫es básicamente esto.

462
00:17:53,610 --> 00:17:55,220
‫Ahora no quiero

463
00:17:55,220 --> 00:17:57,603
‫hacer esta línea aquí demasiado

464
00:17:59,370 --> 00:18:01,290
‫larga simplemente pegándola aquí.

465
00:18:01,290 --> 00:18:02,300
‫Entonces, ¿por qué

466
00:18:02,300 --> 00:18:04,800
‫no crear una nueva variable de script Java para eso?

467
00:18:04,800 --> 00:18:06,700
‫Así que recuerde que necesitamos usar esta sintaxis

468
00:18:06,700 --> 00:18:08,560
‫aquí para crear un código de

469
00:18:08,560 --> 00:18:11,100
‫secuencia de comandos de Java que no producirá ningún resultado.

470
00:18:11,100 --> 00:18:12,910
‫Y, de nuevo, podemos

471
00:18:12,910 --> 00:18:15,083
‫simplemente escribir un script java aquí.

472
00:18:16,780 --> 00:18:17,613
‫Bueno.

473
00:18:17,613 --> 00:18:20,133
‫Y ahora aquí, simplemente voy a usar

474
00:18:21,060 --> 00:18:21,893
‫esa fecha.

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

476
00:18:24,780 --> 00:18:26,240
‫Y ahora dupliquemos esto aquí un par de veces para

477
00:18:26,240 --> 00:18:27,073
‫todas las cajas que tenemos.

478
00:18:27,073 --> 00:18:29,470
‫Entonces el primero es por dificultad.

479
00:18:29,470 --> 00:18:31,610
‫Y el ícono está aumentando.

480
00:18:31,610 --> 00:18:33,623
‫Luego, el siguiente es para los participantes.

481
00:18:37,150 --> 00:18:38,833
‫Con el icono de usuario.

482
00:18:41,970 --> 00:18:44,483
‫Y el último es rating.

483
00:18:48,040 --> 00:18:50,220
‫Y el icono es una estrella.

484
00:18:50,220 --> 00:18:52,383
‫Así que aquí tenemos la fecha, pero aquí en

485
00:18:58,010 --> 00:18:59,403
‫la dificultad tenemos una gira. dificultad.

486
00:19:00,540 --> 00:19:02,770
‫Entonces aquí para

487
00:19:02,770 --> 00:19:05,080
‫los participantes queremos esta cadena.

488
00:19:06,860 --> 00:19:07,860
‫Como 10 personas.

489
00:19:09,149 --> 00:19:10,810
‫Entonces, una cadena

490
00:19:10,810 --> 00:19:12,740
‫de plantilla que dice gira. mezcla, tamaño

491
00:19:12,740 --> 00:19:14,053
‫del

492
00:19:15,160 --> 00:19:19,120
‫grupo y luego personas.

493
00:19:21,327 --> 00:19:22,940
‫Y finalmente queremos la calificación y

494
00:19:22,940 --> 00:19:23,823
‫luego de cinco.

495
00:19:24,740 --> 00:19:25,573
‫Así que

496
00:19:26,950 --> 00:19:28,570
‫gira, y nunca puedo

497
00:19:28,570 --> 00:19:30,850
‫recordar cómo llamé a este campo.

498
00:19:30,850 --> 00:19:32,333
‫Y es un promedio de calificaciones.

499
00:19:37,130 --> 00:19:38,530
‫Está bien.

500
00:19:38,530 --> 00:19:40,730
‫Y luego, de

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

502
00:19:49,730 --> 00:19:50,563
‫Bueno.

503
00:19:50,563 --> 00:19:51,396
‫Y eso debería ser todo.

504
00:19:51,396 --> 00:19:52,380
‫Ahora podemos deshacernos de todo este código.

505
00:19:52,380 --> 00:19:53,213
‫Y de esta manera se ve mucho mejor.

506
00:19:54,560 --> 00:19:55,393
‫Y

507
00:19:55,393 --> 00:19:56,530
‫solo para asegurarnos

508
00:19:56,530 --> 00:19:58,660
‫de que funcione, guardemos aquí,

509
00:19:58,660 --> 00:20:01,760
‫recarguemos y, de hecho, obtenemos fácil, 25

510
00:20:01,760 --> 00:20:03,820
‫personas, y la calificación de

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

512
00:20:06,370 --> 00:20:08,140
‫Impresionante.

513
00:20:08,140 --> 00:20:09,350
‫Así que ya cubrimos mucho

514
00:20:09,350 --> 00:20:12,170
‫terreno, pero dividamos este video en dos y continuemos con el

515
00:20:12,170 --> 00:20:13,453
‫resto de la página en

516
00:20:14,360 --> 00:20:15,193
‫la siguiente.