概述
在 Web 开发过程中，模板引擎是非常重要的一环。传统的 HTML 模板缺乏动态渲染的能力，无法动态生成页面，难以应对实时性要求高的场景。而 Pug（旧名 Jade）作为一种高度优化的模板引擎，被广泛应用于 Express.js 的 Web 开发中。本文将探讨如何在 Express.js 中使用 Pug 模板引擎进行动态渲染。
安装 Pug
首先，我们需要在项目中安装 Pug。使用以下命令可以轻松完成安装：
--- ------- ---
配置 Express.js
安装好 Pug 后，我们需要配置 Express.js 以支持使用 Pug 模板引擎。在 Express.js 应用中，使用以下代码进行 Pug 配置：
----- ------- - ------------------- ----- --- - ---------- ---------------- ----------- ------------- -------- -------
其中 app.set('views', './views') 的作用是设置视图文件夹的路径，即在这个目录下的文件将可以被 Pug 引擎渲染。而 app.set('view engine', 'pug') 的作用是设置将要使用的模板引擎为 Pug。
常用语法
在 Pug 模板中，我们可以使用以下常用语法：
变量
我们可以在 Pug 模板中使用 JavaScript 变量：
--- -----
这里，title 是一个变量，会被动态渲染为网页标题。
循环
我们可以使用 for...in 循环语句，例如：
--
---- --- -- ----
--- ---条件
我们可以使用 if...else 语句，例如：
-- ----- - -- - -- ---- -- ----- - -- - -- ---- -- ----- - -- - -- ---- - ---
示例代码
接下来，我们将给出一个完整示例代码：
----- ------- - -------------------
----- --- - ----------
-- --- --
---------------- -----------
------------- -------- -------
-- --
------------ ----- ---- -- -
----- ---- - -
------ ---- ------
----- -------- ------- --------
--
------------------- ------
---
-- -----
---------------- -- -- -
-----------------------
---这个示例代码中，我们在开启服务器的主页（即根地址 /）上返回一个渲染好的 Pug 模板。为了能够让 Pug 模板引擎正常工作，我们必须将数据传递给渲染函数 res.render('index', data)。其中 'index' 指定了要使用的模板文件（在视图文件夹中），data 则是传递到模板中的数据对象。
下面是渲染模板文件 /views/index.pug 的示例代码：
----
----
------ -----
----
--- -----
--
---- --- -- ----
--- ---这个模板文件中使用了一些常见的语法，用于渲染出一个包含列表和标题的页面。
总结
在本文中，我们介绍了如何在 Express.js 中使用 Pug 模板引擎进行动态渲染。通过学习 Pug 的常用语法，我们可以快速构建出网站的各个部分，并实时响应用户的请求。希望读者可以通过本文对 Pug 模板引擎的使用有一个更深入的了解。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64771dc7968c7c53b03adf93