Como enlazar vistas en Pug con ExpressJS

Para poder implementar vistas en ExpressJS, te recomiendo pasar por este artículo primero antes de continuar:

Como crear vistas en ExpressJS

Ya domino el armado de vistas, dame algo mas difícil!

Cuando llamamos a las vistas a través del ruteo de ExpressJS usando pug, nos limitamos a hacerlo sobre una única página. Es lógico pensar que para crear mas vistas, debemos establecer rutas nuevas y llamarlas mediante la url. Pero armando un sitio web, necesitamos que esas urls se puedan llamar directamente desde enlaces en las vistas.

Empecemos armando las vistas!

Home y Contacto

Crearemos dos vistas pug. Una vista home (views/home.pug):

doctype html
html
  head
    title Home
  body
    a(href='#') Enlace a contacto

Y una vista Contacto (views/contact.pug):

doctype html
html
  head
    title Contacto
  body
    a(href='#') Enlace a home

Luego crearemos una ruta para cada vista:

app.get('/home', function (req, res) {
  res.render('home');
});

app.get('/contact', function (req, res) {
  res.render('contact');
});

La vista home debe enlazar a contacto mediante un link y viceversa. Y como estamos dentro del contexto de nuestro servidor, las url que generamos son:

Entonces para poder usar dicha ruta en nuestras vistas, es tan simple como cambiar el href de nuestros links. Por ejemplo en contact:

a(href='home') Enlace a home

Y en home:

a(href='contact') Enlace a Contactos

No necesitamos ni recomendamos usar la url completa dado que puede cambiar tanto de puerto como dirección.

Como ven es muy sencillo, y podemos enlazar todas las vistas que queramos siempre que tengamos el ruteo adecuado en nuestro index.js.

Seguinos en Facebook para conocer más acerca de Wolf Academy y conocer todos nuestros cursos online!

¡Deja un comentario!

Artículos relacionados

Cómo Migrar WordPress y Woocommerce con Azure

Las migraciones en WordPress siempre fueron un tema difícil de tratar. Las guías se centran en los backups locales pero no tanto en las restauraciones del lado del servidor. Los plugins en general tampoco ayudan demasiado: Apenas instalamos alguno, el backup es gratuito, pero la migración requiere un servicio premium. Por eso decidí armar esta guía, para resolver el dilema de una sola vez. Aclaro que si bien vamos a trabajar con Azure del lado del servidor, se puede hacer con cualquier otro VPS o Hosting siempre y cunado este nos permita una instalación previa de WordPress.

Mi experiencia con WordPress

Mi 2020 arrancó de una manera muy intensa. Debido a que me eligieron para preparar un programa académico de esta tecnología, reforcé mis conocimientos actuales y me introduje de lleno en nuevos e interesantes conceptos que trae esta plataforma de blogging y un poco más.

La Senda del Desarrollador Full Stack

Uno de los tópicos que más me consultan como profesor es “¿por dónde debería empezar?”. Hay muchas tecnologías y una demanda laboral muy alta que incrementó potencialmente estos últimos años. Por eso decidí crear esta guía que va a aplanar el camino a todo el que se inicie como desarrollador en este mismo instante. También reforzará a los experimentados.

Como popular una tabla en base a un servicio con Jquery

La idea es crear una tabla donde tengamos la lista de personajes de StarWars (obtenido con SWAPI) y podamos eliminar uno a uno. Lo primero que vamos a hacer es crear nuestro html e incluirle Bootstrap (Framework de maquetado) y Jquery

Como llamar a una API desde Jquery

Como llamar a una API desde Jquery

Jquery es una librería que nos ayuda a simplificar muchas funcionalidades que existen en Vanilla Javascript pero que son mas complicadas de implementar en esta última.