在 Express.js 中，使用 Pug（以前称为 Jade）模板引擎可以轻松地构建动态网站。Pug 使用缩进语法代替传统的 HTML 标记语法，使得模板更加简洁和易于维护。本文将详细介绍如何在 Express.js 中使用 Pug 模板引擎。
安装 Pug
首先，我们需要在项目中安装 Pug。可以通过 npm 安装：
npm install pug --save
配置 Express.js
在使用 Pug 之前，需要在 Express.js 中进行配置。在 app.js 文件中添加以下代码：
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', './views');这段代码告诉 Express.js 使用 Pug 作为默认的模板引擎，并将模板文件存储在项目根目录下的 views 文件夹中。
编写 Pug 模板
接下来，我们可以开始编写 Pug 模板了。例如，以下是一个简单的模板，用于显示网站上的标题和欢迎消息：
html
head
title= title
body
h1= message这个模板使用缩进语法来代替 HTML 标记。在模板中，我们可以使用变量和控制流语句来动态生成内容。
渲染 Pug 模板
最后，我们需要在 Express.js 中渲染 Pug 模板。在路由处理程序中，可以使用 res.render() 方法来渲染模板。例如，以下是一个简单的路由，用于渲染上面的模板：
app.get('/', function(req, res) {
res.render('index', { title: 'Express.js', message: 'Welcome to my website!' });
});这个路由处理程序将 index.pug 模板渲染为 HTML，并将 title 和 message 作为变量传递给模板。在模板中，可以使用这些变量来生成动态内容。
示例代码
最终，以下是一个完整的 Express.js 应用程序，用于演示如何使用 Pug 模板引擎：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
// 配置 Pug 模板引擎
app.set('view engine', 'pug');
app.set('views', './views');
// 定义路由
app.get('/', function(req, res) {
res.render('index', { title: 'Express.js', message: 'Welcome to my website!' });
});
// 启动服务器
app.listen(3000, function() {
console.log('Server listening on port 3000');
});在此示例中，我们定义了一个路由，用于渲染名为 index.pug 的模板。在模板中，我们使用了变量和缩进语法来生成动态内容。最终，我们启动了服务器并监听端口 3000。
总结
通过使用 Pug 模板引擎，我们可以轻松地构建动态网站并生成动态内容。在 Express.js 中，使用 Pug 非常简单，只需要进行简单的配置和渲染即可。希望本文对您有所帮助，祝您在学习和使用 Express.js 和 Pug 模板引擎时顺利！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556cfc4d2f5e1655d12df41