如何在Jekyll/Liquid循环中正确使用page.id？

问题描述 #

每个页面的前置元数据（frontmatter）包含id字段：

---
title: How it Works
layout: page
id: howitworks
---

_config.yml配置如下：

progressbar:
  index:
    - "firstIndex"
    - "secondIndex"
    - "thirdIndex"
  howitworks:
    - first
    - second
    - third

希望创建一个include文件，通过循环遍历progressbar，获取对应页面id下的条目，尝试的写法如下：

<ul>
  {% for thing in site.progressbar.{{ page.id }} %}
    <li>{{ thing }}</li>
  {% endfor %}
</ul>

询问该实现是否可行，同时允许调整任何实现方式（包括_config.yml的配置格式）来简化逻辑，例如在id为howitworks的页面中，期望输出：

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

解答 #

1. 原写法不可行 #

你尝试的site.progressbar.{{ page.id }}不符合Liquid语法规则——Liquid标签内部不能嵌套双大括号{{ }}，这种写法会直接导致模板解析错误。

2. 正确的实现方式 #

要通过动态键名访问site.progressbar中的数据，需要使用Liquid的方括号语法，修改include文件内容如下：

<ul>
  {% assign progress_items = site.progressbar[page.id] %}
  {% if progress_items %}
    {% for thing in progress_items %}
      <li>{{ thing }}</li>
    {% endfor %}
  {% endif %}
</ul>

• 先用assign把对应页面的进度条数据赋值给变量，代码逻辑更清晰；
• 增加if判断可以避免页面id未在progressbar配置中定义时，输出空的<ul>标签。

3. 可选的配置优化（非必需） #

如果想提升配置的扩展性，也可以把_config.yml中的progressbar改成数组结构，直接关联页面id和对应条目：

progressbar:
  - page_id: index
    items:
      - "firstIndex"
      - "secondIndex"
      - "thirdIndex"
  - page_id: howitworks
    items:
      - first
      - second
      - third

对应的include文件写法调整为：

<ul>
  {% for bar in site.progressbar %}
    {% if bar.page_id == page.id %}
      {% for thing in bar.items %}
        <li>{{ thing }}</li>
      {% endfor %}
    {% endif %}
  {% endfor %}
</ul>

这种结构后续可以轻松给每个进度条添加更多属性（比如标题、自定义样式类等）。

内容的提问来源于stack exchange，提问作者A. Gardner