‫-: Está bien.
‫En este video, le mostraré cómo usar
‫una de las
‫características más importantes y también más complejas de Pug.
‫Y eso se extiende.
‫Con extensiones, podremos
‫usar el mismo diseño base
‫para cada página que queramos renderizar.
‫En este momento, tenemos nuestra plantilla base terminada con un
‫bonito encabezado y un bonito pie de página.
‫Así que ahora, comencemos a completar su contenido.
‫Ahora, por supuesto,
‫queremos cargar contenido diferente para diferentes páginas.
‫Y para comenzar, queremos tener una página de descripción general con
‫todos los recorridos, y luego una página
‫con todos los detalles del recorrido para un recorrido específico.
‫Así que ahora implementemos algunas rutas
‫para ambas páginas.
‫Y voy a hacer eso aquí mismo,
‫debajo del primero que ya creamos.
‫Entonces, / descripción
‫general Y luego algo muy similar a antes.
‫Y nuevamente, un poco más tarde, en el
‫siguiente video colocaremos estas
‫rutas en su propio archivo separado.
‫Entonces, render, y ahora en esta página de descripción
‫general, realmente querremos
‫representar una plantilla llamada descripción general.
‫Eso todavía no
‫existe, así que sigamos adelante y creemos uno.
‫Entonces, descripción general. pug Y
‫de hecho también vamos a pasar algunos datos.
‫Y pasaremos el título de la página
‫que en este caso diremos Todos
‫los Tours.
‫Ahora, tomemos este código
‫y cópielo para el recorrido.
‫Así que también queremos una ruta para un recorrido específico nuevamente.
‫Y aquí, querremos
‫tener una plantilla que también se llama tour.
‫Y luego el título de eso, por
‫ahora, hagámoslo de
‫nuevo, The Forest Hiker Tour.
‫Entonces, por ahora, esto es solo un marcador de
‫posición y, por supuesto, un
‫poco más tarde, realmente haremos esta dinámica.
‫Porque en este punto,
‫todavía estamos aprendiendo cómo funciona realmente Pug.
‫Ahora creemos también esa plantilla de recorrido.
‫Y eso es.
‫Bien, ahora con estas dos nuevas plantillas aquí hechas, esto es
‫lo que vamos a hacer.
‫En cada una de estas plantillas, y en
‫este caso aquí la descripción
‫general, solo queremos poner el contenido de esa página específica.
‫Así que no queremos pie de página aquí
‫ni encabezado ni nada de lo que tenemos en la base.
‫Entonces, nuevamente, realmente solo el
‫contenido de la página de descripción general.
‫Así que eso es exactamente lo que vamos a
‫poner en este archivo, y luego, básicamente, inyectaremos este
‫contenido en la plantilla base, que
‫podemos llamar la plantilla principal.
‫Este proceso se llama entonces extensión.
‫Entonces, cada vez que se renderiza la plantilla de descripción
‫general, tomamos la plantilla base
‫y la llenamos con el contenido de este archivo,
‫y así lo ampliamos.
‫Así es como lo implementamos.
‫Primero que nada, en la base, necesitamos poner un bloque.
‫De hecho, haré eso aquí.
‫Así que eliminemos todo
‫esto, y aquí, coloquemos un bloque.
‫Y ese bloque, lo voy a llamar contenido.
‫Luego, dentro de ese bloque, también podemos tener
‫algo de contenido.
‫Así que pongamos un h1 aquí.
‫Pero este contenido se sobrescribirá más tarde.
‫Pero de todos modos,
‫pongámoslo aquí como un marcador de posición, básicamente.
‫Entonces, este es un encabezado de marcador de posición.
‫Bien, tenemos nuestro bloque aquí, y ahora podemos ir
‫a nuestra página de descripción general
‫y decir que queremos extender nuestra plantilla base.
‫Entonces, extiende la base.
‫O en realidad, eso se llama extiende.
‫Entonces este archivo extiende el archivo base.
‫Y, por supuesto, si este de aquí
‫se llamara, por ejemplo, index. pug,
‫entonces aquí diríamos extiende index.
‫Ahora bien, ¿cuál es exactamente
‫el contenido que se ampliará en la plantilla base?
‫Bueno, eso es lo que ponemos en el bloque de contenido.
‫Entonces, también aquí, creamos un bloque llamado contenido.
‫Y luego, como siempre, podemos poner nuestro contenido.
‫Así que digamos, esta es la descripción general del recorrido.
‫Aquí, básicamente redefinimos el bloque de contenido que
‫está en la base.
‫Entonces, nuevamente, tenemos este
‫bloque aquí que se llama contenido, y
‫ahora al poner el mismo bloque de contenido aquí
‫en esta página, que luego
‫extiende la base, básicamente estamos redefiniendo ese bloque.
‫Cada archivo solo puede ampliar otro archivo.
‫Entonces solo podemos extender la
‫base aquí, pero podemos tener diferentes bloques en cada uno de los archivos.
‫Entonces podríamos tener un bloque para la cabeza aquí también.
‫Y luego podríamos extender eso también
‫en la plantilla de descripción general.
‫Y, de hecho, lo haremos un poco más tarde.
‫Pero por ahora, por supuesto, hagámoslo simple.
‫Vale, ¿esto tiene sentido?
‫Sigamos ahora y hagamos lo mismo aquí.
‫Entonces esto extiende el diseño base.
‫¿Y qué se extiende exactamente?
‫Bueno, extenderá el bloque de contenido.
‫Y este lo pondremos en
‫el h1. Esta es la página de detalles del recorrido.
‫Entonces, antes de probar esto, recapitulemos rápidamente lo que
‫acabamos de hacer.
‫Entonces, queremos usar esta plantilla base aquí
‫como nuestro punto de partida.
‫Entonces, como un esqueleto que tiene todo el material
‫HTML, como
‫este encabezado, y también el encabezado y el pie de
‫página, pero no el contenido específico para cada página.
‫Luego, en cada una de estas
‫páginas aquí, solo tenemos el contenido de esa página en sí.
‫Y podemos hacer
‫eso porque básicamente podemos inyectar este
‫contenido aquí en la plantilla base principal usando extender.
‫Básicamente, piense en esto como lo opuesto a incluir.
‫Aquí, esta plantilla incluía dos plantillas principales.
‫Esta plantilla aquí incluía dos plantillas secundarias, el encabezado
‫y el pie de página.
‫Entonces, nuevamente, la base es el padre
‫y el encabezado y el pie de página son los hijos.
‫Entonces, aquí, el padre incluyó a los niños.
‫Pero con la extensión, es al revés, donde
‫los niños, como podemos decir, podemos decir que
‫la vista general es
‫también un niño de la base,
‫pero aquí es el niño el que incluye la base.
‫Entonces, básicamente, todo lo que hay alrededor de este contenido de bloque.
‫Puede imaginar que todo este código
‫aquí, todo esto, que no es el
‫contenido del bloque, se copia directamente en este archivo.
‫Esa es una buena forma de imaginar cómo funciona esto.
‫Eso nos permite usar aquí en nuestra ruta la descripción
‫general y las plantillas de recorrido en lugar de usar la base.
‫Pero aún así, por supuesto, usando todo este
‫HTML que tenemos aquí.
‫Bien, espero que ahora tenga sentido.
‫De hecho, sigamos adelante y probemos esto.
‫Solo voy a copiar la URL.
‫Así que ahora escribamos una descripción general.
‫Y así, de hecho, obtenemos el h1 que dice Esta
‫es la descripción general del recorrido.
‫Y de hecho usemos también la variable de título
‫que pasamos a estas plantillas.
‫Recuerde que aquí tenemos el título Todos
‫los recorridos en la descripción general, y luego, en el
‫recorrido, tenemos The Forest Hiker.
‫Pongamos eso en el título.
‫De hecho, podemos hacerlo aquí mismo
‫en la plantilla base.
‫Entonces, cuando aquí mismo
‫en la descripción general ampliamos la plantilla
‫base, la plantilla base todavía tiene acceso a los locales, por lo
‫tanto, a las variables, que pasamos a la plantilla.
‫Aquí, podemos hacer lo que hicimos antes,
‫entonces, interpolación con la variable, entonces con el local.
‫Entonces, todo lo que tenemos que hacer es poner el título aquí, así.
‫Y si ahora recargamos, verá
‫All Tours aquí en la parte superior.
‫Ahora intentemos la gira.
‫Y esta es la página de detalles del recorrido, y
‫aquí arriba puede ver The Forest Hiker Tour.
‫Ahora, si cargamos este, deberíamos obtener
‫ese marcador de posición que
‫pusimos en el bloque.
‫¿Recuérdalo?
‫Y, de hecho, este es el encabezado del marcador de posición.
‫Excelente.
‫Este es un mecanismo poderoso y muy importante para
‫que entendamos y usemos para todas las plantillas que
‫vamos a construir en el resto
‫de la sección.
‫En el siguiente video, finalmente limpiaremos
‫un poco este lío que tenemos aquí y refactorizaremos
‫todo este código
‫aquí en algunos archivos diferentes.