‫Instructor: En esta conferencia, quiero mostrarle muy rápidamente
‫una característica que realmente tenemos en todos
‫los lenguajes de programación.
‫Solo debemos incluir un archivo y, en este
‫caso, una plantilla en otra plantilla.
‫Entonces, digamos que queríamos mantener
‫nuestro diseño base aquí realmente
‫limpio sin ningún contenido.
‫Entonces, lo que haremos es poner todo el código
‫del encabezado en un archivo de encabezado.
‫Y luego incluye ese archivo aquí mismo.
‫Y lo mismo también para el pie de página.
‫Y entonces, nuestro bloque de contenido,
‫básicamente nuestro cuerpo aquí
‫se convierte en este elemento muy limpio solo con estas
‫inclusiones y luego este contenido aquí por ahora.
‫Bueno.
‫Entonces, nuevamente, creemos un nuevo archivo aquí para el encabezado.
‫dot pug
‫Y de hecho me gusta prefijar estos archivos que solo sirven
‫para ser incluidos con un guión bajo.
‫Y si está familiarizado con algo
‫como Sass, entonces eso también le resultará familiar.
‫Bien, ahora agreguemos y peguemos esto aquí, y no
‫este código, así
‫que supongo que olvidé copiarlo o cortarlo.
‫Y luego pégalo aquí.
‫Y ahora esta sangría está mal aquí,
‫porque ahora tenemos como tres niveles, como
‫pueden ver, entonces, uno, dos,
‫tres niveles donde este código debería estar aquí.
‫Bien, y ahora tenemos que agregar y arreglar eso, pero lo
‫que realmente podemos hacer en lugar de hacerlo manualmente es usar
‫una extensión agradable que haga este trabajo por nosotros.
‫Así que aquí, en la pestaña de
‫mi extensión, déjame mostrarte la extensión a la que me refiero.
‫Y eso se llama Pug embellecer.
‫De acuerdo, adelante e instale este paquete, está bien.
‫Y una vez que
‫haya hecho eso, puede simplemente
‫seleccionar todo el código aquí presionando el comando-A y luego
‫crear un comando de Código VS diciendo comando-shift-P.
‫Y luego aquí, escribe pug.
‫Y entonces esto embellecerá el barro amasado.
‫Y ves que también tienes el atajo aquí
‫y no estoy seguro si este es el predeterminado,
‫pero al menos en mi caso puedo usar el atajo
‫también para embellecer este código.
‫Pero de todos modos, al
‫escribir pug, debería obtener esta selección aquí ahora.
‫Y si luego presiona enter, como puede
‫ver, arreglará la sangría que estaba mal en este archivo.
‫¿Está bien?
‫Así que déjelo guardar, ciérrelo
‫y regresemos aquí.
‫Y ahora todo lo que tenemos que hacer es decir include _header.
‫Y lo mismo para el pie de
‫página, así que cortémoslo aquí, creemos una nueva plantilla ...
‫_footer
‫péguelo, selecciónelo, command-shift-P
‫o probablemente en Windows que es
‫control-shift-P y luego, en realidad,
‫el último que se usó
‫aparecerá aquí en la selección.
‫Entonces, presiona regresar y listo.
‫Eso también está arreglado ahora.
‫Incluir...
‫pie de página.
‫Y observe que ni siquiera necesitamos volver a
‫especificar la extensión dot pug.
‫Así que déjelo guardar y cuando
‫lo recarguemos ahora debería verse exactamente igual.
‫Bueno, en realidad no, porque estos botones de
‫aquí, como que se desplazaron
‫hacia abajo, dejaron esta barra de navegación.
‫O en realidad, este encabezado, así que eso no es
‫correcto, tal vez fue
‫algún problema con esta sangría automática aquí en el encabezado.
‫Y sí, en realidad eso no es
‫correcto porque todo esto debería estar dentro del encabezado.
‫Entonces, esta navegación, este div y esta navegación deberían
‫estar todos al mismo nivel.
‫Y ahora eso es correcto.
‫Solo para asegurarnos, también revisemos el pie de página.
‫Pero aquí, en realidad es correcto, por
‫lo que no estoy seguro de qué salió mal en esta situación.
‫Pero de todos modos, intentémoslo de nuevo ahora.
‫Y aquí vamos.
‫De todos modos eso es simplemente incluir algunos archivos, uno
‫dentro del otro.
‫En el siguiente video, haremos
‫algo un poco similar, pero al mismo tiempo más complejo y también más útil.
‫Entonces, si tienes curiosidad sobre qué es eso,
‫únete a mí en el siguiente.