Nodejs Koa模板引擎koa-nunjucks-2的使用

Nodejs Koa模板引擎koa-nunjucks-2的使用
koa-nunjucks-2 是一个用于 Koa 框架的 Nunjucks 模板引擎插件。Nunjucks 是一个强大的 JavaScript 模板引擎，它具有许多功能，如继承、包含和宏等。

以下是如何在 Koa 项目中使用 koa-nunjucks-2 的步骤：

  1. 安装依赖： 首先，你需要安装 koa, koa-router, 和 koa-nunjucks-2，以及 nunjucks：

    npm install koa koa-router koa-nunjucks-2 nunjucks

  2. 配置模板引擎： 在你的 Koa 应用程序中配置 koa-nunjucks-2。假设你有一个基本的 Koa 应用程序：

    const Koa = require('koa');
const Router = require('koa-router');
const nunjucks = require('nunjucks');
const koaNunjucks = require('koa-nunjucks-2');

const app = new Koa();
const router = new Router();

// 配置 nunjucks
const nj = koaNunjucks(app, {
  path: 'views', // 视图文件夹路径
  env: nunjucks.configure('views', { noCache: true }), // Nunjucks 环境配置
  ext: 'html' // 默认的扩展名
});

// 使用路由
router.get('/', async ctx => {
  await nj.render('index.html', {
    title: 'Hello World',
    message: 'Welcome to Koa with Nunjucks!'
  }, ctx);
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

  3. 创建视图文件： 在 views 文件夹中创建一个 index.html 文件，内容如下：

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

  4. 运行应用： 启动你的 Koa 应用，并访问 http://localhost:3000，你应该会看到渲染后的页面。

注意事项

  • koa-nunjucks-2 依赖于 koa-send 来处理静态文件。如果你的应用需要处理静态文件（如 CSS 或 JS 文件），确保已经正确配置了静态文件中间件。
  • koa-nunjucks-2 支持多种配置选项，包括自定义过滤器、全局变量等，可以根据需要进行调整。

通过以上步骤，你就可以在 Koa 应用程序中使用 koa-nunjucks-2 来渲染动态 HTML 页面了。


3 回复

当然！koa-nunjucks-2 是一个将 Nunjucks 模板引擎与 Koa 框架结合的好工具。首先，你需要安装它：

npm install koa-nunjucks-2 --save

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

const Koa = require('koa');
const nunjucks = require('koa-nunjucks-2');

const app = new Koa();

app.use(nunjucks({
  autoescape: true,
  watch: true, // 开发时开启，以便自动重新加载模板
  noCache: true, // 开发时开启，提高性能
  config: {
    // Nunjucks 配置项
    ext: 'html',
    path: './views', // 模板文件路径
  },
}));

现在你可以创建一个简单的路由来渲染模板了：

app.use(async ctx => {
  await ctx.render('index.html', { title: 'Hello Nunjucks' });
});

index.html 文件应该放在 ./views 目录下。你可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>Welcome to the world of Nunjucks!</h1>
</body>
</html>

就这样，你已经成功地在 Koa 中使用了 Nunjucks 模板引擎！


koa-nunjucks-2 是一个用于 Koa 框架的 Nunjucks 模板引擎中间件。Nunjucks 是一个强大的 JavaScript 模板引擎，灵感来源于 Jinja2。下面是如何在 Koa 项目中使用 koa-nunjucks-2 的步骤和示例代码。

安装依赖

首先，你需要安装 koa, koa-router 和 koa-nunjucks-2 以及 Nunjucks：

npm install koa koa-router koa-nunjucks-2 nunjucks

配置模板引擎

接下来，在你的 Koa 应用中配置 koa-nunjucks-2。这里是一个简单的示例：

const Koa = require('koa');
const Router = require('koa-router');
const nunjucks = require('nunjucks');
const koaNunjucks = require('koa-nunjucks-2');

const app = new Koa();
const router = new Router();

// 配置 nunjucks 环境
nunjucks.configure('views', {
    autoescape: true,
    express: app
});

// 使用 koa-nunjucks-2 中间件
app.use(koaNunjucks({
    path: 'views',
    env: nunjucks,
    nunjucksConfig: {
        trimBlocks: true, // 开启自动移除空行
        lstripBlocks: true // 自动移除左缩进
    }
}));

// 路由定义
router.get('/', async (ctx) => {
    ctx.body = await ctx.render('index.html', {
        title: "首页",
        content: "欢迎来到首页"
    });
});

app.use(router.routes()).use(router.allowedMethods());

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

在这个例子中：

  • 我们创建了一个 Koa 应用实例。
  • 设置了 Nunjucks 的环境配置。
  • 使用 koa-nunjucks-2 中间件，并配置模板路径和其他选项。
  • 定义了一个路由，当访问根目录时，渲染 views/index.html 模板，并传递一些数据给模板。

创建模板文件

在 views 目录下创建一个 index.html 文件，内容如下：

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

现在，当你访问应用的根目录（例如：http://localhost:3000/），你应该能看到渲染后的页面，显示 “欢迎来到首页” 的标题。

这就是如何在 Koa 应用中使用 koa-nunjucks-2 的基本流程。你可以根据需要调整配置和模板内容。

使用koa-nunjucks-2作为Koa应用的模板引擎，首先需要安装koa-nunjucks-2和nunjucks。安装完成后，在Koa应用中配置nunjucks：

const Koa = require('koa');
const views = require('koa-views');

const app = new Koa();

app.use(views(__dirname + '/views', {
  map: {
    html: 'nunjucks'
  }
}));

app.use(async ctx => {
  await ctx.render('index', { title: 'Hello Nunjucks' });
});

app.listen(3000);

在此示例中，__dirname + '/views' 是视图文件存放的位置，index 是要渲染的模板文件名。

回到顶部