logo标签列表

使用Nunjucks与Express 4

node.jsexpressnunjucks
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)

请告诉我如何解决这个问题？
5个回答
15
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，当请求“/”时，使用“routes”文件夹中的“index.js”文件处理它。同样地，当请求“/users”时，使用“routes”文件夹中的“users.js”文件处理它。由于我们只是尝试实现nunjucks模板引擎，因此可以将这些行保留不变。重要的是要理解，“routes”文件夹中的“index.js”文件将利用Express Router，准备响应，并渲染一个与之同名的“views”文件夹中的文件。这意味着我们需要在视图文件夹中创建一个名为“index”的文件，以便名称匹配。

在Nunjucks社区中的惯例是使用njk扩展名。因此，我们将使用index.njk作为我们的根页面名称。最后，我们需要让express知道它应该期望njk扩展名。这是因为njk扩展名只是一个惯例。我们同样可以使用.html，只要我们已经配置了nunjucks并告诉express期望html即可。在app.js文件中：

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

现在我们可以使用nunjucks模板引擎，它将被编译为HTML。我建议创建一个布局文件，并使用nunjucks {% block content %} code-goes-here {% endblock %} 创建可重用的组件，可以通过Nunjuck的模板继承进行继承，即{% extends "layout.njk" %} Nunjucks是一个功能强大的模板引擎，具有强大的功能集。在我看来，这是最被低估的模板引擎。它易于使用，非常强大和可扩展。
有关模板继承的更多信息，请参阅jinja2提供的此链接click me！
如果您想查看我使用Express 4、Nunjucks和Winston设置的示例应用程序，可以在我的GitHub上找到它。
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');
});

更多参考请查看官方文档。
1
如果您想将模板文件夹放在${pwd}/templates上，请按以下方式操作。
//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
})
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);

"express": "4.16.4", "nunjucks": "^3.2.3",

即使是 expressjs-5.0.0-alpha.5 和 nunjucks 3.2.3，它仍然可以正常工作。 - sitthykun
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接