1 00:00:01,057 --> 00:00:02,830 ‫Instructor: En esta 2 00:00:02,830 --> 00:00:06,513 ‫lección, aprenderá los fundamentos del trabajo con plantillas Pug. 3 00:00:07,950 --> 00:00:12,950 ‫Así que abramos nuestra plantilla base aquí y comencemos. 4 00:00:13,030 --> 00:00:17,720 ‫Entonces, en esencia, Pug es una sintaxis simple sensible a espacios en blanco 5 00:00:17,720 --> 00:00:22,550 ‫para escribir html, así que esa es realmente la esencia de lo que es. 6 00:00:22,550 --> 00:00:24,900 ‫Ahora, lo que eso significa es que 7 00:00:24,900 --> 00:00:29,290 ‫todo lo que usamos para escribir elementos html es su nombre y sangría 8 00:00:29,290 --> 00:00:30,630 ‫en nuestro código. 9 00:00:30,630 --> 00:00:32,320 ‫Así que comencemos por 10 00:00:32,320 --> 00:00:35,093 ‫configurar una estructura html muy simple aquí, así 11 00:00:36,420 --> 00:00:38,170 ‫que danos algo de espacio. 12 00:00:38,170 --> 00:00:41,680 ‫Y así, html generalmente siempre comienza con el tipo de 13 00:00:44,350 --> 00:00:45,990 ‫documento y un html. 14 00:00:45,990 --> 00:00:49,300 ‫Por lo tanto, para poder trabajar correctamente con Pug, por supuesto, 15 00:00:49,300 --> 00:00:51,943 ‫debe tener algunos conocimientos de html; de 16 00:00:53,100 --> 00:00:56,280 ‫lo contrario, esto podría no tener mucho sentido para usted. 17 00:00:56,280 --> 00:00:58,090 ‫Pero aún así, si no sabe 18 00:00:58,090 --> 00:01:01,750 ‫html, no se preocupe, puede seguir lo que estoy haciendo aquí y 19 00:01:01,750 --> 00:01:03,300 ‫tal vez leer un 20 00:01:03,300 --> 00:01:05,250 ‫artículo sobre cómo comenzar con html 21 00:01:05,250 --> 00:01:07,053 ‫porque es realmente muy simple. 22 00:01:08,250 --> 00:01:11,010 ‫De todos modos, siempre comenzamos con 23 00:01:11,010 --> 00:01:14,500 ‫doctype y luego con el primer elemento, por lo que 24 00:01:14,500 --> 00:01:18,720 ‫el elemento general en todos nuestros documentos html es siempre el html, 25 00:01:18,720 --> 00:01:21,960 ‫luego dentro de eso generalmente hay un elemento head. 26 00:01:21,960 --> 00:01:23,650 ‫Entonces, en Pug para 27 00:01:23,650 --> 00:01:26,360 ‫decir que un elemento está dentro del otro, todo 28 00:01:26,360 --> 00:01:28,700 ‫lo que hacemos es usar una etiqueta. 29 00:01:28,700 --> 00:01:32,550 ‫Entonces usamos sangría, como mencioné al principio, y eso 30 00:01:32,550 --> 00:01:33,720 ‫es todo. 31 00:01:33,720 --> 00:01:37,090 ‫Así que ese es nuestro elemento principal, y dentro de ese 32 00:01:37,090 --> 00:01:39,770 ‫encabezado, creemos el título de la página web. 33 00:01:39,770 --> 00:01:41,573 ‫Y así, otra etiqueta más. 34 00:01:42,790 --> 00:01:43,773 ‫Así que 35 00:01:45,490 --> 00:01:47,210 ‫título, y digamos Natours. 36 00:01:47,210 --> 00:01:50,610 ‫De acuerdo, nuevamente solo sangría, luego el nombre 37 00:01:50,610 --> 00:01:52,997 ‫del elemento html y luego el 38 00:01:52,997 --> 00:01:54,890 ‫contenido en sí. 39 00:01:54,890 --> 00:01:57,450 ‫Sin etiquetas de apertura, sin etiquetas 40 00:01:57,450 --> 00:02:01,130 ‫de cierre y sin el desorden que normalmente tenemos en html. 41 00:02:01,130 --> 00:02:04,040 ‫Así que realmente me gusta esta sintaxis aquí para 42 00:02:04,040 --> 00:02:05,660 ‫escribir documentos html, así que 43 00:02:05,660 --> 00:02:08,750 ‫la encuentro realmente asombrosa, realmente simple de usar y 44 00:02:08,750 --> 00:02:10,183 ‫de leer también. 45 00:02:11,320 --> 00:02:14,290 ‫De todos modos, ese es el contenido que queremos en la 46 00:02:14,290 --> 00:02:16,660 ‫cabeza, y ahora también queremos crear un cuerpo. 47 00:02:16,660 --> 00:02:19,660 ‫Ahora, ese cuerpo, por supuesto, no está dentro de la cabeza, 48 00:02:19,660 --> 00:02:22,340 ‫sino que está al mismo nivel que la 49 00:02:22,340 --> 00:02:25,870 ‫cabeza, por lo que básicamente también es un hijo directo de html. 50 00:02:25,870 --> 00:02:29,190 ‫Entonces, todo lo que tenemos que hacer es retroceder un nivel de sangría 51 00:02:30,130 --> 00:02:31,830 ‫y luego crear el elemento allí. 52 00:02:32,900 --> 00:02:35,323 ‫Luego, allí queremos nuestro h1, y 53 00:02:36,490 --> 00:02:39,070 ‫ahora necesitamos usar un poco más de sangría. 54 00:02:39,070 --> 00:02:43,290 ‫Entonces, por supuesto, no aquí, no aquí, sino aquí, 55 00:02:43,290 --> 00:02:44,913 ‫dentro del cuerpo. 56 00:02:47,404 --> 00:02:49,270 ‫Agreguemos también un párrafo, 57 00:02:49,270 --> 00:02:52,410 ‫y para eso usamos el elemento p diciendo 58 00:02:52,410 --> 00:02:55,203 ‫algo como, esto es solo un texto. 59 00:02:56,228 --> 00:03:00,600 ‫Así que probemos eso ahora en nuestro navegador, así 60 00:03:00,600 --> 00:03:03,223 ‫que recargue, y aquí vamos. 61 00:03:04,900 --> 00:03:08,200 ‫Muy bien, y aquí puedes ver la estructura 62 00:03:08,200 --> 00:03:12,400 ‫completa que acabamos de crear con el tipo de documento, el elemento 63 00:03:12,400 --> 00:03:15,740 ‫html y, por supuesto, la cabeza y el cuerpo allí. 64 00:03:15,740 --> 00:03:19,620 ‫Y también ves que ese título realmente aparece aquí. 65 00:03:19,620 --> 00:03:24,140 ‫Genial, a continuación incluiremos también un archivo CSS y 66 00:03:24,140 --> 00:03:27,360 ‫también el favicon que se mostrará 67 00:03:27,360 --> 00:03:31,280 ‫aquí en lugar de esta página genérica allí. 68 00:03:31,280 --> 00:03:33,230 ‫Entonces, si conoces algo de 69 00:03:33,230 --> 00:03:37,320 ‫html, sabrás que ese tipo de cosas pertenecen aquí a la cabeza. 70 00:03:37,320 --> 00:03:40,650 ‫Entonces, ¿cómo incluirías realmente una hoja de estilo CSS 71 00:03:40,650 --> 00:03:42,233 ‫con html normal? 72 00:03:43,350 --> 00:03:45,310 ‫Harías algo como esto. 73 00:03:45,310 --> 00:03:48,100 ‫Entonces, crearía un elemento de enlace, luego 74 00:03:48,100 --> 00:03:50,763 ‫definiría que es una hoja de estilo, 75 00:03:54,220 --> 00:03:55,853 ‫y luego también 76 00:03:57,590 --> 00:03:59,453 ‫la referencia, así como así. 77 00:04:00,393 --> 00:04:03,483 ‫Entonces estilo CSS. css, y 78 00:04:05,230 --> 00:04:10,230 ‫lo que tenemos aquí, esto y esto son atributos. 79 00:04:11,900 --> 00:04:15,260 ‫Y así, con Pug, escribimos atributos como este. 80 00:04:15,260 --> 00:04:17,610 ‫Entonces, en lugar de 81 00:04:17,610 --> 00:04:21,950 ‫tener este elemento, simplemente escribimos enlace, y luego 82 00:04:21,950 --> 00:04:25,140 ‫escribimos estos atributos entre paréntesis, así. 83 00:04:25,140 --> 00:04:28,030 ‫Entonces, sin ningún espacio y paréntesis abiertos, 84 00:04:28,030 --> 00:04:29,890 ‫y luego es 85 00:04:31,290 --> 00:04:33,343 ‫donde escribimos estos atributos así. 86 00:04:35,410 --> 00:04:38,270 ‫Y siempre debemos escribirlos con comillas simples y 87 00:04:38,270 --> 00:04:39,553 ‫no dobles, por 88 00:04:41,600 --> 00:04:44,210 ‫lo que ya no necesitamos este aquí. 89 00:04:44,210 --> 00:04:47,140 ‫Ahora, una cosa que también quería 90 00:04:47,140 --> 00:04:51,970 ‫decirte es que también podemos usar HTML normal en Pug. 91 00:04:51,970 --> 00:04:54,880 ‫Entonces, si quisiera, podría dejar esta línea 92 00:04:54,880 --> 00:04:57,920 ‫de código aquí y Pug lo entendería perfectamente. 93 00:04:57,920 --> 00:04:59,760 ‫Pero, por supuesto, aquí quería 94 00:04:59,760 --> 00:05:02,223 ‫mostrarles cómo podemos definir atributos con Pug. 95 00:05:03,860 --> 00:05:07,080 ‫Y ahora hagamos lo mismo con el favicon, 96 00:05:07,080 --> 00:05:09,960 ‫y nuevamente necesitamos un elemento de enlace, 97 00:05:09,960 --> 00:05:12,160 ‫y allí definiremos algunos atributos. 98 00:05:14,510 --> 00:05:17,323 ‫Entonces definimos que este es un ícono de 99 00:05:20,180 --> 00:05:23,723 ‫acceso directo, también especificamos su tipo, entonces imagen, y en 100 00:05:24,830 --> 00:05:26,713 ‫este caso es un 101 00:05:27,966 --> 00:05:30,530 ‫PNG, y luego nuevamente la referencia a 102 00:05:30,530 --> 00:05:35,530 ‫él, y es un favicon de imagen. png. 103 00:05:37,300 --> 00:05:40,103 ‫Y ahora vayamos y probemos eso, 104 00:05:40,980 --> 00:05:44,610 ‫y verá que esto realmente se ve un poco diferente. 105 00:05:44,610 --> 00:05:46,460 ‫Así que tenemos nuestro favicon, 106 00:05:46,460 --> 00:05:48,943 ‫y también nuestro texto ahora está muy bien apilado. 107 00:05:50,342 --> 00:05:54,120 ‫Y de hecho, verá algunas propiedades CSS apareciendo aquí ahora en 108 00:05:54,120 --> 00:05:55,153 ‫el lado izquierdo. 109 00:05:56,490 --> 00:05:59,470 ‫Y eso es, por supuesto, porque escribí una 110 00:05:59,470 --> 00:06:01,443 ‫tonelada de CSS en 111 00:06:02,980 --> 00:06:07,870 ‫realidad para esta aplicación, así que todo está en público, CSS y estilo. 112 00:06:07,870 --> 00:06:09,733 ‫Entonces, ves que tengo 113 00:06:10,690 --> 00:06:14,600 ‫como, no sé, como mil líneas o incluso más de CSS 114 00:06:14,600 --> 00:06:16,950 ‫que escribí solo para que esta aplicación 115 00:06:16,950 --> 00:06:19,053 ‫se vea tan hermosa como es. 116 00:06:21,784 --> 00:06:25,420 ‫Entonces, en otras palabras, ¿por qué este estilo? css en realidad 117 00:06:25,420 --> 00:06:28,820 ‫se carga automáticamente desde la carpeta CSS, y 118 00:06:28,820 --> 00:06:32,110 ‫el favicon también se carga automáticamente desde 119 00:06:32,110 --> 00:06:34,170 ‫la carpeta de imágenes. 120 00:06:34,170 --> 00:06:38,040 ‫Bueno, en primer lugar, tenga en cuenta que cada uno 121 00:06:38,040 --> 00:06:41,433 ‫de estos activos en realidad activa su propia 122 00:06:42,330 --> 00:06:46,690 ‫solicitud http, así que confirmemos eso aquí en las fuentes o 123 00:06:46,690 --> 00:06:48,920 ‫en el panel de red. 124 00:06:48,920 --> 00:06:51,270 ‫Y aquí ves estas tres solicitudes, 125 00:06:51,270 --> 00:06:54,970 ‫una para la página en sí, la otra para nuestro estilo 126 00:06:54,970 --> 00:06:56,593 ‫y para nuestro favicon. 127 00:06:59,280 --> 00:07:02,410 ‫Y de nuevo, ¿por qué funciona 128 00:07:02,410 --> 00:07:06,020 ‫así? Porque obviamente no tenemos un controlador de 129 00:07:06,020 --> 00:07:09,460 ‫ruta para ninguno de estos archivos aquí. 130 00:07:09,460 --> 00:07:12,250 ‫Pero sigue siendo una ruta si lo piensa bien, 131 00:07:12,250 --> 00:07:15,140 ‫porque es una solicitud de obtención a esta url 132 00:07:15,140 --> 00:07:17,210 ‫y también a esta url. 133 00:07:17,210 --> 00:07:20,930 ‫Permítanme recordar por qué esto realmente funciona, y 134 00:07:20,930 --> 00:07:24,590 ‫es debido a este middleware que 135 00:07:24,590 --> 00:07:29,290 ‫definimos en algún lugar aquí, así que esto aquí. 136 00:07:29,290 --> 00:07:33,100 ‫Así que recuerda eso usando express. static, básicamente definimos 137 00:07:33,100 --> 00:07:36,190 ‫que todos los activos estáticos siempre 138 00:07:36,190 --> 00:07:38,170 ‫se servirán automáticamente desde 139 00:07:38,170 --> 00:07:43,170 ‫una carpeta llamada pública, por lo que con esta carpeta aquí. 140 00:07:43,690 --> 00:07:47,470 ‫Y es por eso que cuando decimos estilo de barra css, 141 00:07:47,470 --> 00:07:50,050 ‫de hecho proviene de la carpeta pública. 142 00:07:50,050 --> 00:07:54,473 ‫Y entonces esta carpeta CSS es la carpeta dentro de public, y lo 143 00:07:55,612 --> 00:07:57,810 ‫mismo, por supuesto, para las imágenes. 144 00:07:57,810 --> 00:08:01,550 ‫Entonces, si en nuestro html tenemos un favicon de barra inclinada 145 00:08:01,550 --> 00:08:04,010 ‫de imagen, se abrirá la carpeta de 146 00:08:04,010 --> 00:08:06,720 ‫imágenes que está dentro de nuestra carpeta pública. 147 00:08:06,720 --> 00:08:10,673 ‫Nuevamente porque lo definimos así en nuestra aplicación expresa. 148 00:08:12,360 --> 00:08:15,400 ‫Entonces, ya aprendió cómo crear elementos 149 00:08:15,400 --> 00:08:17,570 ‫en Pug usando sangría 150 00:08:17,570 --> 00:08:20,470 ‫y también aprendió cómo usar atributos. 151 00:08:20,470 --> 00:08:21,810 ‫Pero otra cosa 152 00:08:21,810 --> 00:08:24,380 ‫realmente interesante es usar variables aquí. 153 00:08:24,380 --> 00:08:27,350 ‫Permítanme ahora mostrarles cómo podemos pasar datos a una 154 00:08:27,350 --> 00:08:31,040 ‫plantilla y luego cómo podemos usar esos datos aquí mismo 155 00:08:31,040 --> 00:08:32,153 ‫en Pug. 156 00:08:35,300 --> 00:08:38,143 ‫Así que recuerde que tenemos esta 157 00:08:39,090 --> 00:08:42,580 ‫ruta aquí, que usamos para renderizar nuestra plantilla base. 158 00:08:42,580 --> 00:08:43,860 ‫Y, por supuesto, 159 00:08:43,860 --> 00:08:45,900 ‫si es más tarde, en realidad tendremos 160 00:08:45,900 --> 00:08:48,173 ‫un archivo separado, donde estarán todas estas rutas. 161 00:08:49,050 --> 00:08:52,810 ‫Pero por ahora todo lo que quiero hacer es hacer que esto realmente funcione. 162 00:08:52,810 --> 00:08:57,030 ‫De todos modos, para pasar ahora datos a esta plantilla aquí, 163 00:08:57,030 --> 00:09:00,560 ‫todo lo que tenemos que hacer es definir 164 00:09:00,560 --> 00:09:04,140 ‫un objeto aquí y luego simplemente colocaremos algunos datos allí. 165 00:09:04,140 --> 00:09:07,263 ‫Y esos datos estarán disponibles en la plantilla Pug. 166 00:09:08,390 --> 00:09:10,910 ‫Así que simplemente creemos un objeto 167 00:09:10,910 --> 00:09:15,853 ‫aquí con una propiedad de recorrido y configurémoslo en The Forest Tiger, y 168 00:09:18,795 --> 00:09:19,712 ‫luego ... 169 00:09:20,950 --> 00:09:23,660 ‫también creemos una propiedad de usuario 170 00:09:23,660 --> 00:09:25,993 ‫y configurémosla en Jonas. 171 00:09:28,180 --> 00:09:30,710 ‫Y estas variables que pasamos aquí, 172 00:09:30,710 --> 00:09:33,543 ‫luego se llaman locales en el archivo Pug. 173 00:09:34,840 --> 00:09:39,380 ‫Así que ahora sigamos adelante y usemos esos datos. 174 00:09:39,380 --> 00:09:41,630 ‫Y lo que quiero hacer 175 00:09:41,630 --> 00:09:45,140 ‫ahora es poner esa variable tour en nuestro h1. 176 00:09:45,140 --> 00:09:48,600 ‫Básicamente, quiero crear un elemento h1, donde el contenido 177 00:09:48,600 --> 00:09:51,510 ‫es el nombre de la gira. 178 00:09:51,510 --> 00:09:53,260 ‫Y la forma más sencilla 179 00:09:53,260 --> 00:09:56,510 ‫de hacerlo es simplemente usar la sintaxis de igualdad de 180 00:09:56,510 --> 00:10:01,340 ‫esta manera, por lo que h1 es igual, luego un espacio y luego un recorrido. 181 00:10:01,340 --> 00:10:04,353 ‫Y eso es todo, eso es realmente todo lo que tenemos que hacer. 182 00:10:05,830 --> 00:10:07,660 ‫Así que saquemos este de 183 00:10:07,660 --> 00:10:09,803 ‫aquí, y en realidad otra cosa 184 00:10:09,803 --> 00:10:12,830 ‫que quería mostrarles es que en Pug, podemos crear 185 00:10:12,830 --> 00:10:15,450 ‫comentarios y podemos crear dos tipos de comentarios. 186 00:10:15,450 --> 00:10:19,100 ‫Entonces, el más simple es simplemente como en JavaScript, 187 00:10:19,100 --> 00:10:20,703 ‫así que así. 188 00:10:21,890 --> 00:10:23,600 ‫Y esto creará un 189 00:10:23,600 --> 00:10:26,120 ‫comentario que será visible en el html. 190 00:10:26,120 --> 00:10:27,770 ‫Así que ahora echemos un 191 00:10:29,290 --> 00:10:30,520 ‫vistazo a 192 00:10:30,520 --> 00:10:34,330 ‫esto, y tengamos en cuenta que ahora el h1 ya no 193 00:10:34,330 --> 00:10:37,480 ‫será The Park Camper, sino que debería ser The Forest 194 00:10:37,480 --> 00:10:39,520 ‫Hiker porque esa es la variable 195 00:10:39,520 --> 00:10:42,090 ‫del recorrido, o en otras palabras, el recorrido 196 00:10:42,090 --> 00:10:44,640 ‫local, que ahora pasó a esta plantilla. 197 00:10:44,640 --> 00:10:46,390 ‫Y aquí, luego puse 198 00:10:46,390 --> 00:10:49,373 ‫eso en el h1 usando la sintaxis de igualdad. 199 00:10:51,070 --> 00:10:53,160 ‫Así que veamos eso, echemos un 200 00:10:53,160 --> 00:10:54,293 ‫vistazo a esto. 201 00:10:55,360 --> 00:10:57,743 ‫Y de hecho ahora es The Forest Hiker. 202 00:11:00,020 --> 00:11:02,920 ‫Y también aquí está ese comentario del 203 00:11:02,920 --> 00:11:05,250 ‫que acabamos de hablar también. 204 00:11:05,250 --> 00:11:07,940 ‫Entonces, como dije, esa doble barra 205 00:11:07,940 --> 00:11:10,810 ‫que hicimos allí básicamente crea un comentario html. 206 00:11:10,810 --> 00:11:14,820 ‫Entonces, esta sintaxis es la forma en que escribimos comentarios en 207 00:11:14,820 --> 00:11:19,380 ‫html, pero si realmente desea que sea un comentario para el archivo Pug 208 00:11:19,380 --> 00:11:21,950 ‫pero no se envíe a html, debe 209 00:11:21,950 --> 00:11:24,093 ‫agregar un guión como este. 210 00:11:26,350 --> 00:11:29,513 ‫Entonces, si ahora volvemos a cargar esto, ese comentario debería desaparecer. 211 00:11:31,880 --> 00:11:34,550 ‫Así que este tipo de código aquí, que escribimos aquí, 212 00:11:34,550 --> 00:11:36,163 ‫se llama código almacenado en búfer. 213 00:11:37,080 --> 00:11:40,550 ‫Y en realidad también podríamos escribir algo de 214 00:11:40,550 --> 00:11:44,880 ‫JavaScript aquí, así que digamos que h2 es igual al usuario, 215 00:11:44,880 --> 00:11:48,700 ‫y luego también podemos llamar a toUppercase sobre eso. 216 00:11:53,080 --> 00:11:54,710 ‫JavaScript tan simple aquí porque 217 00:11:54,710 --> 00:11:57,600 ‫nuevamente aquí en este código almacenado en búfer, 218 00:11:57,600 --> 00:11:59,150 ‫que es como 219 00:11:59,150 --> 00:12:02,403 ‫se llama, podemos ejecutar JavaScript simple como lo hicimos aquí. 220 00:12:05,840 --> 00:12:10,263 ‫Así que aquí vamos, Jonas en mayúsculas. 221 00:12:12,160 --> 00:12:16,030 ‫Entonces código almacenado en búfer, y si tenemos código almacenado en 222 00:12:16,030 --> 00:12:19,660 ‫búfer, entonces también tenemos que tener código sin búfer. 223 00:12:19,660 --> 00:12:22,890 ‫Y así, básicamente, el código sin búfer es código 224 00:12:22,890 --> 00:12:25,620 ‫que no agregará nada a la salida. 225 00:12:25,620 --> 00:12:28,510 ‫Y escribimos eso escribiendo guión y luego 226 00:12:28,510 --> 00:12:30,863 ‫simplemente hagamos algo de JavaScript 227 00:12:31,990 --> 00:12:34,610 ‫aquí, por ejemplo, simplemente definiendo una variable. 228 00:12:34,610 --> 00:12:38,330 ‫Entonces, digamos que const x es igual a nueve, y luego 229 00:12:38,330 --> 00:12:40,720 ‫hagamos un código almacenado en búfer nuevamente. 230 00:12:40,720 --> 00:12:45,200 ‫Entonces, nuevamente el código que agregará algo a la salida. 231 00:12:45,200 --> 00:12:47,870 ‫Y, de nuevo, podemos usar JavaScript aquí, 232 00:12:47,870 --> 00:12:50,290 ‫así que hagámoslo dos veces x. 233 00:12:50,290 --> 00:12:54,613 ‫Y entonces aquí, tendremos acceso a esa variable x. 234 00:12:56,710 --> 00:13:00,833 ‫Así que debería ser 18 y de hecho lo es. 235 00:13:01,990 --> 00:13:04,603 ‫Así que esas son todas las pequeñas piezas de 236 00:13:04,603 --> 00:13:06,950 ‫código diferente que podemos usar en Pug. 237 00:13:06,950 --> 00:13:11,130 ‫Ahora, en realidad, también hay una tercera forma de escribir código, y 238 00:13:11,130 --> 00:13:12,970 ‫déjame mostrarte eso aquí. 239 00:13:12,970 --> 00:13:15,240 ‫Eso se llama interpolación, y en realidad 240 00:13:15,240 --> 00:13:16,690 ‫se parece un 241 00:13:16,690 --> 00:13:19,370 ‫poco a las cadenas de plantillas de ES6. 242 00:13:19,370 --> 00:13:21,430 ‫Entonces, en lugar de tener solo 243 00:13:21,430 --> 00:13:23,233 ‫Natours aquí, agreguemos también el 244 00:13:24,100 --> 00:13:26,883 ‫nombre de la gira, para que podamos hacerlo así. 245 00:13:29,380 --> 00:13:33,620 ‫Entonces, con la cadena de plantilla en ES6, funciona así, pero 246 00:13:33,620 --> 00:13:36,553 ‫aquí en Pug es con este hash, 247 00:13:37,660 --> 00:13:39,350 ‫así que así. 248 00:13:39,350 --> 00:13:41,230 ‫Y aquí tenemos que 249 00:13:41,230 --> 00:13:45,090 ‫hacerlo así básicamente porque esto es código, entonces es variable, pero 250 00:13:45,090 --> 00:13:47,700 ‫esto no es código, es simplemente texto. 251 00:13:47,700 --> 00:13:51,500 ‫Entonces, no podemos hacer esto porque todo lo que está 252 00:13:51,500 --> 00:13:53,630 ‫aquí se trata como JavaScript, 253 00:13:53,630 --> 00:13:57,150 ‫y dado que esto no es JavaScript, no funcionaría. 254 00:13:57,150 --> 00:13:59,810 ‫Entonces, esto aquí es solo una cadena, 255 00:13:59,810 --> 00:14:02,730 ‫por lo que si queremos agregar algo a esa 256 00:14:02,730 --> 00:14:05,430 ‫cadena, entonces necesitamos usar esta sintaxis de interpolación. 257 00:14:05,430 --> 00:14:07,053 ‫Vale, ¿tiene sentido? 258 00:14:08,620 --> 00:14:11,320 ‫Agreguemos como esta barra aquí, que también 259 00:14:11,320 --> 00:14:13,940 ‫es simplemente parte de la cadena. 260 00:14:13,940 --> 00:14:15,717 ‫Y ahora esperamos que Natours corte 261 00:14:17,010 --> 00:14:18,573 ‫a The Forest Hiker, 262 00:14:19,440 --> 00:14:21,810 ‫así que eso es exactamente lo que obtuvieron. 263 00:14:21,810 --> 00:14:24,700 ‫Genial, estos son los fundamentos de 264 00:14:24,700 --> 00:14:26,760 ‫trabajar con Pug. 265 00:14:26,760 --> 00:14:28,970 ‫Pero, por supuesto, hay mucho más que 266 00:14:28,970 --> 00:14:30,330 ‫aprender, así que sigamos 267 00:14:30,330 --> 00:14:31,980 ‫haciéndolo durante las próximas conferencias.