Liquid 循环里嵌套 include 导致内容重复输出
现象#
列表里每个商品都渲染了两遍甚至多遍,或者同一段 HTML 在页面里重复出现,删掉一层才正常。
原因#
- 循环外层已经输出了一次,snippet 内又输出一次
include会把 snippet 内容直接插入,写在for里就是每轮插一次,配合外层 capture 造成累积- snippet 内部又 include 了自己,形成隐式递归
- AJAX 渲染局部模板时又把整段列表返回,前端 append 造成重复
处理步骤#
- 在每个
render/include前后加注释标记,定位重复来源 - 把 snippet 改成只负责单条渲染,列表交由外层循环
- 检查 snippet 内是否 include 自身,改为条件判断或拆分
- AJAX 局部刷新时只返回目标区块的 HTML,前端用
replaceWith而不是append
验收标准#
页面中每条数据只出现一次,DOM 数量与数据条数一致。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。