Creando nuestro layout de productos usando Pug

Clase 10 de 43 • Curso de Express.js 2018

Resumen

Para implementar templates con PUG, sólo bastará con instalar PUG con la instrucción npm i -D pug y definir el uso del view engine respectivo usando los middlewares de manera similar a como vimos antes con Handlebars.

PUG incluye instrucciones que facilitan el trabajo con las vistas:

extends: define un template base del que extiende el template actual.
include: define la inclusión o importación de otro template.
block: define un placeholder para el contenido de bloques en los que se insertarán partes de un template.

Para más información sobre el uso de PUG, Bulma y FontAwesome, recuerden consultar los enlaces adicionales de esta clase.

leonardo Oteca

student•

alguien mas pensó en esta Bulma?

Julián Andrés Vela Salazar

student•

Jajajaja tal cual

JAIME URQUIZU

student•

Mi perrita, en paz descanse, también se llamaba Bulma. Y, ay amigos, en carácter era igualita a la Bulma de Bola de Dragón... De ahí su nombre.

Carlos David Sanchez Moreno

student•

Bulma:

https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css

Font Awesome: en CSS

https://use.fontawesome.com/releases/v5.7.1/css/all.css

Alejandro Avalos Vaca

student•

gracias!

Gerardo Manuel Reyes Fernández

student•

Prefiero HTML limpio que pug.
Me gusta que la etiqueta de cierre sea el limitador del scope de cada elemento.

Freddy Córdova Arana

student•

me too

Carlos David Sanchez Moreno

student•

El problema con HTML puro es que al hacer proyectos grandes terminas repitiendo grandes cantidades de código.

Genessis Jimenez

student•

Había leído sobre Bulma pero nunca lo había usado. Es agradable que en los tutoriales utilicen herramientas alternativas a las típicas y que probablemente la mayoría de nosotros ya conocemos (en este caso Bootstrap).

Freddy Córdova Arana

student•

Estoy de acuerdo, siempre es bueno conocer otras alternativas.

Angelo Zambrano

student•

Les comparto mi diseño hecho con Tailwindcss:

Sebastián Pineda Duque

student•

Me gustaría un curso de Pug en Platzi.

Armando Rivera

student•

En el curso de preprocesadores lo puedes encontrar. Pug es un preprocesador para HTML. El curso también incluye Sass, Less y Stylus

Wilson Marino Pablo Mendez

student•

.card(style="overflow:hidden; border-radius:5px")

img(src= product.image style="height:100%; object-fit:cover; object-position:50% 30%")

Freddy Córdova Arana

student•

Links de las imagenes:

Red shoes
Black bike

Emmanuel Rodríguez

student•

Para aquellos puristas del CSS, stateofcss

Bien lo explica el profesor, se puede implementar cualquier tecnología que nos permita adaptarnos rápido.

Carlos Enrique Gonzalez Peña

student•

Donde esta el enlace al github de este proyecto?

Juan Antonio Baracat

student•

https://github.com/glrodasz/platzi-express

Carlos Enrique Ramírez Flores

student•

Excelente clase!! Bulma excelente y haber si pronto sacan a Vegeta!!

Luis Angel Rojas Estevez

student•

Cristian Córdova

student•

goku is coming!!

Alexis Ulises Barba Pérez

student•

Por fin, luego de un buen rato lo pude escribir todo en Handlebar. Les comparto:

index.js

const express = require("express");
const app = express();
const path = require("path");
const productsRouter = require("./routes/products");

var hbs = require("express-handlebars");

app.set("view engine", "hbs");

app.engine(
	"hbs",
	hbs({
		extname: "hbs",
		defaultView: "main",
		layoutsDir: __dirname + "/views/",
		partialsDir: __dirname + "/views/",
	})
);

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "hbs");

app.use("/products", productsRouter);

const server = app.listen(3000, function () {
	console.log(`Listening http://localhost:${server.address().port}`);
});

main.hbs (layout.pug):

<!doctype html>
<html lang="en-us">

    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device=width' initial-scale=1>
        <title> Octolion Shop</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
    </head>

    <body style="display: flex; min-height: 100vh; flex-direction: column;">
        <script defer src='https://use.fontawesome.com/releases/v5.7.1/css/all.css'></script>
        {{> navbar}}
        {{> hero}}
        {{> products}}
        {{> footer}}
    </body>

</html>

navbar.hbs

<nav class="navbar is-primary">
    <div class='container'>
        <div class='navbar-brand'>
            <a class='navbar-item'>
                <img src="https://bulma.io/images/bulma-logo-white.png" width='112' height='28' alt="">
            </a>
        </div>
        <div class='navbar-menu'>
            <div class='navbar-end'>
                <div class='navbar-item'>
                    <span class='icon is-large'>
                        <i class='fas fa-shopping-cart fa-2x'></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</nav>

hero.hbs

