Eleventy搭配Pug生成博客列表时循环变量无法传入include模板的问题

你遇到的传参失效，本质是独立Pug编译器的默认行为和Eleventy的模板处理逻辑的差异：

• 独立编译Pug模板时，include会默认继承父模板的完整JS作用域，所以你在循环里临时定义的post变量可以直接被子partial读取
• 但Eleventy为了避免模板作用域污染、保证partial的渲染独立性，会把每个被include的Pug文件作为独立编译单元处理，不会自动把父模板中临时定义的JS局部变量传递给子模板，只会透传Eleventy全局注入的公共数据（比如collections、page这类全局上下文）。这就是你的代码在纯Pug环境下能跑、接入Eleventy后完全失效的根本原因。

不需要修改Eleventy的默认配置，只要显式把当前循环的文章数据作为局部参数传给include的partial即可，这种写法是Pug原生支持、也被Eleventy完全兼容的标准用法。

适配你现有逻辑的写法 #

保持你原本的下标循环结构，只需要把变量传递的位置调整到include的参数作用域内：

// blog-list.pug 调整后的代码
- for (var postIdx = 0; postIdx < collections.all.length; postIdx++)
  // 先取出当前循环对应的完整文章对象
  - var currentPost = collections.all[postIdx]
  // include时把post变量作为局部参数传入partial
  include blog-list-item.pug
    - var post = currentPost.data

推荐的更简洁写法 #

你完全可以用Pug原生的each循环替代下标遍历，代码可读性更高：

// blog-list.pug 更简洁的写法
each currentPost in collections.all
  include blog-list-item.pug
    - var post = currentPost.data

调整完成后，你就可以在blog-list-item.pug内部直接访问传入的post变量了，示例用法：

// blog-list-item.pug 内部使用示例
a(href=currentPost.url)
  h2= post.title
  img(src=`/img/${post.img}` alt=post.title)
  p= post.excerpt

• 不要把post变量的定义放在include语句的外部、和循环体同级的位置——也就是你之前尝试的写法，把var post = ...写在include前的独立JS行。这种位置定义的临时变量属于父模板的局部作用域，在Eleventy的独立编译逻辑下不会自动传入partial，必须把变量定义写在include块的缩进内部，作为include的局部参数传入
• 注意数据层级：Eleventy注入的collections.all数组中，每一项都是封装好的文章对象，除了你在frontmatter里定义的字段（存在data属性下），还自带url（文章永久链接）、inputPath（源文件路径）等内置属性，不需要手动拼接链接地址
• 不需要额外调整Eleventy的渲染配置：这种显式传参的方式是框架原生支持的标准用法，不会破坏其他模板的渲染逻辑

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