Pug 是一款强大的模板引擎，它可以将 HTML 模板转换为高度优化的 JavaScript 函数，从而在浏览器中渲染出 HTML 页面。在前端开发中，Pug 的使用非常普遍。但其实，在后端开发中，Pug 也同样具有非常多的优势。
本文将会深入介绍如何在 Express.js 中使用 Pug 模板引擎。我们将从 Pug 的安装、Express.js 与 Pug 的结合、Pug 模板引擎的常见语法等方面详细介绍，希望可以帮助你更好地使用 Pug 模板引擎。
Pug 的安装
在开始使用 Pug 模板引擎之前，我们需要先将其安装到项目中。可以使用 npm 命令进行安装：
--- ------- --- ------
安装完成后，我们可以在项目中引入 Pug 模板引擎：
----- --- - ---------------
这样就完成了 Pug 模板引擎的安装。接下来，我们就可以开始探索 Pug 模板引擎在 Express.js 中的使用了。
Express.js 与 Pug 的结合
在 Express.js 中使用 Pug 模板引擎非常简单，我们只需要做如下几个步骤：
- 在 Express.js 中设置模板引擎：
----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ---------------- -----------
在上面的代码中，我们通过 set() 方法设置了模板引擎为 Pug，同时设置了 Pug 模板文件所在的文件夹为 ./views。
- 创建 Pug 模板文件：
在 ./views 目录下创建一个 index.pug 文件，内容如下：
----
----
------ -----
----
--- -------在上面的代码中，我们使用了 Pug 的语法来定义了 HTML 的结构，title 和 message 分别为传入 Pug 模板的变量。
- 在 Express.js 中使用 Pug 模板引擎：
在 Express.js 中，我们使用 res.render() 方法来渲染 Pug 模板，比如将 index.pug 这个模板文件渲染出来，代码如下：
------------ ----- ---- -- - ------------------- - ------ -------- -------- -------- -- -- ------ --- ---
在上面的代码中，我们调用了 res.render() 方法将 index 模板文件渲染出来，同时将 title 和 message 两个变量传递给了 Pug 模板，这样就完成了 Pug 模板引擎在 Express.js 中的结合。
Pug 模板引擎的常见语法
在上面的例子中，我们已经初步了解了 Pug 模板引擎的语法，接下来我们就来介绍一些 Pug 模板引擎的常见语法：
标签
在 Pug 中，我们可以用以下语法定义标签：
--- - ----
上述语法分别定义了 div、p 和 span 这三个标签。
如果我们需要为标签添加类名、id、属性等等，可以使用以下语法：
------------------------------------- -- -------
上述语法定义了一个类名为 my-class，id 为 my-id，并且还定义了一个 data-attr 属性，其值为 value。p 标签中使用了等号，表示将 message 变量的值塞到标签中。
变量
在 Pug 中，我们可以使用以下语法定义变量：
- --- ----- - ------- -- -----
上述语法定义了一个名为 myVar 的变量，并将其值赋为 'Hello'。p 标签中使用了等号，表示将 myVar 变量的值塞到标签中。
还可以通过 #{} 语法来将变量嵌套到标签中：
- ------- -- -------- -----
上述语法将 myVar 变量的值嵌套到了 p 标签中。
条件语句与循环语句
在 Pug 中，我们也可以使用条件语句和循环语句。以下是一些示例代码：
-- ----- --- ------- - ---- ------ ---- - ---- --- -------- ---- ---- -- ------ --- ----
上述代码中，if 语句用于判断 myVar 的值是否为 'Hello'，each 语句用于循环遍历 myList 数组中的所有元素，并输出为列表。
总结
在本文中，我们详细介绍了如何在 Express.js 中使用 Pug 模板引擎，包括 Pug 的安装、Express.js 与 Pug 的结合，以及 Pug 模板引擎的常见语法等方面的内容。希望这篇文章可以帮助你更好地使用 Pug 模板引擎，提高后端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a2116648841e9894e57a7d