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

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

Некоторые популярные движки шаблонов, которые работают с Express, это Pug, Mustache и EJS. Генератор приложения Express использует Jade по умолчанию, но также поддерживает несколько других.

См. Двигатели шаблонов (вики Express) для списка движков шаблонов, которые вы можете использовать с Express. Также см. Сравнение движков шаблонов JavaScript: Jade, Mustache, Dust и другие.

Примечание: Jade был переименован в Pug. Вы можете продолжать использовать Jade в своем приложении, и оно будет работать нормально. Однако если вы хотите получить последние обновления движка шаблонов, вам необходимо заменить Jade на Pug в вашем приложении.

Для отрисовки файлов шаблонов установите следующие свойства настроек приложения, установленные в app.js в приложении по умолчанию, созданном генератором:

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

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

$ npm install pug --save

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

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

После установки движка представлений вам не нужно указывать движок или загружать модуль движка шаблонов в ваше приложение; 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.

Примечание: кэш движка представлений не кеширует содержимое выходных данных шаблона, а только сам шаблон. Представление все равно перерисовывается при каждом запросе, даже при включенном кэше.

Чтобы узнать больше о том, как работают движки шаблонов в Express, см.: “Разработка движков шаблонов для Express”.

© 2017 StrongLoop, IBM, and other expressjs.com contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v3.0.
https://expressjs.com/en/guide/using-template-engines.html