1
00:00:00,990 --> 00:00:01,900
‫-: Está bien.

2
00:00:01,900 --> 00:00:04,500
‫En este video, le mostraré cómo usar

3
00:00:04,500 --> 00:00:06,180
‫una de las

4
00:00:06,180 --> 00:00:09,440
‫características más importantes y también más complejas de Pug.

5
00:00:09,440 --> 00:00:11,940
‫Y eso se extiende.

6
00:00:11,940 --> 00:00:14,280
‫Con extensiones, podremos

7
00:00:14,280 --> 00:00:17,000
‫usar el mismo diseño base

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

9
00:00:20,770 --> 00:00:24,280
‫En este momento, tenemos nuestra plantilla base terminada con un

10
00:00:24,280 --> 00:00:27,210
‫bonito encabezado y un bonito pie de página.

11
00:00:27,210 --> 00:00:30,760
‫Así que ahora, comencemos a completar su contenido.

12
00:00:30,760 --> 00:00:32,670
‫Ahora, por supuesto,

13
00:00:32,670 --> 00:00:35,560
‫queremos cargar contenido diferente para diferentes páginas.

14
00:00:35,560 --> 00:00:38,550
‫Y para comenzar, queremos tener una página de descripción general con

15
00:00:38,550 --> 00:00:40,860
‫todos los recorridos, y luego una página

16
00:00:40,860 --> 00:00:43,763
‫con todos los detalles del recorrido para un recorrido específico.

17
00:00:44,860 --> 00:00:47,080
‫Así que ahora implementemos algunas rutas

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

19
00:00:51,410 --> 00:00:53,640
‫Y voy a hacer eso aquí mismo,

20
00:00:53,640 --> 00:00:55,840
‫debajo del primero que ya creamos.

21
00:00:59,056 --> 00:01:00,510
‫Entonces, / descripción

22
00:01:09,440 --> 00:01:12,750
‫general Y luego algo muy similar a antes.

23
00:01:12,750 --> 00:01:15,430
‫Y nuevamente, un poco más tarde, en el

24
00:01:15,430 --> 00:01:16,910
‫siguiente video colocaremos estas

25
00:01:16,910 --> 00:01:18,863
‫rutas en su propio archivo separado.

26
00:01:21,530 --> 00:01:24,560
‫Entonces, render, y ahora en esta página de descripción

27
00:01:24,560 --> 00:01:26,030
‫general, realmente querremos

28
00:01:26,030 --> 00:01:28,223
‫representar una plantilla llamada descripción general.

29
00:01:32,440 --> 00:01:34,000
‫Eso todavía no

30
00:01:34,000 --> 00:01:36,903
‫existe, así que sigamos adelante y creemos uno.

31
00:01:40,400 --> 00:01:43,010
‫Entonces, descripción general. pug Y

32
00:01:48,570 --> 00:01:51,640
‫de hecho también vamos a pasar algunos datos.

33
00:01:51,640 --> 00:01:54,080
‫Y pasaremos el título de la página

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

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

36
00:02:00,780 --> 00:02:03,130
‫Ahora, tomemos este código

37
00:02:03,130 --> 00:02:05,503
‫y cópielo para el recorrido.

38
00:02:06,680 --> 00:02:11,270
‫Así que también queremos una ruta para un recorrido específico nuevamente.

39
00:02:11,270 --> 00:02:12,770
‫Y aquí, querremos

40
00:02:12,770 --> 00:02:16,160
‫tener una plantilla que también se llama tour.

41
00:02:16,160 --> 00:02:18,260
‫Y luego el título de eso, por

42
00:02:18,260 --> 00:02:19,300
‫ahora, hagámoslo de

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

44
00:02:25,830 --> 00:02:27,990
‫Entonces, por ahora, esto es solo un marcador de

45
00:02:27,990 --> 00:02:29,470
‫posición y, por supuesto, un

46
00:02:29,470 --> 00:02:31,360
‫poco más tarde, realmente haremos esta dinámica.

47
00:02:31,360 --> 00:02:33,120
‫Porque en este punto,

48
00:02:33,120 --> 00:02:35,723
‫todavía estamos aprendiendo cómo funciona realmente Pug.

49
00:02:38,830 --> 00:02:42,323
‫Ahora creemos también esa plantilla de recorrido.

50
00:02:44,070 --> 00:02:45,810
‫Y eso es.

51
00:02:45,810 --> 00:02:49,363
‫Bien, ahora con estas dos nuevas plantillas aquí hechas, esto es

52
00:02:50,810 --> 00:02:52,680
‫lo que vamos a hacer.

