📅 最后修改于: 2023-12-03 15:03:53.104000 🧑 作者: Mango
Pug.js是一个模板引擎，它可以让你更快地编写HTML。Pug.js是一个Javascript库，可以运行在Node.js和浏览器中。它提供了许多有用的功能，以减少重复的HTML代码，如条件语句，循环语句，嵌套块等。
Pug.js可以帮助你更快地编写HTML代码。与传统的HTML代码相比，使用Pug.js可以更轻松地创建模板和布局。使用Pug.js可以：
另外，Pug.js还提供许多有用的功能，例如：
你可以在Pug.js中插入变量，使你的代码更加动态。Pug.js使用Jade语法结构并依靠代码缩进来区分各种逻辑块。例如:
h1 Welcome to #{title}
在这个例子中，#{title}使用了变量title。
使用Pug.js可以很容易地编写条件语句，例如:
if user.isAdmin
h1 Welcome, administrator
else
h1 Welcome, user
在这个例子中，我们根据用户角色来显示不同的欢迎消息。
使用Pug.js可以很容易地编写循环语句，例如:
ul
each item in items
li= item.name
在这个例子中，我们可以循环遍历items数组中的项目，并将每个项目显示为列表项。
要在Node.js中使用Pug.js，你需要安装pug依赖，你可以使用以下命令来安装它：
npm install pug --save
一旦你安装了pug依赖，你可以在你的Node.js应用程序中使用它。例如：
const express = require('express')
const app = express()
const pug = require('pug')
app.set('view engine', 'pug')
app.get('/', (req, res) => {
res.render('index', { title: 'Hello World!' })
})
app.listen(3000, () => {
console.log('Example app listening on port 3000!')
})
在这个例子中，我们设置了应用程序的视图引擎为pug。在路由处理程序中，使用res.render函数渲染pug模板index.pug，并将变量title传递到模板中。
你可以将Pug.js编译成HTML代码，并在浏览器中使用。你可以使用以下命令来将Pug.js编译成HTML：
pug index.pug --out public/
在这个例子中，我们将将Pug.js编译成HTML，并将输出存储在public/目录中。
一旦你已经将Pug.js编译成HTML，你就可以在HTML文件中使用它。例如：
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
<script>
var app = document.getElementById('app')
app.innerHTML = `
<h1>Welcome to my website</h1>
<ul>
${items.map(item => `<li>${item.name}</li>`).join('')}
</ul>
`
</script>
</body>
</html>
在这个例子中，我们将使用app.innerHTML将pug渲染成的HTML代码插入到网页中。