Pug 是一种适用于 Node.js 和浏览器的模板引擎,它可以简化 HTML 的构建过程,并提供了更好的抽象层次和更丰富的功能,例如条件语句、迭代、混合、继承等等。在 Express.js 中,我们可以使用 Pug 来构建我们的视图模板。
下面是一个使用 Pug 模板引擎的 Express.js 应用程序的示例:
应用程序配置
首先,我们需要在模块导入中添加 pug
模块,并配置 Express.js 应用程序以使用 Pug 模板引擎:
const express = require('express') const pug = require('pug') const app = express() app.set('view engine', 'pug') app.set('views', './views')
在上面的示例中,我们通过 app.set
方法来设置视图引擎和视图目录。视图引擎设置为 Pug,视图目录设置为 './views'。
视图创建
接下来,我们需要创建一个简单的视图文件,其中包含 Pug 的语法。我们可以在视图文件中添加一些变量、条件语句和循环语句等等。例如,我们可以创建一个名为 index.pug
的视图文件,并按照以下方式添加一些 Pug 代码:
html head title= title body h1= message
在上面的示例中,我们在网页的 head
标签中添加了一个 title
,并在 body
标签中添加了一条消息。我们可以使用 =
符号来插入变量值,这些变量值将由 Express.js 传递给视图。
路由设置
现在,我们需要在 Express.js 中设置一个路由,该路由将渲染我们的视图。我们需要将视图文件名作为参数传递给 res.render
方法,并传递一个对象,该对象包含了视图中需要的变量值。例如,我们可以设置一个名为 /
的根路由,并在其中添加以下代码:
app.get('/', function (req, res) { res.render('index', { title: 'Hello, World!', message: 'Welcome to my website!' }) })
在上面的示例中,我们使用 res.render
方法来渲染 index.pug
视图文件,并将 title
和 message
变量传递给视图。
完整代码示例
在这里是一个完整的 Express.js 应用程序示例,它使用 Pug 模板引擎来渲染视图:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - -------------- ----- --- - --------- ------------- -------- ------ ---------------- ---------- ------------ -------- ----- ---- - ------------------- - ------ ------- -------- -------- -------- -- -- --------- -- -- ---------------- -------- -- - ------------------- ------- -- ------------------------ --
总结
在本文中,我们已经学习了如何在 Express.js 中使用 Pug 模板引擎来构建视图模板。通过使用 Pug,我们可以简化 HTML 的构建过程,提高代码的可读性,并且在视图中添加更多的抽象层次和更丰富的功能。希望本文对你有所帮助!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c0c40183d39b488151e08d