53
00:02:52,680 --> 00:02:54,960
‫En cada una de estas plantillas, y en

54
00:02:54,960 --> 00:02:56,820
‫este caso aquí la descripción

55
00:02:56,820 --> 00:02:59,500
‫general, solo queremos poner el contenido de esa página específica.

56
00:02:59,500 --> 00:03:01,720
‫Así que no queremos pie de página aquí

57
00:03:01,720 --> 00:03:04,260
‫ni encabezado ni nada de lo que tenemos en la base.

58
00:03:04,260 --> 00:03:06,040
‫Entonces, nuevamente, realmente solo el

59
00:03:06,040 --> 00:03:07,900
‫contenido de la página de descripción general.

60
00:03:07,900 --> 00:03:10,890
‫Así que eso es exactamente lo que vamos a

61
00:03:10,890 --> 00:03:14,000
‫poner en este archivo, y luego, básicamente, inyectaremos este

62
00:03:14,000 --> 00:03:16,300
‫contenido en la plantilla base, que

63
00:03:16,300 --> 00:03:18,316
‫podemos llamar la plantilla principal.

64
00:03:18,316 --> 00:03:21,620
‫Este proceso se llama entonces extensión.

65
00:03:21,620 --> 00:03:24,750
‫Entonces, cada vez que se renderiza la plantilla de descripción

66
00:03:24,750 --> 00:03:26,550
‫general, tomamos la plantilla base

67
00:03:26,550 --> 00:03:29,560
‫y la llenamos con el contenido de este archivo,

68
00:03:29,560 --> 00:03:31,353
‫y así lo ampliamos.

69
00:03:32,930 --> 00:03:35,080
‫Así es como lo implementamos.

70
00:03:35,080 --> 00:03:38,203
‫Primero que nada, en la base, necesitamos poner un bloque.

71
00:03:40,110 --> 00:03:41,560
‫De hecho, haré eso aquí.

72
00:03:42,890 --> 00:03:45,180
‫Así que eliminemos todo

73
00:03:45,180 --> 00:03:47,900
‫esto, y aquí, coloquemos un bloque.

74
00:03:47,900 --> 00:03:52,320
‫Y ese bloque, lo voy a llamar contenido.

75
00:03:52,320 --> 00:03:54,260
‫Luego, dentro de ese bloque, también podemos tener

76
00:03:54,260 --> 00:03:55,303
‫algo de contenido.

77
00:03:56,490 --> 00:03:58,520
‫Así que pongamos un h1 aquí.

78
00:03:58,520 --> 00:04:01,740
‫Pero este contenido se sobrescribirá más tarde.

79
00:04:01,740 --> 00:04:03,600
‫Pero de todos modos,

80
00:04:03,600 --> 00:04:06,230
‫pongámoslo aquí como un marcador de posición, básicamente.

81
00:04:06,230 --> 00:04:09,630
‫Entonces, este es un encabezado de marcador de posición.

82
00:04:12,150 --> 00:04:15,600
‫Bien, tenemos nuestro bloque aquí, y ahora podemos ir

83
00:04:15,600 --> 00:04:18,280
‫a nuestra página de descripción general

84
00:04:18,280 --> 00:04:21,473
‫y decir que queremos extender nuestra plantilla base.

85
00:04:22,360 --> 00:04:25,053
‫Entonces, extiende la base.

86
00:04:26,400 --> 00:04:28,420
‫O en realidad, eso se llama extiende.

87
00:04:28,420 --> 00:04:30,823
‫Entonces este archivo extiende el archivo base.

88
00:04:31,970 --> 00:04:33,528
‫Y, por supuesto, si este de aquí

89
00:04:33,528 --> 00:04:36,157
‫se llamara, por ejemplo, index. pug,

90
00:04:36,157 --> 00:04:38,853
‫entonces aquí diríamos extiende index.

91
00:04:40,660 --> 00:04:42,510
‫Ahora bien, ¿cuál es exactamente

92
00:04:42,510 --> 00:04:45,083
‫el contenido que se ampliará en la plantilla base?

93
00:04:46,000 --> 00:04:49,203
‫Bueno, eso es lo que ponemos en el bloque de contenido.

94
00:04:52,030 --> 00:04:55,573
‫Entonces, también aquí, creamos un bloque llamado contenido.

95
00:04:57,410 --> 00:05:01,063
‫Y luego, como siempre, podemos poner nuestro contenido.

96
00:05:02,650 --> 00:05:06,243
‫Así que digamos, esta es la descripción general del recorrido.

97
00:05:09,180 --> 00:05:12,075
‫Aquí, básicamente redefinimos el bloque de contenido que

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

