在 Node.js 生态系统中，Express.js 无疑是最受欢迎的 Web 框架之一。而 Pug（以前称为 Jade）则是非常流行的 Node.js 模板引擎之一。Pug 模板极其灵活，易于使用，因此在前端开发中大受欢迎。本文将介绍如何在 Express.js 应用程序中使用 Pug 模板引擎。
安装 Pug
在使用 Pug 之前，需要先安装它。我们可以通过 npm 包管理器进行安装：
npm install pug --save
集成 Pug 到 Express.js
安装 Pug 后，将其整合进 Express.js 应用程序就像在应用程序中设置任何其他中间件一样。以下是如何实现：
const express = require('express')
const app = express()
app.set('view engine', 'pug')
app.get('/', function (req, res) {
res.render('index')
})第一个 app.set() 语句设置视图引擎为 Pug。这意味着在 res.render() 时，应用程序将使用 Pug 来呈现 HTML 页面。第二个语句匹配应用程序根路径，并呈现 index.pug 模板。
在 Pug 中使用数据
要将数据传递到 Pug 模板中，可以将对象传递给 res.render()。例如：
app.get('/', function (req, res) {
res.render('index', { title: 'My App', message: 'Hello!' })
})在模板中，可以使用以下方式访问这些数据：
doctype html
html
head
title= title
body
h1= message嵌入式 JavaScript
Pug 还支持嵌入式 JavaScript。例如，以下代码在模板中使用了一个简单的循环：
ul
each item in items
li= item模板中还支持其他 JavaScript 语法，如 if 语句、switch 语句等。
继承和块
Pug 还支持模板继承和块。模板继承可以帮助您避免重复，块可以使您在页面中重用代码。以下是示例代码：
-- -------------------- ---- -------
-- --------
------- ----
----
----
------ -----
----- ----
----
----- -------
----- -------
-- ---------
------- ----
----- ----
------------------------ ----------- ---- ---------
----- -------
--- -------
----- -------
--------------------在上面的示例中，base.pug 是子模板的根。index.pug 继承 base.pug，并覆盖了 head、content 和 scripts 块。这使得在将来更改时，可以轻松地在整个网站上更改共同块。
结论
Pug 是功能完整、易于使用、具有表现力的模板引擎，经常被用于 Express.js 应用程序中。本文介绍了如何在 Express.js 应用程序中使用 Pug，并展示了一些 Pug 的强大功能。现在，您可以开始使用 Pug 构建更强大的 Express.js 应用程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa45a9d22ea7cbf2ab91af