使用Nunjucks和Express 4

Question

我试图使用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) 

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

Answer 1

我用它是这样的:

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

为我工作了.来自nunjucks网站:https://mozilla.github.io/nunjucks/getting-started.html

Answer 2

我想添加我的解决方案。我遇到了同样的问题，因为 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文件夹中呈现同名文件。这意味着我们需要在视图文件夹中创建一个名为- 的文件，以便名称匹配。users.jsindex.jsindex

Nunjucks 社区的惯例是使用njk扩展。因此，我们将index.njk用作根页面的名称。最后，我们需要让 express 知道它应该期待njk扩展。这是因为njk扩展只是一个约定。我们可以很容易地使用.html，只要我们配置了 nunjucks 并告诉 express to 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 上找到它。