‫Instructor: En esta
‫lección, aprenderá los fundamentos del trabajo con plantillas Pug.
‫Así que abramos nuestra plantilla base aquí y comencemos.
‫Entonces, en esencia, Pug es una sintaxis simple sensible a espacios en blanco
‫para escribir html, así que esa es realmente la esencia de lo que es.
‫Ahora, lo que eso significa es que
‫todo lo que usamos para escribir elementos html es su nombre y sangría
‫en nuestro código.
‫Así que comencemos por
‫configurar una estructura html muy simple aquí, así
‫que danos algo de espacio.
‫Y así, html generalmente siempre comienza con el tipo de
‫documento y un html.
‫Por lo tanto, para poder trabajar correctamente con Pug, por supuesto,
‫debe tener algunos conocimientos de html; de
‫lo contrario, esto podría no tener mucho sentido para usted.
‫Pero aún así, si no sabe
‫html, no se preocupe, puede seguir lo que estoy haciendo aquí y
‫tal vez leer un
‫artículo sobre cómo comenzar con html
‫porque es realmente muy simple.
‫De todos modos, siempre comenzamos con
‫doctype y luego con el primer elemento, por lo que
‫el elemento general en todos nuestros documentos html es siempre el html,
‫luego dentro de eso generalmente hay un elemento head.
‫Entonces, en Pug para
‫decir que un elemento está dentro del otro, todo
‫lo que hacemos es usar una etiqueta.
‫Entonces usamos sangría, como mencioné al principio, y eso
‫es todo.
‫Así que ese es nuestro elemento principal, y dentro de ese
‫encabezado, creemos el título de la página web.
‫Y así, otra etiqueta más.
‫Así que
‫título, y digamos Natours.
‫De acuerdo, nuevamente solo sangría, luego el nombre
‫del elemento html y luego el
‫contenido en sí.
‫Sin etiquetas de apertura, sin etiquetas
‫de cierre y sin el desorden que normalmente tenemos en html.
‫Así que realmente me gusta esta sintaxis aquí para
‫escribir documentos html, así que
‫la encuentro realmente asombrosa, realmente simple de usar y
‫de leer también.
‫De todos modos, ese es el contenido que queremos en la
‫cabeza, y ahora también queremos crear un cuerpo.
‫Ahora, ese cuerpo, por supuesto, no está dentro de la cabeza,
‫sino que está al mismo nivel que la
‫cabeza, por lo que básicamente también es un hijo directo de html.
‫Entonces, todo lo que tenemos que hacer es retroceder un nivel de sangría
‫y luego crear el elemento allí.
‫Luego, allí queremos nuestro h1, y
‫ahora necesitamos usar un poco más de sangría.
‫Entonces, por supuesto, no aquí, no aquí, sino aquí,
‫dentro del cuerpo.
‫Agreguemos también un párrafo,
‫y para eso usamos el elemento p diciendo
‫algo como, esto es solo un texto.
‫Así que probemos eso ahora en nuestro navegador, así
‫que recargue, y aquí vamos.
‫Muy bien, y aquí puedes ver la estructura
‫completa que acabamos de crear con el tipo de documento, el elemento
‫html y, por supuesto, la cabeza y el cuerpo allí.
‫Y también ves que ese título realmente aparece aquí.
‫Genial, a continuación incluiremos también un archivo CSS y
‫también el favicon que se mostrará
‫aquí en lugar de esta página genérica allí.
‫Entonces, si conoces algo de
‫html, sabrás que ese tipo de cosas pertenecen aquí a la cabeza.
‫Entonces, ¿cómo incluirías realmente una hoja de estilo CSS
‫con html normal?
‫Harías algo como esto.
‫Entonces, crearía un elemento de enlace, luego
‫definiría que es una hoja de estilo,
‫y luego también
‫la referencia, así como así.
‫Entonces estilo CSS. css, y
‫lo que tenemos aquí, esto y esto son atributos.
‫Y así, con Pug, escribimos atributos como este.
‫Entonces, en lugar de
‫tener este elemento, simplemente escribimos enlace, y luego
‫escribimos estos atributos entre paréntesis, así.
‫Entonces, sin ningún espacio y paréntesis abiertos,
‫y luego es
‫donde escribimos estos atributos así.
‫Y siempre debemos escribirlos con comillas simples y
‫no dobles, por
‫lo que ya no necesitamos este aquí.
‫Ahora, una cosa que también quería
‫decirte es que también podemos usar HTML normal en Pug.
‫Entonces, si quisiera, podría dejar esta línea
‫de código aquí y Pug lo entendería perfectamente.
‫Pero, por supuesto, aquí quería
‫mostrarles cómo podemos definir atributos con Pug.
‫Y ahora hagamos lo mismo con el favicon,
‫y nuevamente necesitamos un elemento de enlace,
‫y allí definiremos algunos atributos.
‫Entonces definimos que este es un ícono de
‫acceso directo, también especificamos su tipo, entonces imagen, y en
‫este caso es un
‫PNG, y luego nuevamente la referencia a
‫él, y es un favicon de imagen. png.
‫Y ahora vayamos y probemos eso,
‫y verá que esto realmente se ve un poco diferente.
‫Así que tenemos nuestro favicon,
‫y también nuestro texto ahora está muy bien apilado.
‫Y de hecho, verá algunas propiedades CSS apareciendo aquí ahora en
‫el lado izquierdo.
‫Y eso es, por supuesto, porque escribí una
‫tonelada de CSS en
‫realidad para esta aplicación, así que todo está en público, CSS y estilo.
‫Entonces, ves que tengo
‫como, no sé, como mil líneas o incluso más de CSS
‫que escribí solo para que esta aplicación
‫se vea tan hermosa como es.
‫Entonces, en otras palabras, ¿por qué este estilo? css en realidad
‫se carga automáticamente desde la carpeta CSS, y
‫el favicon también se carga automáticamente desde
‫la carpeta de imágenes.
‫Bueno, en primer lugar, tenga en cuenta que cada uno
‫de estos activos en realidad activa su propia
‫solicitud http, así que confirmemos eso aquí en las fuentes o
‫en el panel de red.
‫Y aquí ves estas tres solicitudes,
‫una para la página en sí, la otra para nuestro estilo
‫y para nuestro favicon.
‫Y de nuevo, ¿por qué funciona
‫así? Porque obviamente no tenemos un controlador de
‫ruta para ninguno de estos archivos aquí.
‫Pero sigue siendo una ruta si lo piensa bien,
‫porque es una solicitud de obtención a esta url
‫y también a esta url.
‫Permítanme recordar por qué esto realmente funciona, y
‫es debido a este middleware que
‫definimos en algún lugar aquí, así que esto aquí.
‫Así que recuerda eso usando express. static, básicamente definimos
‫que todos los activos estáticos siempre
‫se servirán automáticamente desde
‫una carpeta llamada pública, por lo que con esta carpeta aquí.
‫Y es por eso que cuando decimos estilo de barra css,
‫de hecho proviene de la carpeta pública.
‫Y entonces esta carpeta CSS es la carpeta dentro de public, y lo
‫mismo, por supuesto, para las imágenes.
‫Entonces, si en nuestro html tenemos un favicon de barra inclinada
‫de imagen, se abrirá la carpeta de
‫imágenes que está dentro de nuestra carpeta pública.
‫Nuevamente porque lo definimos así en nuestra aplicación expresa.
‫Entonces, ya aprendió cómo crear elementos
‫en Pug usando sangría
‫y también aprendió cómo usar atributos.
‫Pero otra cosa
‫realmente interesante es usar variables aquí.
‫Permítanme ahora mostrarles cómo podemos pasar datos a una
‫plantilla y luego cómo podemos usar esos datos aquí mismo
‫en Pug.
‫Así que recuerde que tenemos esta
‫ruta aquí, que usamos para renderizar nuestra plantilla base.
‫Y, por supuesto,
‫si es más tarde, en realidad tendremos
‫un archivo separado, donde estarán todas estas rutas.
‫Pero por ahora todo lo que quiero hacer es hacer que esto realmente funcione.
‫De todos modos, para pasar ahora datos a esta plantilla aquí,
‫todo lo que tenemos que hacer es definir
‫un objeto aquí y luego simplemente colocaremos algunos datos allí.
‫Y esos datos estarán disponibles en la plantilla Pug.
‫Así que simplemente creemos un objeto
‫aquí con una propiedad de recorrido y configurémoslo en The Forest Tiger, y
‫luego ...
‫también creemos una propiedad de usuario
‫y configurémosla en Jonas.
‫Y estas variables que pasamos aquí,
‫luego se llaman locales en el archivo Pug.
‫Así que ahora sigamos adelante y usemos esos datos.
‫Y lo que quiero hacer
‫ahora es poner esa variable tour en nuestro h1.
‫Básicamente, quiero crear un elemento h1, donde el contenido
‫es el nombre de la gira.
‫Y la forma más sencilla
‫de hacerlo es simplemente usar la sintaxis de igualdad de
‫esta manera, por lo que h1 es igual, luego un espacio y luego un recorrido.
‫Y eso es todo, eso es realmente todo lo que tenemos que hacer.
‫Así que saquemos este de
‫aquí, y en realidad otra cosa
‫que quería mostrarles es que en Pug, podemos crear
‫comentarios y podemos crear dos tipos de comentarios.
‫Entonces, el más simple es simplemente como en JavaScript,
‫así que así.
‫Y esto creará un
‫comentario que será visible en el html.
‫Así que ahora echemos un
‫vistazo a
‫esto, y tengamos en cuenta que ahora el h1 ya no
‫será The Park Camper, sino que debería ser The Forest
‫Hiker porque esa es la variable
‫del recorrido, o en otras palabras, el recorrido
‫local, que ahora pasó a esta plantilla.
‫Y aquí, luego puse
‫eso en el h1 usando la sintaxis de igualdad.
‫Así que veamos eso, echemos un
‫vistazo a esto.
‫Y de hecho ahora es The Forest Hiker.
‫Y también aquí está ese comentario del
‫que acabamos de hablar también.
‫Entonces, como dije, esa doble barra
‫que hicimos allí básicamente crea un comentario html.
‫Entonces, esta sintaxis es la forma en que escribimos comentarios en
‫html, pero si realmente desea que sea un comentario para el archivo Pug
‫pero no se envíe a html, debe
‫agregar un guión como este.
‫Entonces, si ahora volvemos a cargar esto, ese comentario debería desaparecer.
‫Así que este tipo de código aquí, que escribimos aquí,
‫se llama código almacenado en búfer.
‫Y en realidad también podríamos escribir algo de
‫JavaScript aquí, así que digamos que h2 es igual al usuario,
‫y luego también podemos llamar a toUppercase sobre eso.
‫JavaScript tan simple aquí porque
‫nuevamente aquí en este código almacenado en búfer,
‫que es como
‫se llama, podemos ejecutar JavaScript simple como lo hicimos aquí.
‫Así que aquí vamos, Jonas en mayúsculas.
‫Entonces código almacenado en búfer, y si tenemos código almacenado en
‫búfer, entonces también tenemos que tener código sin búfer.
‫Y así, básicamente, el código sin búfer es código
‫que no agregará nada a la salida.
‫Y escribimos eso escribiendo guión y luego
‫simplemente hagamos algo de JavaScript
‫aquí, por ejemplo, simplemente definiendo una variable.
‫Entonces, digamos que const x es igual a nueve, y luego
‫hagamos un código almacenado en búfer nuevamente.
‫Entonces, nuevamente el código que agregará algo a la salida.
‫Y, de nuevo, podemos usar JavaScript aquí,
‫así que hagámoslo dos veces x.
‫Y entonces aquí, tendremos acceso a esa variable x.
‫Así que debería ser 18 y de hecho lo es.
‫Así que esas son todas las pequeñas piezas de
‫código diferente que podemos usar en Pug.
‫Ahora, en realidad, también hay una tercera forma de escribir código, y
‫déjame mostrarte eso aquí.
‫Eso se llama interpolación, y en realidad
‫se parece un
‫poco a las cadenas de plantillas de ES6.
‫Entonces, en lugar de tener solo
‫Natours aquí, agreguemos también el
‫nombre de la gira, para que podamos hacerlo así.
‫Entonces, con la cadena de plantilla en ES6, funciona así, pero
‫aquí en Pug es con este hash,
‫así que así.
‫Y aquí tenemos que
‫hacerlo así básicamente porque esto es código, entonces es variable, pero
‫esto no es código, es simplemente texto.
‫Entonces, no podemos hacer esto porque todo lo que está
‫aquí se trata como JavaScript,
‫y dado que esto no es JavaScript, no funcionaría.
‫Entonces, esto aquí es solo una cadena,
‫por lo que si queremos agregar algo a esa
‫cadena, entonces necesitamos usar esta sintaxis de interpolación.
‫Vale, ¿tiene sentido?
‫Agreguemos como esta barra aquí, que también
‫es simplemente parte de la cadena.
‫Y ahora esperamos que Natours corte
‫a The Forest Hiker,
‫así que eso es exactamente lo que obtuvieron.
‫Genial, estos son los fundamentos de
‫trabajar con Pug.
‫Pero, por supuesto, hay mucho más que
‫aprender, así que sigamos
‫haciéndolo durante las próximas conferencias.