Traduzir esta página

Usando mecanismos de template com o Express

Um motor de template permite que você use arquivos de template estáticos na sua aplicação. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. Esta abordagem torna mais fácil projetar uma página HTML.

The Express application generator uses Pug as its default, but it can generate apps configured for Handlebars-compatible engines such as hbs, EJS, among others.

For apps created by the generator, these settings are added to the generated app.js. For apps you create without the generator, set the following application setting properties yourself:

  • views, o diretório onde se localizam os arquivos de template. Ex: app.set('views', './views'). Isto é padrão para o diretório views no diretório raiz do aplicativo.
  • ver engenho, o mecanismo de modelos a ser usado. Por exemplo, para usar o motor de template Pug: app.set('engenharia de visualização', 'pug').

Then install the corresponding Express-compatible template engine npm package; for example to install Pug:

Terminal window
npm install pug --save

Mecanismos de template compatíveis com o código, como Pug exporta uma função chamada __express(filePath, opções, callback), que res.render() chama para renderizar o código de template.

Alguns motores de modelos não seguem esta convenção. A biblioteca @ladjs/consolidate segue esta convenção mapeando todos os mecanismos de modelo populares de Node.js e, portanto, funciona perfeitamente dentro do Express. For example, install hbs or any other Express-compatible Handlebars view engine instead of the raw handlebars package by itself.

Depois que o motor de visualização estiver definido, você não precisa especificar o motor ou carregar o módulo de mecanismo de modelo no seu aplicativo; Expresso carrega o módulo internamente, por exemplo:

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

Em seguida, crie um arquivo de template Pug chamado index.pug no diretório views, com o seguinte conteúdo:

html
  head
    title= title
  body
    h1= message

Crie uma rota para renderizar o arquivo index.pug. Se a propriedade view engine não estiver definida, você deve especificar a extensão do arquivo view. Caso contrário, você pode omitir.

app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' });
});

Quando você faz uma solicitação à página inicial, o arquivo index.pug será processado como HTML.

O cache do motor de exibição não armazena o conteúdo da saída do modelo, apenas o modelo subjacente em si. A visualização ainda é renderizada novamente com todas as requisições, mesmo que o cache esteja ativo.