Usando Templates Parciais no Pug no Express com Node.js

Templates Parciais

O Pug permite inserir um template dentro de outro. Por exemplo, vamos definir um novo arquivo chamado footer.pug na pasta views do projeto:

<footer><p>MyCorp - Copyright © 2024</p></footer>

Vamos incluí-lo no arquivo contact.pug:

<!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>Email ausente</h3>
    <p>Telefone: #{phone}</p>
        
    include footer.pug
        
</body>
</html>

Para incluir um template parcial, utilizamos a diretiva include, seguida pelo caminho do template a ser incluído.

O arquivo da aplicação app.js permanece o mesmo do tema anterior:

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"));

Templates Parciais no Pug em Express e Node.js

Dessa forma, podemos definir vários templates e incluí-los em diferentes partes de um template padrão.

Layout

Diversos templates podem compartilhar blocos de interface, como o rodapé. Se quisermos alterar o texto no rodapé, precisaríamos modificar o código em todos os templates onde o rodapé é usado. Isso não é eficiente. Nesse caso, é melhor usar páginas mestre ou layouts, que permitem definir blocos de interface comuns para outros templates.

Por exemplo, adicionamos um novo arquivo layout.pug na pasta views:

<!DOCTYPE html>
<html>
<head>
    block title
    <meta charset="utf-8" />
</head>
<body>
    block content
    include footer.pug
</body>
</html>

Usamos a diretiva block para definir blocos onde será inserido algum conteúdo. No momento da definição desse template, não sabemos o que será esse conteúdo. Ele será definido em outros templates que usarão esse layout. Neste exemplo, definimos dois blocos com os nomes title e content.

Assim como em qualquer template, podemos incluir outros templates. Aqui, incluímos o rodapé de footer.pug, que geralmente é um elemento comum para a maioria das páginas do site.

Agora, definimos o template contact.pug, que usará esse layout:

extends layout.pug
 
block title
    <title>#{title}</title>
    
block content
        
    <h1>#{title} em Pug</h1>
    if emailsVisible
        <h3>Endereços de Email</h3>
        <ul>
            each email in emails
                <li>#{email}</li>
        </ul>
    else
        <h3>Email ausente</h3>
    <p>Telefone: #{phone}</p>

Para usar a página mestre em um template, aplicamos a diretiva extends, seguida pelo caminho do arquivo.

Como a página mestre define dois blocos, title e content, neste caso, definimos o conteúdo para cada um desses blocos. Esse conteúdo será inserido nos locais correspondentes na página mestre.

my-express-app/
│
├── views/
│   ├── layout.pug
│   ├── footer.pug
│   └── contact.pug
│
├── app.js
│
├── package.json
│
└── node_modules/