99
00:05:15,270 --> 00:05:16,900
‫Entonces, nuevamente, tenemos este

100
00:05:16,900 --> 00:05:19,450
‫bloque aquí que se llama contenido, y

101
00:05:19,450 --> 00:05:22,400
‫ahora al poner el mismo bloque de contenido aquí

102
00:05:22,400 --> 00:05:24,370
‫en esta página, que luego

103
00:05:24,370 --> 00:05:27,293
‫extiende la base, básicamente estamos redefiniendo ese bloque.

104
00:05:28,171 --> 00:05:31,820
‫Cada archivo solo puede ampliar otro archivo.

105
00:05:31,820 --> 00:05:33,860
‫Entonces solo podemos extender la

106
00:05:33,860 --> 00:05:38,390
‫base aquí, pero podemos tener diferentes bloques en cada uno de los archivos.

107
00:05:38,390 --> 00:05:41,730
‫Entonces podríamos tener un bloque para la cabeza aquí también.

108
00:05:41,730 --> 00:05:43,760
‫Y luego podríamos extender eso también

109
00:05:43,760 --> 00:05:45,790
‫en la plantilla de descripción general.

110
00:05:45,790 --> 00:05:48,330
‫Y, de hecho, lo haremos un poco más tarde.

111
00:05:48,330 --> 00:05:51,260
‫Pero por ahora, por supuesto, hagámoslo simple.

112
00:05:51,260 --> 00:05:52,923
‫Vale, ¿esto tiene sentido?

113
00:05:54,270 --> 00:05:57,020
‫Sigamos ahora y hagamos lo mismo aquí.

114
00:05:57,930 --> 00:06:02,190
‫Entonces esto extiende el diseño base.

115
00:06:02,190 --> 00:06:04,083
‫¿Y qué se extiende exactamente?

116
00:06:05,200 --> 00:06:08,900
‫Bueno, extenderá el bloque de contenido.

117
00:06:08,900 --> 00:06:11,660
‫Y este lo pondremos en

118
00:06:11,660 --> 00:06:16,180
‫el h1. Esta es la página de detalles del recorrido.

119
00:06:19,230 --> 00:06:21,830
‫Entonces, antes de probar esto, recapitulemos rápidamente lo que

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

121
00:06:23,020 --> 00:06:26,100
‫Entonces, queremos usar esta plantilla base aquí

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

123
00:06:28,330 --> 00:06:31,600
‫Entonces, como un esqueleto que tiene todo el material

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

125
00:06:32,815 --> 00:06:36,360
‫este encabezado, y también el encabezado y el pie de

126
00:06:36,360 --> 00:06:39,610
‫página, pero no el contenido específico para cada página.

127
00:06:39,610 --> 00:06:41,720
‫Luego, en cada una de estas

128
00:06:41,720 --> 00:06:44,933
‫páginas aquí, solo tenemos el contenido de esa página en sí.

129
00:06:46,020 --> 00:06:47,650
‫Y podemos hacer

130
00:06:47,650 --> 00:06:49,913
‫eso porque básicamente podemos inyectar este

131
00:06:49,913 --> 00:06:53,650
‫contenido aquí en la plantilla base principal usando extender.

132
00:06:53,650 --> 00:06:57,353
‫Básicamente, piense en esto como lo opuesto a incluir.

133
00:06:58,881 --> 00:07:03,298
‫Aquí, esta plantilla incluía dos plantillas principales.

134
00:07:03,298 --> 00:07:07,424
‫Esta plantilla aquí incluía dos plantillas secundarias, el encabezado

135
00:07:07,424 --> 00:07:10,293
‫y el pie de página.

136
00:07:12,284 --> 00:07:14,200
‫Entonces, nuevamente, la base es el padre

137
00:07:14,200 --> 00:07:17,140
‫y el encabezado y el pie de página son los hijos.

138
00:07:17,140 --> 00:07:19,890
‫Entonces, aquí, el padre incluyó a los niños.

139
00:07:19,890 --> 00:07:22,740
‫Pero con la extensión, es al revés, donde

140
00:07:22,740 --> 00:07:25,660
‫los niños, como podemos decir, podemos decir que

141
00:07:25,660 --> 00:07:27,300
‫la vista general es

142
00:07:27,300 --> 00:07:29,570
‫también un niño de la base,

143
00:07:29,570 --> 00:07:33,160
‫pero aquí es el niño el que incluye la base.

144
00:07:33,160 --> 00:07:36,883
‫Entonces, básicamente, todo lo que hay alrededor de este contenido de bloque.

