11ty中Nunjucks模板无法渲染对应JSON内容值的问题解决

我用11ty构建简单静态站点，将项目分为templates和content目录，但Nunjucks模板中的变量始终无法渲染对应JSON文件的值，输出为空。

项目结构 #

project-root/
├── templates/
│   ├── index.njk
│   ├── about.njk
├── content/
│   ├── index.json
│   ├── about.json
├── dist/
├── .eleventy.js
└── package.json

相关文件内容 #

index.json #

{
  "title": "My Website",
  "heading": "Welcome to my website"
}

index.njk #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ heading }}</h1>
  <p>...</p>
</body>
</html>

.eleventy.js #

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "templates",
      data: "content",
      output: "dist"
    }
  };
};

问题现象 #

执行npx @11ty/eleventy构建后，dist/index.html中{{ title }}和{{ heading }}的位置为空，输出如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1></h1>
  <p>...</p>
</body>
</html>

原因分析 #

11ty中data目录下的JSON文件属于全局数据文件，文件名将作为全局数据的顶级键名。比如content/index.json的内容会被挂载到全局数据的index属性下，而非直接暴露为顶级变量title或heading。因此模板中直接使用{{ title }}无法获取到对应值。

解决方法 #

方法1：修改模板变量引用（不调整目录结构） #

将模板中的变量改为从全局数据的对应键名中读取：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ index.title }}</title>
</head>
<body>
  <h1>{{ index.heading }}</h1>
  <p>...</p>
</body>
</html>

同理，about.njk中需要使用{{ about.title }}来读取about.json的内容。

方法2：使用页面专属数据文件（推荐，更符合页面数据隔离需求） #

将content目录下的JSON文件移动到templates目录，并重命名为[页面名].11tydata.json（比如index.11tydata.json），这样文件内容会直接成为对应模板的本地页面数据，无需全局引用。

调整后的项目结构：

project-root/
├── templates/
│   ├── index.njk
│   ├── index.11tydata.json
│   ├── about.njk
│   ├── about.11tydata.json
├── dist/
├── .eleventy.js
└── package.json

同时修改.eleventy.js，移除data目录的配置：

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "templates",
      output: "dist"
    }
  };
};

此时模板中可以继续使用{{ title }}和{{ heading }}，11ty会自动加载对应页面的.11tydata.json文件内容。

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