nodejs模板引擎(二)

svygh123

于 2024-07-12 20:00:00 发布

阅读量216

点赞数 7

分类专栏：编程 js html 文章标签： nodejs javascript nodejs模板引擎模板引擎 pug jade

本文链接：https://blog.csdn.net/svygh123/article/details/140366552

版权

编程同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

虽然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>