如何用Eleventy(11ty)嵌套数据生成指定结构的页面？

步骤1：预处理扁平化成员数据 #

在src/_data/目录下新建members.js，把嵌套的locale.json数据转成一维数组，适配11ty分页的数据源要求：

module.exports = function() {
  const locale = require('../locale/locale.json');
  const members = [];

  locale.groups.forEach(group => {
    // 将分组名转换为slug格式（如Group A → group-a）
    const groupSlug = group.name.toLowerCase().replace(/\s+/g, '-');
    
    group.types.forEach(type => {
      type.members.forEach(member => {
        members.push({
          language: locale.language,
          groupSlug: groupSlug,
          memberId: member.id,
          currency: locale.currency,
          groupName: group.name,
          typeName: type.name
        });
      });
    });
  });

  return members;
};

步骤2：创建分页模板生成页面 #

在src/目录下新建member-page.njk（以Nunjucks为例，其他模板语法逻辑一致），配置分页规则和输出路径：

---
pagination:
  data: members
  size: 1
  alias: member
permalink: "{{ member.language }}/{{ member.groupSlug }}/{{ member.memberId }}.html"
---

<!-- 页面内容示例，可根据需求自定义 -->
<h1>成员 {{ member.memberId }}</h1>
<p>所属分组：{{ member.groupName }}</p>
<p>所属类型：{{ member.typeName }}</p>
<p>语言：{{ member.language }}</p>
<p>货币：{{ member.currency }}</p>

步骤3：运行11ty生成文件 #

执行11ty构建命令：npx @11ty/eleventy，生成的文件结构会完全匹配需求：

dist/
  en-US/
    group-a/
      ABCD1234567890.html
      EFGH0987654321.html

核心逻辑说明 #

• 数据扁平化：通过members.js把嵌套的分组/类型/成员结构转成一维数组，解决11ty分页仅支持一维数据源的问题。
• 动态路径生成：利用permalink的模板变量，根据每个成员的语言、分组slug、ID自动生成目标输出路径。
• 模板数据复用：分页遍历过程中，member变量会携带当前成员的所有数据，直接用于页面内容渲染。

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