Express.js 中使用 Pug 模板引擎的实例

阅读时长 3 分钟读完

Pug 是一种适用于 Node.js 和浏览器的模板引擎,它可以简化 HTML 的构建过程,并提供了更好的抽象层次和更丰富的功能,例如条件语句、迭代、混合、继承等等。在 Express.js 中,我们可以使用 Pug 来构建我们的视图模板。

下面是一个使用 Pug 模板引擎的 Express.js 应用程序的示例:

应用程序配置

首先,我们需要在模块导入中添加 pug 模块,并配置 Express.js 应用程序以使用 Pug 模板引擎:

在上面的示例中,我们通过 app.set 方法来设置视图引擎和视图目录。视图引擎设置为 Pug,视图目录设置为 './views'。

视图创建

接下来,我们需要创建一个简单的视图文件,其中包含 Pug 的语法。我们可以在视图文件中添加一些变量、条件语句和循环语句等等。例如,我们可以创建一个名为 index.pug 的视图文件,并按照以下方式添加一些 Pug 代码:

在上面的示例中,我们在网页的 head 标签中添加了一个 title,并在 body 标签中添加了一条消息。我们可以使用 = 符号来插入变量值,这些变量值将由 Express.js 传递给视图。

路由设置

现在,我们需要在 Express.js 中设置一个路由,该路由将渲染我们的视图。我们需要将视图文件名作为参数传递给 res.render 方法,并传递一个对象,该对象包含了视图中需要的变量值。例如,我们可以设置一个名为 / 的根路由,并在其中添加以下代码:

在上面的示例中,我们使用 res.render 方法来渲染 index.pug 视图文件,并将 titlemessage 变量传递给视图。

完整代码示例

在这里是一个完整的 Express.js 应用程序示例,它使用 Pug 模板引擎来渲染视图:

-- -------------------- ---- -------
----- ------- - ------------------
----- --- - --------------

----- --- - ---------

------------- -------- ------
---------------- ----------

------------ -------- ----- ---- -
  ------------------- - ------ ------- -------- -------- -------- -- -- --------- --
--

---------------- -------- -- -
  ------------------- ------- -- ------------------------
--

总结

在本文中,我们已经学习了如何在 Express.js 中使用 Pug 模板引擎来构建视图模板。通过使用 Pug,我们可以简化 HTML 的构建过程,提高代码的可读性,并且在视图中添加更多的抽象层次和更丰富的功能。希望本文对你有所帮助!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c0c40183d39b488151e08d

纠错
反馈