如何在Eleventy中遍历前置元数据（Front Matter）中的数组？

1. 前置元数据（Front Matter）中定义数组 #

以Eleventy最常用的YAML格式为例，直接用-声明数组项即可，支持嵌套对象结构：

---
title: 我的项目列表
projects:
  - 名称: 个人博客
    描述: 用Eleventy搭建的静态博客
    技术栈: Eleventy, HTML, CSS
  - 名称: 工具集网站
    描述: 整理前端开发常用工具
    技术栈: Eleventy, JavaScript
---

若使用JSON格式的Front Matter，遵循标准JSON数组语法：

---
{
  "title": "我的项目列表",
  "projects": [
    {
      "名称": "个人博客",
      "描述": "用Eleventy搭建的静态博客",
      "技术栈": "Eleventy, HTML, CSS"
    },
    {
      "名称": "工具集网站",
      "描述": "整理前端开发常用工具",
      "技术栈": "Eleventy, JavaScript"
    }
  ]
}
---

2. 在HTML模板中渲染数组 #

Nunjucks模板（Eleventy默认支持）

用for循环遍历数组：

<h1>{{ title }}</h1>
<ul class="projects-list">
  {% for project in projects %}
    <li>
      <h3>{{ project.名称 }}</h3>
      <p>{{ project.描述 }}</p>
      <span>技术栈：{{ project.技术栈 }}</span>
    </li>
  {% endfor %}
</ul>

Liquid模板

语法类似，需通过page对象访问前置元数据：

<h1>{{ page.title }}</h1>
<ul class="projects-list">
  {% for project in page.projects %}
    <li>
      <h3>{{ project.名称 }}</h3>
      <p>{{ project.描述 }}</p>
      <span>技术栈：{{ project.技术栈 }}</span>
    </li>
  {% endfor %}
</ul>

注意事项 #

• YAML格式对缩进敏感，数组项的-后需加空格，子属性要保持一致的缩进层级
• 其他模板引擎（如Handlebars）的遍历语法略有差异，但核心逻辑都是调用前置元数据中定义的数组变量

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