Skip to content

Documentação Pug

Jump to bottom
Gabriel Tibúrcio edited this page Jul 6, 2017 · 2 revisions

Pug (anteriormente chamado Jade) é a template engine que o projeto utiliza em conjunto com o express para gerar as páginas html. Utiliza-se uma linguagem de templates pois queremos carregar informações do banco de dados em nossas páginas HTML, para isso o express envia as informações da rota para o arquivo .pug, que renderiza as informações como HTML para nós. 👏

Para utilizar em nosso projeto, devemos primeiro dizer ao express que queremos o pug como template engine:

// configuração de template engine
app.set('views', path.join(__dirname, 'views')); // Essa é a pasta onde deixamos nossos arquivos .pug
app.set('view engine', 'pug'); // Aqui dizemos ao express que queremos o pug como view engine

Podemos então definir uma rota no express que passará um objeto javascript como informação disponível para o arquivo .pug da seguinte forma:

app.get('/', function (req, res) {
  res.render('index', {
    titulo: 'Início',
    usuarioAtual: 'tibuurcio'
  });
});

Ao visitar o caminho '/', o express irá procurar um arquivo chamado index.pug, que pode ser escrito assim:

doctype html
html
  head
    title= titulo
  body
    h2 Bem vindo #{usuarioAtual}!

No arquivo .pug, podemos utilizamos as variáveis titulo e usuarioAtual passadas pela função de rota do express, e teremos o seguinte código HTML como resultado:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Início</title>
  </head>
  <body>
    <h2>Bem vindo tibuurcio!</h1>
  </body>
</html>

Como o arquivo .pug ainda não é html, podemos executar javascript ao colocar um - antes do código:

- for (var x = 0; x < 3; x++)
  li item

Resulta em

<li>item</li>
<li>item</li>
<li>item</li>

Estruturas condicionais:

- var media = 7.1
div
  if media > 7.0
    p Você foi aprovado 👍!
  else
    p Você foi reprovado 🙅‍♂️!

Resultado:

<div>
  <p>Você foi aprovado 👍!</p>
</div>

Plataforma LoP

Clone this wiki locally