Nodejs Express模板引擎插件express-nunjucks的使用

Nodejs Express模板引擎插件express-nunjucks的使用
express-nunjucks 是一个用于 Express.js 应用程序的 Nunjucks 模板引擎。Nunjucks 是一个功能强大的模板引擎，灵感来自 Jinja2。下面是如何在 Express.js 项目中设置和使用 express-nunjucks 的步骤。

安装

首先，你需要安装必要的包：

npm install express express-nunjucks nunjucks

配置

接下来，你需要配置 Express 应用程序以使用 Nunjucks 作为模板引擎。这里是一个简单的例子：

const express = require('express');
const nunjucks = require('nunjucks');
const expressNunjucks = require('express-nunjucks');

const app = express();

// 设置 Nunjucks 视图引擎
app.use(expressNunjucks(app, {
    path: 'views', // 视图文件夹路径
    autoescape: true,
    watch: true, // 是否自动重新加载模板
    noCache: true // 生产环境中应禁用此选项
}));

// 示例路由
app.get('/', (req, res) => {
    res.render('index.html', { title: 'Hello World' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

创建视图文件

在你的项目中创建一个名为 views 的文件夹，并在其中添加一个名为 index.html 的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
</body>
</html>

使用变量和逻辑

你可以在模板中使用变量、循环、条件语句等。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <ul>
        {% for item in items %}
            <li>{{ item.name }} - {{ item.price }}</li>
        {% endfor %}
    </ul>
</body>
</html>

然后在路由中传递数据：

app.get('/', (req, res) => {
    const data = {
        title: 'Product List',
        items: [
            { name: 'Apple', price: '$1.00' },
            { name: 'Banana', price: '$0.50' }
        ]
    };
    res.render('index.html', data);
});

更多功能

Nunjucks 提供了丰富的功能，如宏（macros）、过滤器（filters）、继承（inheritance）等。你可以查阅官方文档来了解更多细节：https://mozilla.github.io/nunjucks/

希望这些信息对你有帮助！如果你有任何其他问题或需要进一步的帮助，请随时告诉我。


3 回复

当然，没问题！Express-Nunjucks 是一个将 Nunjucks 模板引擎集成到 Express 应用中的插件。Nunjucks 是一个强大的模板引擎，灵感来源于 Jinja2，支持继承、过滤器和异步特性。

首先，你需要安装 express 和 express-nunjucks：

npm install express express-nunjucks

然后，在你的 Express 应用中设置 Nunjucks：

const express = require('express');
const nunjucks = require('express-nunjucks');

const app = express();

// 设置 Nunjucks
nunjucks(app, {
  watch: true, // 开发时开启自动重新加载
  noCache: true, // 开发时开启不缓存
});

app.get('/', (req, res) => {
  res.render('index.html', { message: 'Hello, Nunjucks!' });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

确保你的模板文件（例如 index.html）位于 views 文件夹中。现在你可以开始享受 Nunjucks 的强大功能了！

希望这能帮到你，如果有任何问题，随时提问！


express-nunjucks 是一个将 Nunjucks 模板引擎集成到 Express 应用中的中间件。Nunjucks 是一个功能强大的模板引擎，灵感来自于 Jinja2，适用于 Node.js 和浏览器环境。以下是如何在你的 Express 应用中使用 express-nunjucks 的步骤。

安装

首先，你需要安装必要的包：

npm install express express-nunjucks

基本设置

接下来，创建一个基本的 Express 应用，并配置 Nunjucks 作为模板引擎。

文件结构

假设你的项目结构如下：

/project
  /views
    index.njk
  app.js

index.njk 是你的模板文件。

app.js

const express = require('express');
const nunjucks = require('express-nunjucks');

const app = express();

// 设置 Nunjucks 为模板引擎
app.use(nunjucks(app, {
  watch: true, // 当文件改变时自动重新加载模板
  noCache: true, // 开发模式下禁用缓存
}));

// 静态文件服务
app.use(express.static('public'));

// 定义路由
app.get('/', (req, res) => {
  res.render('index.njk', { message: 'Hello from Nunjucks!' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

创建模板

在 /views/index.njk 中添加一些简单的 HTML 和 Nunjucks 语法：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nunjucks Example</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>

运行应用

确保所有文件都已保存，然后运行你的应用：

node app.js

打开浏览器并访问 http://localhost:3000/，你应该能看到带有消息 “Hello from Nunjucks!” 的页面。

高级特性

  • 过滤器和函数：可以在 Nunjucks 中使用过滤器和自定义函数来处理数据。
  • 继承和包含：使用 extends 和 include 来重用和扩展模板。
  • 块：定义可以被子模板覆盖的区域。

这只是一个简单的开始。Nunjucks 提供了丰富的功能，可以帮助你构建复杂的 Web 应用程序。

express-nunjucks 是一个将 Nunjucks 模板引擎集成到 Express 应用中的中间件。首先，你需要安装 nunjucks 和 express-nunjucks：

npm install nunjucks express-nunjucks

然后，在你的 Express 应用中配置并使用它：

const express = require('express');
const createNunjucks = require('express-nunjucks');

const app = express();

createNunjucks(app, {
  watch: true, // 开发模式下自动刷新
});

app.get('/', (req, res) => {
  res.render('index.html', { message: 'Hello, Nunjucks!' });
});

app.listen(3000);

确保模板文件存放在 views 文件夹中，并以 .html 结尾。你可以通过 res.render 方法传递数据给模板。

回到顶部