9

我正在尝试使用Nunjucks作为Express的模板引擎。我这样做了：

var express = require('express');
var nunjucks = require('nunjucks');
var path = require('path');
var bodyParser = require('body-parser');
var load = require('express-load');
var fs = require("fs");

var app = express();
app.set('views', path.join(__dirname, 'views'));

var env = nunjucks.configure(app.get('views'), {
    autoescape: true,
    express:    app 
});

app.set('view engine', 'html');

但是上面的代码给出了这个错误：

Template render error: compileExtends: cannot extend multiple times
   at Error.exports.TemplateError (C:\my\nodejs\projects\\node_modules\nunjucks\src\lib.js:49:19)
   at Object.extend.fail (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:49:15)
   at Object.extend.compileExtends (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:983:18)
   at Object.extend.compile (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:1083:22)
   at Object.extend._compileChildren (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:139:18)
   at Object.extend.compileRoot (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:1050:14)
   at Object.extend.compile (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:1083:22)
   at Object.module.exports.compile (C:\my\nodejs\projects\\node_modules\nunjucks\src\compiler.js:1118:11)
   at Obj.extend._compile (C:\my\nodejs\projects\\node_modules\nunjucks\src\environment.js:414:35)
   at Obj.extend.compile (C:\my\nodejs\projects\\node_modules\nunjucks\src\environment.js:403:18)

请告诉我如何解决这个问题？

4

5 回答 5

15

我这样使用它：

nunjucks.configure('views', {
    express: app,
    autoescape: true
});
app.set('view engine', 'html');

为我解决了。从 nunjucks 网站获得：https ://mozilla.github.io/nunjucks/getting-started.html

于 2015-03-28T15:42:58.603 回答
8

我想添加我的解决方案。我遇到了同样的问题，因为 express 生成器不支持 nunjucks 模板引擎。如前所述，您应该导入express和nunjucks依赖项，然后配置nunjucks。

const app = express();
const nunjucks = require('nunjucks');
nunjucks.configure('views', {
  autoescape: true,
  express: app
});

接下来，您需要决定如何呈现模板。您可以选择通过渲染一个简单的字符串或文件来响应 HTTP 请求。但是，假设您的项目可能会在某个时候增长，我认为最好利用 express 提供的路由和中间件。使用 express 生成器，express 提供了两个文件夹，views和routes。该app.js文件中有两种响应传入请求的方法。

app.use('/', indexRouter);
app.use('/users', usersRouter);

其中 indexRouter 和 usersRouter 都定义如下：

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

这告诉 express，当“/”请求进来时，用路由index.js文件夹中的文件处理它。以同样的方式，当“/users”的请求进来时，用路由文件夹中的文件处理它。由于我们只是尝试实现 nunjucks 模板引擎，因此我们可以保留这些行。重要的是要了解routes文件夹中的文件将使用 express 路由器，准备响应，并在views文件夹中呈现同名文件。这意味着我们需要在 views 文件夹中创建一个名为- 的文件，以便名称匹配。users.jsindex.jsindex

Nunjucks 社区的惯例是使用njk扩展。因此，我们将使用index.njk它作为我们的根页面的名称。最后，我们需要让 express 知道它应该期待njk扩展。这是因为njk扩展只是一个约定。.html只要我们配置了 nunjucks 并告诉 express 以 expect ，我们就可以轻松使用html。在app.js：

app.set('view engine', 'njk');

现在我们可以使用 nunjucks 模板引擎，它会被编译成 HTML。我建议创建一个布局文件并使用 nunjucks {% block content %}code-goes-here {% endblock %}创建可以通过 Nunjuck 的模板继承继承的可重用组件，即{% extends "layout.njk" %}

Nunjucks 是一个非常强大的模板引擎，具有一组强大的功能。在我看来，它是最被低估的模板引擎。它易于使用、功能强大且可扩展。

有关模板继承的更多信息，这是来自 jinja2 的有用链接，nunjucks 是从该链接移植过来的，请单击我！

如果您想查看我使用 Express 4、Nunjucks 和 Winston 设置的用于日志记录的示例应用程序，您可以在我的GitHub 上找到它。

于 2018-09-14T07:11:23.597 回答
3

这就像使用express js的基本配置，您可以执行以下操作：

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

nunjucks.configure('views',{
    autoescape:true,
    express:app
});

app.set('views','./views'); // <--Path to your views folder

app.get('/',(request,response)=>{
    response.render('some-view.html');
});

更多参考请查看官方文档

于 2018-04-20T21:02:35.173 回答
1

如果你想把你的模板文件夹放在 ${pwd}/teampltes

像下面这样。

//import
const path = require('path')

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


//init
const app = express()

nunjucks.configure(path.join(__dirname, 'templates'), {
    autoescape: true,
    express: app
})
于 2019-11-13T08:56:08.027 回答
1

我只是使用默认方式设置 nunjucks：

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

const app = express();
app.engine('html', nunjucks.render);
app.set('view engine','html');
app.set('views', globals.viewsDirectory);

“快递”：“4.16.4”，“nunjucks”：“^3.2.3”，

于 2021-07-15T16:57:52.297 回答