Template Engine Pug no Express com Node.js

Pug é outra template engine que podemos usar em conjunto com o Express.

Para usar o Pug, adicionamos os pacotes necessários com o seguinte comando:

npm install pug --save

No arquivo app.js, definimos o seguinte código:

const express = require("express");

const app = express();

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

app.use("/contact", function (request, response) {
  response.render("contact", {
    title: "Meus contatos",
    emailsVisible: true,
    emails: ["gg@mycorp.com", "lol@mycorp.com"],
    phone: "+1234567890",
  });
});

app.use("/", function (request, response) {
  response.send("Página principal");
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

O código é praticamente idêntico ao usado para outros motores de templates, exceto que estamos configurando o Pug como template engine:

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

Em seguida, adicione um novo arquivo contact.pug na pasta views do projeto:

<!DOCTYPE html>
<html>
<head>
    <title>#{title}</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>#{title} no Pug</h1>

    if emailsVisible
        <h3>Endereços de email</h3>
        <ul>
            each email in emails
                <li>#{email}</li>
        </ul>
    else
        <h3>Nenhum endereço de email disponível</h3>
    <p>Telefone: #{phone}</p>
</body>
</html>

Para trabalhar com dados dentro dos elementos HTML, usamos as tags #{expressão}:

<p>Telefone: #{phone}</p>

Para definir estruturas condicionais e loops, basta colocá-los em uma nova linha:

if emailsVisible
    <h3>Endereços de email</h3>
    <ul>
        each email in emails
            <li>#{email}</li>
    </ul>
else
    <h3>Nenhum endereço de email disponível</h3>

Os recuos determinam qual código pertence ao loop ou à construção condicional. O loop é representado pela expressão each variável in array, onde, ao iterar sobre o array, a variável conterá o objeto atual sendo iterado. No exemplo acima, ao iterar sobre o array emails, cada objeto será colocado na variável email, cujo valor é então exibido na página.

Ao acessar o endereço /contact, a aplicação gera uma página web:

O Pug permite simplificar a definição de marcação HTML. O exemplo acima pode ser reescrito da seguinte maneira:

Template Engine Pug em Express e Node.js

<!DOCTYPE html>
<html>
<head>
    <title>#{title}</title>
    <meta charset="utf-8" />
</head>
<body>
    h1 #{title} no Pug

    if emailsVisible
        h3 Endereços de email
        ul
            each email in emails
                li=email
    else
        h3 Nenhum endereço de email disponível
    p Telefone: #{phone}
</body>
</html>

Basta colocar o nome do elemento HTML na linha e definir seu conteúdo. O conteúdo dos elementos é definido pelos recuos. No exemplo acima, elementos como body, head e html também podem ser simplificados dessa forma. Ou seja, podemos definir toda a página web nesse estilo.

Se o elemento HTML aceitar apenas um valor do modelo como conteúdo, podemos simplificar o código assim: li=email.

Além do loop each..in, também podemos usar o loop while:

- let n = 0;
ul
  while n < 4
    li= n++

Também é possível iterar sobre objetos:

ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val