使用 Pug 模板引擎进行视图渲染

在 Node.js 开发中，模板引擎是一个重要的组成部分，它允许开发者将动态数据与 HTML 结构结合，从而生成最终的网页。Pug（原名 Jade）是一个流行的模板引擎，以其简洁的语法和强大的功能而受到广泛欢迎。在本教程中，我们将深入探讨如何在 Node.js 应用中使用 Pug 模板引擎进行视图渲染。

1. Pug 模板引擎简介

Pug 是一个高性能的模板引擎，使用缩进来表示 HTML 的层级结构，避免了传统 HTML 中的冗长标签。Pug 的语法简洁明了，易于阅读和维护。

优点

简洁的语法：Pug 使用缩进而非闭合标签，使得代码更为简洁。
可读性强：由于其简化的语法，Pug 模板通常比等效的 HTML 更易于理解。
强大的功能：支持条件语句、循环、混合（mixins）等功能，能够生成复杂的 HTML 结构。
可扩展性：可以通过自定义混合和过滤器来扩展 Pug 的功能。

缺点

学习曲线：对于习惯于传统 HTML 的开发者，Pug 的缩进语法可能需要一些时间来适应。
调试困难：由于 Pug 编译成 HTML，调试时可能不如直接使用 HTML 直观。

2. 安装 Pug

在开始之前，我们需要确保已经安装了 Node.js 和 npm。接下来，我们可以通过 npm 安装 Pug。

npm install pug

3. 创建一个简单的 Node.js 应用

我们将创建一个简单的 Node.js 应用，使用 Express 框架来处理 HTTP 请求，并使用 Pug 作为模板引擎。

3.1 初始化项目

首先，创建一个新的项目文件夹并初始化 npm：

mkdir pug-example
cd pug-example
npm init -y

3.2 安装 Express

接下来，安装 Express：

npm install express

3.3 创建应用结构

创建以下文件结构：

pug-example/
├── views/
│   └── index.pug
├── app.js
└── package.json

3.4 编写 `app.js`

在 app.js 中，我们将设置 Express 应用并配置 Pug 作为模板引擎。

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 设置 Pug 作为模板引擎
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { title: '欢迎使用 Pug', message: '这是一个使用 Pug 模板引擎的示例！' });
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

3.5 编写 `index.pug`

在 views/index.pug 中，我们将定义一个简单的 Pug 模板。

doctype html
html
    head
        title= title
    body
        h1= message
        p 这是一个使用 Pug 模板引擎的示例页面。

3.6 运行应用

在终端中运行以下命令启动应用：

node app.js

打开浏览器并访问 http://localhost:3000，你应该能看到渲染的页面。

4. Pug 的高级特性

4.1 条件语句

Pug 支持条件语句，可以根据不同的条件渲染不同的内容。

- var isLoggedIn = true

doctype html
html
    head
        title= title
    body
        if isLoggedIn
            h1 欢迎回来！
        else
            h1 请登录

4.2 循环

Pug 也支持循环，可以用来渲染列表。

- var items = ['苹果', '香蕉', '橙子']

doctype html
html
    head
        title= title
    body
        ul
            each item in items
                li= item

4.3 混合（Mixins）

混合是 Pug 的一个强大特性，可以定义可重用的模板片段。

mixin userCard(name, age)
    .user-card
        h2= name
        p 年龄: #{age}

doctype html
html
    head
        title= title
    body
        +userCard('小明', 25)
        +userCard('小红', 30)

4.4 过滤器

Pug 允许使用过滤器来处理文本，例如 Markdown。

doctype html
html
    head
        title= title
    body
        h1 这是一个标题
        | 这是一些普通文本。
        //- 使用 Markdown 过滤器
        markdown.
            # 这是一个 Markdown 标题
            - 列表项 1
            - 列表项 2

5. 注意事项

缩进：Pug 使用缩进来表示层级关系，确保使用一致的空格或制表符。
调试：在开发过程中，使用 pug 的 pretty 选项可以生成更易读的 HTML，方便调试。
安全性：在渲染用户输入的数据时，确保进行适当的转义，以防止 XSS 攻击。

6. 总结

Pug 是一个功能强大的模板引擎，适合用于 Node.js 应用的视图渲染。通过其简洁的语法和强大的功能，开发者可以快速构建动态网页。在本教程中，我们介绍了 Pug 的基本用法、高级特性以及在 Node.js 应用中的集成方式。希望这篇教程能帮助你更好地理解和使用 Pug 模板引擎。