在前端开发中，使用模板引擎可以使页面的构建更加高效便捷。在 Express.js 中，Pug（以前叫做Jade）是一种流行的模板引擎，具有简洁、易读和易维护的特点。在这篇文章里，我们将学习如何在 Express.js 中使用 Pug 模板引擎来渲染页面。
安装 Pug
首先，我们需要安装 Pug。可以通过 npm 安装，具体命令如下：
npm install pug --save
配置 Pug
安装完 Pug 后，我们还需要用 Express.js 集成 Pug。做法很简单，只需在服务器代码中添加以下代码：
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
// ...其中，app.set('view engine', 'pug')告诉 Express.js 使用 Pug 作为视图引擎。app.set('views', __dirname + '/views')指示 Express.js 在 views 文件夹中查找视图文件。
创建模板文件
现在，我们可以开始创建 Pug 模板文件了。在 views 文件夹下新建一个 index.pug 文件，这是我们将要渲染的模板文件。
html
head
title My Express.js Pug Page
body
h1 Welcome to my Pug page!
p This is a paragraph.这是一个非常基本的示例，但足以表示 Pug 的核心思想：缩进代表元素层次结构。比如，title 元素是 head 元素的子元素，因此在 Pug 文件中，title 要缩进两个空格。
渲染模板文件
现在我们要在服务器端将模板文件渲染成 HTML。为此，我们需要在 Express.js 中为路由添加一个处理程序。在这个处理程序中，通过调用 res.render() 方法将 Pug 模板渲染成 HTML。
app.get('/', (req, res) => {
res.render('index');
});这里实现的路由处理程序指示 Express.js 渲染位于 views/index.pug 文件的模板。注意，我们不需要在 res.render()方法中添加 .pug 扩展名。
在 Pug 模板中插入动态数据
此时的页面还是一份静态文档，而我们经常需要向模板中插入动态数据。在 Pug 中，我们可以通过 #{variable} 语法来插入动态数据。
为了说明这个，我们先创建一个路由，从而可以动态地向模板中传递一些数据：
app.get('/', (req, res) => {
res.render('index', { title: 'My Express.js Pug Page', message: 'Hello Pug' });
});现在，在 index.pug 中，我们可以通过 #{title} 和 #{message} 分别获取传递来的数据。下面是更改后的 index.pug 文件：
html
head
title #{title}
body
h1 #{message}
p This is a paragraph.循环和条件语句
有时，我们需要在模板中写循环和条件语句。在 Pug 中，我们可以使用 for、each 和 if 语句来实现。
例如，我们可以使用 each 循环来迭代并显示一个数组：
-- -------------------- ---- -------
------------ ----- ---- -- -
----- ----- - -
- ------ --- ---- - ------------- ------- ------- ---- --
- ------ ------- ------- ------- ------- --
- ------ ---- ----- -------- ------- --- ----- ----------- --
- ------ ---- ------- ----- -- ---------- ------- -------- ------ -------- -
--
------------------- - ----- ---
---然后，在 index.pug 中，我们可以使用 each 来迭代并显示这个数组：
-- -------------------- ---- -------
----
----
----- --------
----
-- ----------
--
---- ---- -- -----
--- ---------- - - -- - - -----------
- ---- -- - ----------在此示例中，我们首先将一个包含书籍的数组传递给模板，然后使用 each 迭代每个书籍。在每个循环迭代中，我们可以通过 book.title 和 book.author 访问每本书的信息。
类似地，我们可以使用 if 条件语句来根据不同条件显示不同的内容。
总结
在 Express.js 中使用 Pug 模板引擎渲染页面是一项有用的技能。在本文中，我们学习了如何在 Express.js 中配置 Pug、创建模板文件、渲染模板文件以及向模板中插入动态数据、编写循环和条件语句。希望这些技巧能够帮助您更加高效地构建 Web 应用程序。
完整代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------- -------- -------
---------------- --------- - ----------
------------ ----- ---- -- -
----- ----- - -
- ------ --- ---- - ------------- ------- ------- ---- --
- ------ ------- ------- ------- ------- --
- ------ ---- ----- -------- ------- --- ----- ----------- --
- ------ ---- ------- ----- -- ---------- ------- -------- ------ -------- -
--
------------------- - ------ --- ---------- --- ------ -------- ------ ----- ----- ---
---
---------------- -- -- -
---------------- --------- -- ---- --------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddfcfff6b2d6eab3948e71