Экспресс-Шаблоны

Express способен работать с серверными обработчиками шаблонов.

Шаблонизаторы позволяют нам добавлять данные в представление и динамически генерировать HTML-код.

Экспресс использует Jade по умолчанию. Jade – это старая версия Pug, в частности Pug 1.0.

Название было изменено с Jade на Pug из-за проблемы с товарным знаком в 2016 году, когда проект выпустил версию 2. Вы все еще можете использовать Jade, он же Pug 1.0, но в дальнейшем лучше всего использовать Pug 2.0

Хотя последней версии Jade исполнилось 3 года (на момент написания статьи, лето 2018 года), она по-прежнему используется по умолчанию в Express по соображениям обратной совместимости.

В любом новом проекте вы должны использовать Pug или другой движок по вашему выбору. Официальный сайт Мопса – это https://pugjs.org/ .

Вы можете использовать множество различных движков шаблонов, включая Pug, Руль, усы, JS и многое другое.

Использование Мопса

Чтобы использовать Pug, мы должны сначала установить его:

npm install pug

и при инициализации приложения Express нам нужно установить его:

const express = require('express')
const app = express()
app.set('view engine', 'pug')

Теперь мы можем начать писать наши шаблоны в файлах .pug .

Создайте представление о программе:

app.get('/about', (req, res) => {
  res.render('about')
})

и шаблон в представлениях/о.мопс :

p Hello from Flavio

Этот шаблон создаст тег p с содержимым Привет от Флавио .

Вы можете интерполировать переменную с помощью

app.get('/about', (req, res) => {
  res.render('about', { name: 'Flavio' })
})

p Hello from #{name}

Это очень краткое введение в Pug в контексте его использования с Express. Посмотрите руководство Pug для получения дополнительной информации о том, как использовать Pug.

Если вы привыкли к механизмам шаблонов, которые используют HTML и интерполируют переменные, такие как Handlebars (описано далее), у вас могут возникнуть проблемы, особенно когда вам нужно преобразовать существующий HTML в Pug. Этот онлайн конвертер из HTML в Jade (который очень похож, но немного отличается от Pug) будет вам отличным подспорьем: https://jsonformatter.org/html-to-jade

Также смотрите Различия между Нефритом и Мопсом

Использование Руля

Давайте попробуем использовать Руль вместо Мопса.

Вы можете установить его с помощью npm install hbs .

Поместите файл шаблона about.hbs в папку представления/ :

Hello from {{name}}

а затем используйте эту экспресс-конфигурацию для ее обслуживания на /о :

const express = require('express')
const app = express()
const hbs = require('hbs')

app.set('view engine', 'hbs')
app.set('views', path.join(__dirname, 'views'))

app.get('/about', (req, res) => {
  res.render('about', { name: 'Flavio' })
})

app.listen(3000, () => console.log('Server ready'))

Вы также можете визуализировать приложение React на стороне сервера , используя пакет express-react-views .

Начните с нпм установить экспресс-реагировать-представления реагировать реагировать-дом .

Теперь вместо того, чтобы требовать нвс нам требуются экспресс-реакции/| и мы используем их в качестве движка, используя файлы jsx :

const express = require('express')
const app = express()

app.set('view engine', 'jsx')
app.engine('jsx', require('express-react-views').createEngine())

app.get('/about', (req, res) => {
  res.render('about', { name: 'Flavio' })
})

app.listen(3000, () => console.log('Server ready'))

Просто поместите файл about.jsx в представления/| и вызовите /о должен представить вам строку "Привет от Флавио":

const React = require('react')

class HelloMessage extends React.Component {
  render() {
    return 
Hello from {this.props.name}
  }
}

module.exports = HelloMessage

Оригинал: “https://flaviocopes.com/express-templating/”