You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何在Express中正确配置Nunjucks自定义过滤器?解决过滤器找不到及页面无法渲染问题

解决Nunjucks自定义过滤器找不到的问题

这个问题的核心是你创建了两个独立的Nunjucks环境nunjucks.configure()已经自动生成了一个和Express绑定的环境实例,但你又新建了一个new nunjucks.Environment()——你给后者加了过滤器,但Express渲染模板时用的却是前者,所以才会出现filter not found的错误。

下面是两种正确的解决方案:

方案一:复用configure返回的环境实例

nunjucks.configure()方法本身会返回对应的环境对象,直接用它来添加过滤器即可,不需要重新创建新环境:

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

// 保存configure返回的、已关联Express的环境实例
const env = nunjucks.configure('views', { autoescape: true, express: app });
app.set('view engine', 'html');

// 直接给这个环境添加自定义过滤器
env.addFilter('is_undefined', function(obj) {
  return typeof obj === 'undefined';
});

修改后,Express的res.render()会自动使用这个带有自定义过滤器的环境,模板里的errors|is_undefined就能正常识别了。

方案二:手动创建环境并绑定到Express

如果你想手动控制环境的创建流程,需要明确指定模板加载器,再把环境和Express绑定:

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

// 创建文件系统加载器,指向你的views模板目录
const loader = new nunjucks.FileSystemLoader('views');
// 初始化环境实例,配置自动转义规则
const env = new nunjucks.Environment(loader, {
  autoescape: true
});

// 把环境绑定到Express,让res.render能调用它
env.express(app);
app.set('view engine', 'html');

// 添加自定义过滤器
env.addFilter('is_undefined', function(obj) {
  return typeof obj === 'undefined';
});

为什么直接用env.render()不行?

env.render()是Nunjucks原生的渲染方法,它只会返回渲染后的字符串,不会自动把内容发送给客户端。而Express的res.render()会调用绑定好的Nunjucks环境完成渲染,然后自动处理HTTP响应的发送,所以必须确保过滤器添加到了和Express绑定的那个环境上。

内容的提问来源于stack exchange,提问作者ino

火山引擎 最新活动