Criando Layouts com express-ejs-layouts

Adicionar a tag style resolve os problemas temporariamente. Porém, pensando no futuro, existirão telas que possuem a mesma estilização e não seria vantajoso criar uma tag style para cada um dos arquivos e, ao ter de fazer uma alteração, sair alterando em todos eles. Então, nesta aula, veremos como criar um estilo fixo para as páginas e assim, se preocupar em alterar apenas um único arquivo.

Utilizando o express-ejs-layout

Para lidar com essas questões, usaremos a ferramenta express-ejs-layout.

Instale executando o seguinte comando no terminal:

    npm install express-ejs-layouts

Após instalado, acompanhe a aula e modifique o arquivo index.js para configurar a aplicação e fazer uso dessa ferramenta. As configurações feitas devem ficar como se vê abaixo:

    const express = require('express')
    const rotaUsuario = require('./rotas/usuario.rota')
    const rotaPost = require('./rotas/posts.rota')
    var expressLayouts = require('express-ejs-layouts')

    const app = express()

    app.use(express.json())
    app.set('view engine', 'ejs')

    app.set('layout', 'layouts/layout')

    app.use(expressLayouts)

    app.use('/static', express.static('public'))

    app.use('/usuarios', rotaUsuario)
    app.use('/posts', rotaPost)

Criando o layout

Na pasta views, crie uma pasta layout e dentro um arquivo chamado layout.ejs. Após isso, coloque nesse arquivo todo o código HTML presente na página, removendo apenas o conteúdo do body, que será substituído por uma variável. O código ficará conforme se vê abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMD</title>
    <style>
        body {
            background-color: aquamarine;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        h1 {
            background-color:cornflowerblue;
            color: white;
            font-weight: 400;
            padding: 15px;
        }
    </style>
</head>
<body>
    <%- body %>
</body>
</html>

Atualizando o conteúdo da página

Após criado o layout, ele ficará fixo e a única coisa que mudará será o conteúdo da tag body, que já foi substituído por uma variável, a qual será, durante a execução, substituída pelo corpo da página.

Então, acompanhe a aula e altere os arquivos das páginas retirando todo o HTML e adicionando uma nova instrução no início para que todo código após ela seja exibido no corpo da página. Os arquivos, ao final, devem ficar dessa forma:

alunos/index.js:

    <%- contentFor('body') %>
    <h1>Alunos</h1>
    <ul>
            <%  alunos.forEach( function (aluno) { %>
                    <li><%=aluno.nome%></li>
            <% }) %>
    </ul>

cursos/index.js

    <%- contentFor('body') %>
    <h1>Cursos</h1>
            <ul>
            <%  cursos.forEach( function (curso) { %>

                    <% if (curso.ch > 300) { %>
                            <li><%=curso.nome%> (<%=curso.ch%>)</li>
                    <% } else { %>
                            <li><%=curso.nome%> (<b><%=curso.ch%></b>)</li>
            <% }})  %>
    </ul>

Termo de uso

arrow_back Aula 10 - View Engines