虽然Jade现在已经被更名为Pug,但它的使用方式并没有太大的改变。下面是如何在Node.js中使用Pug(原Jade)模板引擎的基本步骤:
1. 安装 Pug
首先,你需要安装Pug模块。在你的项目目录中,使用npm来安装:
npm install pug
2. 设置Express应用
假设你已经在项目中设置了Express框架,你可以在应用中设置Pug作为模板引擎。以下是一个基本的Express应用设置:
const express = require('express');
const app = express();
// 设置Pug为模板引擎
app.set('view engine', 'pug');
app.set('views', './views'); // 设置视图文件的目录
// 配置静态资源中间件
app.use(express.static('public'));
// 定义路由
app.get('/', function(req, res) {
const data = {
title: '我的网站',
message: '欢迎来到我的主页!'
};
res.render('index', data); // 渲染index.pug并将data传递给模板
});
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
3. 创建Pug模板
在views
目录中,创建一个index.pug
文件。以下是Pug模板的一个例子:
doctype html
html
head
title= title
body
h1= message
p 这是一个使用Pug的Node.js模板。
Pug使用缩进来表示HTML结构。上面的例子将被渲染成如下的HTML:
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
</head>
<body>
<h1>欢迎来到我的主页!</h1>
<p>这是一个使用Pug的Node.js模板。</p>
</body>
</html>
4. 运行应用
最后,运行你的Node.js应用:
node app.js
打开浏览器,访问 http://localhost:3000
,你应该能看到你的网页。
请注意,Pug的语法有一些特殊之处,例如使用!=
来转义内容,使用-
来表示JavaScript表达式等。更多详细的Pug语法和功能,请参考Pug的官方文档。