Layout em Handlebars no Express com Node.js

O arquivo de layout ou página mestra permite definir o layout geral de todas as páginas web do site. Isso facilita muito a atualização do site e a definição e alteração de blocos de código comuns.

Para trabalhar com arquivos de layout, instalaremos no projeto o módulo express-handlebars com o seguinte comando:

npm install express-handlebars

Suponha que no projeto, na pasta views/partials, sejam definidos dois views parciais para o menu e o rodapé. O primeiro view é menu.hbs:

<nav><a href="/">Principal</a> | <a href="/contact">Contatos</a></nav>

E o segundo view é footer.hbs:

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

Vamos criar no projeto, na pasta views, um novo diretório chamado layouts e definir nele o arquivo layout.hbs, que definirá o layout do site:

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <meta charset="utf-8" />
</head>
<body>
    {{> menu}}

    {{{body}}}

    {{> footer}}
</body>
</html>
</code>

Aqui, são inseridos os views parciais menu.hbs e footer.hbs. Além disso, há uma expressão chamada {{{ body }}}, que será substituída pelo conteúdo de views específicos.

Em seguida, na pasta views, definiremos dois views comuns. O view contact.hbs:

<h1>{{ title }}</h1>
<p>Email: {{ email }}</p>
<p>Telefone: {{ phone }}</p>

E o view home.hbs:

<h1>Página Principal</h1>

Esses views não contêm elementos como body, head ou blocos comuns, pois todos eles estão definidos no arquivo layout.hbs.

Agora, vamos definir o seguinte arquivo app.js:

const express = require("express");
const expressHbs = require("express-handlebars");
const hbs = require("hbs");
const app = express();

// configurando as opções para arquivos de layout
app.engine(
  "hbs",
  expressHbs.engine({
    layoutsDir: "views/layouts",
    defaultLayout: "layout",
    extname: "hbs",
  })
);
app.set("view engine", "hbs");
hbs.registerPartials(__dirname + "/views/partials");

app.use("/contact", function (_, response) {
  response.render("contact", {
    title: "Meus Contatos",
    email: "gg@mycorp.com",
    phone: "+1234567890",
  });
});

app.use("/", function (_, response) {
  response.render("home.hbs");
});

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

Para usar arquivos de layout, é necessário configurar a engine hbs:

A função expressHbs.engine() configura a engine. Em particular, a propriedade layoutsDir define o caminho para a pasta de arquivos de layout em relação ao diretório raiz do projeto. A propriedade defaultLayout indica o nome do arquivo que será usado como página mestra. No nosso caso, é o arquivo layout.hbs, por isso especificamos o nome do arquivo sem a extensão. E a terceira propriedade, extname, define a extensão dos arquivos.

No final, todo o projeto ficará assim:

my-express-app/
├── node_modules/
├── views/
│   ├── layouts/
│   │   └── layout.hbs
│   ├── partials/
│   │   ├── menu.hbs
│   │   └── footer.hbs
│   ├── contact.hbs
│   └── home.hbs
├── app.js
├── package.json
└── package-lock.json

Exemplo de execução do aplicação:

Arquivos de layout no Handlebars no Express em Node.js

Partials de layout no Handlebars no Express em Node.js