在前端开发中，使用模板引擎可以大大提高开发效率，减少重复的 HTML 内容。而 Node.js 和 Pug 组合可以让开发者更方便地创建 HTML 模板。本文将介绍使用 Node.js 和 Pug 实现 HTML 模板引擎的步骤及具体细节。
前置条件
在开始使用 Node.js 和 Pug 实现 HTML 模板引擎前，需要先确保开发者已经正确安装了 Node.js、npm 和 Pug。下面分别介绍如何安装。
安装 Node.js
Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境，可以使 JavaScript 在后端运行。使用 npm 安装 Node.js 十分方便。根据自己的操作系统，打开终端（或命令提示符），输入以下命令即可安装 Node.js：
# Linux 或 Mac OS X sudo apt-get install nodejs # Windows https://nodejs.org/en/download/
安装 npm
npm 是 Node.js 的包管理工具。使用以下命令安装 npm：
npm install npm -g
安装 Pug
在 Node.js 环境下，使用以下命令安装 Pug：
npm install pug --save
安装完成后，就可以开始使用 Node.js 和 Pug 实现 HTML 模板引擎了。
实现步骤
- 首先创建项目文件夹，新建一个
index.js文件，用于接受请求并渲染 HTML 页面。
mkdir pug-demo cd pug-demo touch index.js
- 在
index.js文件中引入依赖包并监听端口：
const express = require('express');
const app = express();
const pug = require('pug');
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});- 编写 Pug 模板文件，在
views文件夹下新建一个index.pug文件，并添加以下内容：
html
head
title Pug 模板引擎
body
h1 Pug 模板引擎
p 这是 Pug 模板引擎渲染的 HTML 页面。- 在
index.js文件中设置视图引擎，并添加路由，将 Pug 模板渲染为 HTML 页面：
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.render('index');
});- 启动应用，可以看到在浏览器中访问
http://localhost:3000页面已经成功渲染。
node index.js
深入探讨
Pug 的语法
- 使用缩进代替标签：Pug 采用缩进标识代码块，而非使用 HTML 那样的尖括号。
div p Some text
- 省略闭合标签：与 HTML 不同，Pug 可以省略标签的闭合标记，例如下面这段代码中的 p 标签后没有闭合标签。
div p Some text
- 使用数组或对象来创建属性
img(src='logo.png', alt='Logo')
- 为标签添加类名和 ID
div.container#main p Hello World.
- 使用变量
- const name = "Pug"
div.container
p #{name} 模板引擎模板继承
Pug 还支持模板继承，使用继承可以避免重复代码并降低代码复杂度。具体实现方法如下：
- 在
layout文件夹下新建一个layout.pug文件，并定义基础布局：
html
head
title= title
body
block content可以看到这里使用了 block 关键字定义了一个块，其中块名为 content，同时此块可以在子模板中被覆盖。这样就可以通过继承模板的形式，让多个页面具有相同的基础布局。
- 在
views文件夹下新建一个home.pug文件，继承layout.pug，并自定义相应部分：
extends layout
block content
div
p This is home page.可以看到，通过 extends 关键字让 home.pug 继承了 layout.pug，并覆盖了 content 块，添加了自定义内容。在使用继承时，对于需要覆盖基础模板内容的部分，只需要定义对应的块即可。剩下部分则会自动继承 layout.pug 中的内容。
路由和控制器
在上述实现步骤中，我们使用了一个简单的路由，并在路由处理程序中使用 res.render 方法渲染了 index.pug 页面。实际应用中我们可能需要更多路由以及控制器层来处理复杂的业务逻辑。
例如，在应用中我们需要处理一个用户列表页面及用户详情页面，可以按照以下步骤进行实现：
- 在
routes目录下新建一个user.js文件，添加路由处理程序：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
--------------- ----- ---- -- -
----------------------- -
------ ------- -------- --------
---
---
------------------ ----- ---- -- -
----- ---- - - ----- ------ ---- -- --
------------------------- - ---- ---
---
-------------- - -------可以看到，我们在 / 路由和 /:id 路由下分别定义了处理程序，实现了用户列表和用户详情页面。
- 在
app.js文件中添加路由：
const userRoutes = require('./routes/user');
app.use('/users', userRoutes);可以看到，通过 app.use 方法，将 user.js 中定义的路由挂载到了 /users 下。
- 编写对应视图文件，我们需要创建
user目录以存放用户相关的模板文件。
用户列表模板 list.pug 文件：
extends layout
block content
div.users
each user in users
p #{user}用户详情模板 detail.pug 文件：
extends layout
block content
div.user
p #{user.name}
p #{user.age}渲染结果可以在浏览器中访问 http://localhost:3000/users 和 http://localhost:3000/users/:id，查看效果。
总结
通过本文的学习，我们可以了解到如何使用 Node.js 和 Pug 实现 HTML 模板引擎，以及如何通过继承实现复用代码，如何使用控制器进行路由管理。同时，还可以进一步深入学习 Pug 的语法及高级特性，应用在实际开发中，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed780df6b2d6eab37a053f