在 Express.js 中，使用 Pug（以前称为 Jade）模板引擎可以轻松地构建动态网站。Pug 使用缩进语法代替传统的 HTML 标记语法，使得模板更加简洁和易于维护。本文将详细介绍如何在 Express.js 中使用 Pug 模板引擎。
安装 Pug
首先，我们需要在项目中安装 Pug。可以通过 npm 安装：
--- ------- --- ------
配置 Express.js
在使用 Pug 之前，需要在 Express.js 中进行配置。在 app.js 文件中添加以下代码：
----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ---------------- -----------
这段代码告诉 Express.js 使用 Pug 作为默认的模板引擎，并将模板文件存储在项目根目录下的 views 文件夹中。
编写 Pug 模板
接下来，我们可以开始编写 Pug 模板了。例如，以下是一个简单的模板，用于显示网站上的标题和欢迎消息：
----
----
------ -----
----
--- -------这个模板使用缩进语法来代替 HTML 标记。在模板中，我们可以使用变量和控制流语句来动态生成内容。
渲染 Pug 模板
最后，我们需要在 Express.js 中渲染 Pug 模板。在路由处理程序中，可以使用 res.render() 方法来渲染模板。例如，以下是一个简单的路由，用于渲染上面的模板：
------------ ------------- ---- - ------------------- - ------ ------------- -------- -------- -- -- --------- --- ---
这个路由处理程序将 index.pug 模板渲染为 HTML，并将 title 和 message 作为变量传递给模板。在模板中，可以使用这些变量来生成动态内容。
示例代码
最终，以下是一个完整的 Express.js 应用程序，用于演示如何使用 Pug 模板引擎：
----- ------- - ------------------- ----- --- - ---------- -- -- --- ---- ------------- -------- ------- ---------------- ----------- -- ---- ------------ ------------- ---- - ------------------- - ------ ------------- -------- -------- -- -- --------- --- --- -- ----- ---------------- ---------- - ------------------- --------- -- ---- ------- ---
在此示例中，我们定义了一个路由，用于渲染名为 index.pug 的模板。在模板中，我们使用了变量和缩进语法来生成动态内容。最终，我们启动了服务器并监听端口 3000。
总结
通过使用 Pug 模板引擎，我们可以轻松地构建动态网站并生成动态内容。在 Express.js 中，使用 Pug 非常简单，只需要进行简单的配置和渲染即可。希望本文对您有所帮助，祝您在学习和使用 Express.js 和 Pug 模板引擎时顺利！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6556cfc4d2f5e1655d12df41