本文介绍纯 pug 模板语法实现按钮数组的批量分组渲染：无需 javascript，不依赖 css grid/flex，仅通过嵌套循环与边界判断，将 `accounts` 数组中的按钮均匀分配至多个 `
` 中，每组最多 10 个，末组自动补足剩余项。
在服务端模板渲染场景（如 Express + Pug）中，常需将动态数据列表结构化输出为语义清晰的 DOM 分组。一个典型需求是：将一组按钮（如用户账户操作入口）按固定数量（如每 10 个）包裹进独立
容器，既利于样式隔离，也便于后续响应式或无障碍增强。
Pug 本身不支持原生“chunk”语法，但可通过两层 for 循环配合数学计算优雅实现。核心思路是：
-
外层循环：控制生成多少个容器 ；
- 内层循环：在每个容器中尝试添加最多 10 个按钮；
- 安全访问：使用 if accounts[i + j] 避免越界，确保只渲染真实存在的数据项。
以下是完整、可直接运行的 Pug 代码：
- const numberPerDiv = 10 #container - for (let i = 0; i < Math.ceil(accounts.length / numberPerDiv); i++) div.group - for (let j = 0; j < numberPerDiv; j++) if accounts[i * numberPerDiv + j] button= accounts[i * numberPerDiv + j].stuff✅ 关键修正说明：原始答案中索引写法 accounts[i + j] 存在逻辑错误（会导致跨组错位），正确方式应为 accounts[i * numberPerDiv + j]。例如第 2 个 div（i = 1）应从索引 10 开始取值，而非 1。
注意事项：
- Math.ceil() 必须拼写正确（原文误作 Math.ciel），否则运行时报错；
- accounts 必须是已定义的数组变量，建议在路由层校验其存在性（如 accounts || []）；
- 若需为每组添加序号或数据统计，可在外层循环中引入计数器（如 - const groupIndex = i + 1）；
- 该方案完全静态，无运行时开销，适合 SSR 场景，也兼容任何前端框架的模板预编译流程。
总结：此方案以最小语言特性达成强可控的结构化输出——不引入额外依赖、不牺牲可读性、不妥协健壮性。当面对分页式布局、表单分组、卡片网格等类似需求时，该双循环模式可快速复用并灵活调整分组粒度（仅修改 numberPerDiv 即可）。
