如何在 Express 中使用 Pug (Jade) 模板引擎？

推荐答案

在 Express 中使用 Pug 模板引擎的步骤如下：

1. 安装 Pug：首先需要在项目中安装 Pug 模板引擎。

   npm install pug

2. 设置模板引擎：在 Express 应用中设置 Pug 为默认的模板引擎。

   const express = require('express');
   const app = express();
   
   // 设置模板引擎为 Pug
   app.set('view engine', 'pug');
   
   // 设置模板文件存放的目录
   app.set('views', './views');

3. 创建 Pug 模板文件：在 views 目录下创建一个 Pug 模板文件，例如 index.pug。

   // views/index.pug
   doctype html
   html
     head
       title My Express App
     body
       h1 Welcome to My Express App
       p This is a Pug template.

4. 渲染模板：在路由处理函数中使用 res.render() 方法来渲染 Pug 模板。

   app.get('/', (req, res) => {
     res.render('index', { title: 'My Express App' });
   });

5. 启动服务器：最后启动 Express 服务器。

   const PORT = 3000;
   app.listen(PORT, () => {
     console.log(`Server is running on http://localhost:${PORT}`);
   });

本题详细解读

1. 安装 Pug

Pug 是一个高性能的模板引擎，专门为 Node.js 设计。通过 npm 安装 Pug 后，Express 应用就可以使用它来渲染 HTML 页面。

2. 设置模板引擎

在 Express 中，app.set('view engine', 'pug') 这行代码告诉 Express 使用 Pug 作为默认的模板引擎。app.set('views', './views') 则指定了模板文件存放的目录为 ./views。

3. 创建 Pug 模板文件

Pug 模板文件使用 .pug 扩展名，并且语法简洁。Pug 使用缩进来表示 HTML 标签的嵌套关系，这使得模板文件更加易读和易维护。

4. 渲染模板

在路由处理函数中，res.render('index', { title: 'My Express App' }) 这行代码会渲染 index.pug 模板，并将 { title: 'My Express App' } 作为数据传递给模板。Pug 模板可以使用这些数据来动态生成 HTML 内容。

5. 启动服务器

最后，通过 app.listen() 方法启动 Express 服务器，监听指定的端口。当用户访问根路径时，服务器会渲染并返回 index.pug 模板生成的 HTML 页面。

通过以上步骤，你就可以在 Express 应用中成功使用 Pug 模板引擎来渲染动态 HTML 页面了。