Express能够处理服务器端的模板引擎。模板引擎允许我们向视图添加数据，并动态地生成HTML。
Express能够处理服务器端的模板引擎。
模板引擎允许我们将数据添加到视图中，并动态地生成HTML。
Express默认使用Jade。Jade是Pug的旧版本，特别是Pug 1.0。
由于商标问题，该项目在2016年发布了第二版，名字从Jade改为Pug。你仍然可以使用Jade，也就是Pug 1.0，但是往后，最好使用Pug 2.0
虽然Jade的最后一个版本已经3年了（在撰写本文时，即2018年夏天），但出于向后兼容的原因，它仍然是Express中的默认版本。
在任何新项目中，你应该使用Pug或你选择的其他引擎。Pug的官方网站是pugjs.org/。
你可以使用许多不同的模板引擎，包括Pug、Handlebars、Mustache、EJS等等。
使用Pug
要使用Pug，我们必须首先安装它。
并在初始化Express应用程序时，我们需要设置它。
const express = require('express')
const app = express()
app.set('view engine', 'pug')
现在我们可以开始在.pug 文件中编写我们的模板。
创建一个关于视图。
app.get('/about', (req, res) => {
res.render('about')
})
和views/about.pug 中的模板。
p Hello from Flavio
这个模板将创建一个p 标签，内容为Hello from Flavio 。
你可以使用插值变量
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
也请看Jade和Pug的区别
使用Handlebars
让我们尝试使用Handlebars而不是Pug。
你可以使用npm install hbs 来安装它。
在views/ 文件夹中放一个about.hbs 模板文件。
Hello from {{name}}
然后使用这个 Express 配置在/about 上提供服务。
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包。
从npm install express-react-views react react-dom 开始。
现在我们不再需要hbs ，而是需要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 文件放在views/ ，调用/about 应该会呈现一个 "Hello from Flavio "字符串。
const React = require('react')
class HelloMessage extends React.Component {
render() {
return <div>Hello from {this.props.name}</div>
}
}
module.exports = HelloMessage