145
00:07:38,260 --> 00:07:40,960
‫Puede imaginar que todo este código

146
00:07:40,960 --> 00:07:43,750
‫aquí, todo esto, que no es el

147
00:07:43,750 --> 00:07:47,090
‫contenido del bloque, se copia directamente en este archivo.

148
00:07:47,090 --> 00:07:49,843
‫Esa es una buena forma de imaginar cómo funciona esto.

149
00:07:51,334 --> 00:07:55,360
‫Eso nos permite usar aquí en nuestra ruta la descripción

150
00:07:55,360 --> 00:07:59,430
‫general y las plantillas de recorrido en lugar de usar la base.

151
00:07:59,430 --> 00:08:02,750
‫Pero aún así, por supuesto, usando todo este

152
00:08:02,750 --> 00:08:04,620
‫HTML que tenemos aquí.

153
00:08:04,620 --> 00:08:08,460
‫Bien, espero que ahora tenga sentido.

154
00:08:08,460 --> 00:08:10,653
‫De hecho, sigamos adelante y probemos esto.

155
00:08:12,030 --> 00:08:13,783
‫Solo voy a copiar la URL.

156
00:08:14,960 --> 00:08:16,913
‫Así que ahora escribamos una descripción general.

157
00:08:18,960 --> 00:08:22,350
‫Y así, de hecho, obtenemos el h1 que dice Esta

158
00:08:22,350 --> 00:08:24,460
‫es la descripción general del recorrido.

159
00:08:24,460 --> 00:08:27,810
‫Y de hecho usemos también la variable de título

160
00:08:27,810 --> 00:08:29,683
‫que pasamos a estas plantillas.

161
00:08:31,810 --> 00:08:34,096
‫Recuerde que aquí tenemos el título Todos

162
00:08:34,096 --> 00:08:37,320
‫los recorridos en la descripción general, y luego, en el

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

164
00:08:39,310 --> 00:08:41,563
‫Pongamos eso en el título.

165
00:08:42,590 --> 00:08:44,860
‫De hecho, podemos hacerlo aquí mismo

166
00:08:44,860 --> 00:08:47,110
‫en la plantilla base.

167
00:08:47,110 --> 00:08:48,850
‫Entonces, cuando aquí mismo

168
00:08:48,850 --> 00:08:51,140
‫en la descripción general ampliamos la plantilla

169
00:08:51,140 --> 00:08:54,970
‫base, la plantilla base todavía tiene acceso a los locales, por lo

170
00:08:54,970 --> 00:08:57,843
‫tanto, a las variables, que pasamos a la plantilla.

171
00:08:58,810 --> 00:09:02,300
‫Aquí, podemos hacer lo que hicimos antes,

172
00:09:02,300 --> 00:09:05,973
‫entonces, interpolación con la variable, entonces con el local.

173
00:09:07,620 --> 00:09:12,580
‫Entonces, todo lo que tenemos que hacer es poner el título aquí, así.

174
00:09:12,580 --> 00:09:14,400
‫Y si ahora recargamos, verá

175
00:09:14,400 --> 00:09:16,823
‫All Tours aquí en la parte superior.

176
00:09:19,267 --> 00:09:20,573
‫Ahora intentemos la gira.

177
00:09:21,630 --> 00:09:24,420
‫Y esta es la página de detalles del recorrido, y

178
00:09:24,420 --> 00:09:26,833
‫aquí arriba puede ver The Forest Hiker Tour.

179
00:09:28,610 --> 00:09:30,660
‫Ahora, si cargamos este, deberíamos obtener

180
00:09:30,660 --> 00:09:32,540
‫ese marcador de posición que

181
00:09:32,540 --> 00:09:34,230
‫pusimos en el bloque.

182
00:09:34,230 --> 00:09:35,113
‫¿Recuérdalo?

183
00:09:36,890 --> 00:09:40,430
‫Y, de hecho, este es el encabezado del marcador de posición.

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

185
00:09:41,570 --> 00:09:44,466
‫Este es un mecanismo poderoso y muy importante para

186
00:09:44,466 --> 00:09:47,220
‫que entendamos y usemos para todas las plantillas que

187
00:09:47,220 --> 00:09:49,200
‫vamos a construir en el resto

188
00:09:49,200 --> 00:09:50,550
‫de la sección.

189
00:09:52,210 --> 00:09:54,250
‫En el siguiente video, finalmente limpiaremos

190
00:09:54,250 --> 00:09:57,710
‫un poco este lío que tenemos aquí y refactorizaremos

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

192
00:09:59,328 --> 00:10:01,303
‫aquí en algunos archivos diferentes.