Express 模板

Express 可以处理服务器端模板引擎。模板引擎允许我们向视图中添加数据，并根据数据动态生成 HTML。

Express 默认使用 Jade 作为模板引擎，但 Jade 是 Pug 的旧版，具体来说是 Pug 1.0。

由于商标问题，该项目在 2016 年发布了 2.0 版本时将名称从 Jade 更改为 Pug。你仍然可以使用 Jade，即 Pug 1.0，但未来最好使用 Pug 2.0。

尽管 Jade 的最后一个版本已经有三年时间了（截至文章撰写时的夏季 2018），但在 Express 中仍然是默认设置，这是为了向后兼容。

在任何新项目中，你应该使用 Pug 或其他你选择的引擎。Pug 的官方网站是 https://pugjs.org/。

你可以使用许多不同的模板引擎，包括 Pug、Handlebars、Mustache、EJS 等。

使用 Pug

首先我们需要安装 Pug:

1	npm install pug

在初始化 Express 应用程序时，我们需要设置 Pug：

1
2
3

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

现在我们可以开始在 .pug 文件中编写模板了。

创建一个关于页面的视图：

1
2
3

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

然后在 views/about.pug 中创建模板：

1	p Hello from Flavio

这个模板会生成一个带有内容为 Hello from Flavio 的 p 标签。

你可以使用变量插值：

1
2
3

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

1	p Hello from #{name}

以上是一个关于如何在 Express 中使用 Pug 的简单介绍。如果想了解有关如何使用 Pug 的更多信息，请参考 Pug 指南。

如果你习惯使用使用 HTML 和变量插值的模板引擎，比如 Handlebars（后面会描述），那么在你需要将现有的 HTML 转换为 Pug 时可能会遇到一些问题。这个在线转换器可以帮助你将 HTML 转换为 Jade（比 Pug 稍微有些不同）： https://jsonformatter.org/html-to-jade

也可以参考 Jade 和 Pug 的区别

使用 Handlebars

让我们尝试使用 Handlebars 而不是 Pug。

你可以使用 npm install hbs 进行安装。

将一个 about.hbs 模板文件放在 views/ 文件夹中：

1	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'))

你还可以使用 express-react-views 包来 服务器端渲染 React 应用程序。

开始使用 npm install express-react-views react react-dom 进行安装。

现在，我们需要 require express-react-views 替代 hbs 并将其作为引擎，可以使用 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

tags: [“express”, “templates”, “pug”, “handlebars”]