使用Nunjucks与Eleventy时for循环重复执行两次问题求助
解决Eleventy中Nunjucks循环重复执行的问题
这种循环跑两次的情况在Eleventy和Nunjucks的项目里其实挺常见的,我帮你梳理几个最可能的原因和对应的排查步骤:
1. 数据被Eleventy重复加载了
Eleventy的自动数据加载机制有时候会导致数据被重复绑定:
- 如果你把JSON文件同时放在了
_data目录,又在模板的frontmatter里手动引用了同一个文件(比如--- sheet: ./catalog.json ---),Eleventy会把这两个来源的sheet数据合并,导致catalog数组被重复拼接。 - 先检查你的
_data目录,看看有没有和你使用的JSON同名或相关的文件,比如sheet.json或者catalog.json,如果有,要么删掉_data里的,要么去掉模板frontmatter里的手动引用。
2. 模板被重复渲染或引用了
仔细检查你的模板结构:
- 会不会这个模板被
{% include %}了两次?或者父模板里已经有一个循环,又嵌套了这个模板的循环? - 你可以先简化模板,只保留循环和长度输出,快速定位问题:
看看输出的长度是11还是22。如果长度是11但列表有22项,那肯定是模板被执行了两次;如果长度是22,那就是数据本身重复了。{{ sheet.catalog | length }} {% for textbook in sheet.catalog %} <li>{{ textbook.title }}</li> {% endfor %}
3. Eleventy缓存搞的鬼
有时候增量构建的缓存会导致奇怪的渲染问题,试试:
- 删除项目根目录的
.cache文件夹(如果有的话) - 用
npx eleventy --no-incremental命令重新构建,关闭增量构建功能,看看重复问题是否消失。
4. 不小心写了双重循环
虽然你提供的模板代码看起来只有一次循环,但有没有可能在模板的其他部分(比如父模板、布局文件里)也有遍历sheet.catalog的代码?比如布局文件里已经有一个循环,你的模板又嵌套在里面,就会导致双重输出。
先从验证数据长度开始吧,这能最快定位是数据问题还是模板问题。
内容的提问来源于stack exchange,提问作者user3701187
相关产品推荐
相关产品推荐

