如何在Eleventy的Nunjucks模板中调用JavaScript函数？

核心原因 #

你使用的addJavaScriptFunction方法在Eleventy 2.x中虽支持全局注册函数，但在Liquid模板引用Nunjucks布局的嵌套场景下，存在上下文传递问题，导致Nunjucks模板无法正确获取该函数。更可靠的方式是直接给Nunjucks引擎单独注册函数。

解决方案一：使用addNunjucksFunction注册函数 #

修改项目根目录的.eleventy.js配置文件，将addJavaScriptFunction替换为addNunjucksFunction，确保函数直接注册到Nunjucks引擎中：

module.exports = function(eleventyConfig) {
    eleventyConfig.addNunjucksFunction("findItemById", function(items, id) {
        return items.find(item => item.id === id);
    });
};

保持Nunjucks布局中的调用方式不变：

<!doctype html>
{% set targetItem = findItemById(items, itemId) %}
<p>The value of the item with id {{ itemId }} is {{ targetItem.val }}.</p>

解决方案二：改用Nunjucks过滤器 #

如果更习惯过滤器语法，也可以通过注册过滤器实现相同功能：

1. 修改.eleventy.js：

module.exports = function(eleventyConfig) {
    eleventyConfig.addNunjucksFilter("findById", function(items, id) {
        return items.find(item => item.id === id);
    });
};

2. 调整Nunjucks布局中的调用方式：

<!doctype html>
{% set targetItem = items | findById(itemId) %}
<p>The value of the item with id {{ itemId }} is {{ targetItem.val }}.</p>

额外检查项 #

• 确认.eleventy.js文件位于项目根目录，文件名无拼写错误（注意开头的英文点）
• 执行npx @11ty/eleventy前，删除_site目录和.eleventy-cache目录，避免缓存干扰
• 在Nunjucks布局中临时添加{{ itemId }}和{{ items | dump }}，验证itemId参数和items数据是否能正常获取

内容的提问来源于stack exchange，提问作者Martin Hinze