Использование движков шаблонов в Express¶

Движок шаблонов позволяет использовать в приложении статические файлы шаблонов. Во время выполнения движок подставляет в шаблон реальные значения переменных и преобразует его в HTML, который отправляется клиенту. Такой подход упрощает разработку HTML-страниц.

Express application generator по умолчанию использует Pug, но также поддерживает Handlebars, EJS и другие движки.

Чтобы рендерить шаблоны, задайте в app.js (созданном генератором) следующие параметры приложения:

views — каталог, где лежат шаблоны. Например: app.set('views', './views'). По умолчанию это каталог views в корне приложения.
view engine — используемый движок шаблонов. Например, для Pug: app.set('view engine', 'pug').

Затем установите соответствующий npm-пакет движка шаблонов. Например, для Pug:

$ npm install pug --save

Движки шаблонов, совместимые с Express (например, Pug), экспортируют функцию __express(filePath, options, callback), которую res.render() вызывает для рендеринга шаблона.

Некоторые движки не следуют этой конвенции. Библиотека @ladjs/consolidate приводит популярные движки Node.js к этому формату, поэтому бесшовно работает с Express.

После настройки view engine не нужно явно указывать движок или загружать его модуль в приложении — Express подгружает модуль сам:

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

Далее создайте файл шаблона Pug index.pug в каталоге views со следующим содержимым:

html
  head
    title= title
  body
    h1= message

Создайте маршрут, который рендерит index.pug. Если свойство view engine не задано, нужно указывать расширение файла view. В противном случае его можно опустить.

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

При запросе главной страницы файл index.pug будет отрендерен в HTML.

Кэш движка шаблонов кэширует не итоговый HTML, а сам шаблон. Даже при включенном кэше представление рендерится заново для каждого запроса.

Использование движков шаблонов в Express¶

Комментарии