<section class="hero is-dark is-bold">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">Octolion Shop</h1>
            <h2 class='subtitle'>Find the best products a the best price</h2>
        </div>
    </div>
</section>

products.hbs (content.pug)

<div class='container' style='flex: 1; padding: 50px 0;'>
    <div class='columns is-multiline'>
        {{#each products}}
        <div class='column is-one-quarter'>
            <div class='card'>
                <div class='card-image'>
                    <figure class="image" style='height: 190px'>
                        <img src="{{image}}" style='height:100%; object-fit:cover;' alt="">
                    </figure>
                </div>
                <div class='card-content'>
                    <h1 class='title'>
                        {{name}}
                    </h1>
                    <div class='button is-fullwidth is-primary'>
                        <span class='icon'>
                            <i class='fas fa-shopping-cart'></i>
                        </span>
                        <span>Add to cart&nbsp;</span>
                        <strong>{{price}} USD</strong>
                    </div>
                </div>
            </div>
        </div>
        {{/each}}
    </div>
</div>

footer.hbs

<footer class='footer'>
    <div class='container'>
        <div class='level'>
            <div class='level-left'>
                <div class='level-item'>
                    <img src="https://bulma.io/images/bulma-logo.png" width='112' height='28' alt="">
                </div>
            </div>
            <div class='level-right'>
                <div class='level-item'>
                    <span class='icon is-large'>
                        <i class='fab fa-twitter fa-2x'></i>
                    </span>
                    <span class='icon is-large'>
                        <i class='fab fa-facebook fa-2x'></i>
                    </span>
                    <span class='icon is-large'>
                        <i class='fab fa-instagram fa-2x'></i>
                    </span>
                    <span class='icon is-large'>
                        <i class='fab fa-whatsapp fa-2x'></i>
                    </span>
                </div>
            </div>
        </div>
        <div class='divider has-text-grey-lighter' style='border-top:1px solid currentColor;padding-top:10px;'>
            <div class='level'>
                <div class='level-left'>
                    <div class='level-item has-text-grey'>
                        <small>Find the best products at the best price</small>
                    </div>
                </div>
                <div class='level-left'>
                    <div class='level-item has-text-grey'>
                        <small>Octolion 2020 | All rights reserved</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Tal vez no esté todo lo mejor aplicado posible pero es lo que me funcionó

Milton Cesar Catalan Parra

student•

Error: Cannot find module 'boom' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15) at Function.Module._load (internal/modules/cjs/loader.js:508:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (C:\Users\Milton\Desktop\express\ecommerce\index.js:4:14) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) [nodemon] app crashed - waiting for file changes before starting...

Guillermo Rodas

teacher•

boom ahora esta '@hapi/boom"

Alejandro González Reyes

student•

Al inicio no le encontraba sentido a los motores de plantillas, pero cuando llegué por primera vez a los frameworks vi todo su potencial. Pug es excelente, para mi es mas limpio. sin embargo cuando quieres dejar espacios en blanco al final o al inicio se pone rejego. Es importante analizar correctamente la documentación

Hector Esau

student•

Una preguntota ¿El uso de pug al tener menor cantidad de palabas se hace más rápida la transferencia de archivos o el archivo se transforma a un html de toda la vida y luego se transfiere?

Carlos Eduardo Gomez García

teacher•

¡Hola!, el archivo se transforma a un html de toda la vida y luego se transfiere. Recuerda que el navegador no entiende nada más que HTML puro y duro, eso significa que si tú tienes una aplicación hecha con PUG, React, Vue, Sass o cualquier otra de estas tecnologías raras que existen, eso el navegador no lo entiende, es por eso que muchas de estas tecnologías tienen consigo una especie de compilador que se encarga de traducir toooodo eso a los tipicos HTML, CSS y JavaScript de toda la vida :D

Hector Esau

student•

¿La carga que genera al servidor no es demasiada, al tener que crear el documento cada vez que se quiera consultar una algo en la app web?

JAVIER SANTIAGO SALGADO

student•

wow esta clase estuvo genial, me va a servir mucho para un proyecto que tengo

Mateo Nieto Hoyos

student•

El motor de plantilla de pug es muy sensillo y amigable. Me encanta!!

Sabrina Valerio Hidalgo

student•

Pug no es lo mío! Handlebars me gusta mucho más.

Wilson Castro Gil

student•

Bulma excelente alternativa

Favio Sauto

student•

Me gusta mucho Pug, lo veo como el Sass de HTML (usando los archivos con extensión .sass en lugar de .scss) tanto en Sass como en Pug se tiene que prestar atención a la identación, que creo que es uno de los principales problemas de los que empiezan a aprender Pug. Intenten crear un pequeño proyecto usando .sass y Pug para que vean que si usan ambos al mismo tiempo es una cosas muy sencilla! 😁

Armando Rivera

student•

Pug al igual que Sass es un preprocesesador. Sass para css Pug para HTML