Jekyll循环问题：如何在galerie.html的画廊循环中添加标题与描述

问题根源 #

你当前的galerie.html是直接遍历site.static_files读取图片文件，这些文件对象本身不包含headline和about属性，所以直接在前置数据里添加字段无法关联到对应图片。需要通过数据文件绑定图片与信息来实现需求。

具体步骤 #

1. 创建数据文件管理画廊信息

在项目根目录新建_data/galerie.yml文件，按以下格式填写每个图片对应的标题和描述：

- image: /assets/img/galerie/你的图片文件名1.jpg
  headline: "项目标题1"
  about: "这是项目1的详细描述内容"
- image: /assets/img/galerie/你的图片文件名2.jpg
  headline: "项目标题2"
  about: "这是项目2的详细描述内容"

注意：

• image的路径必须和assets/img/galerie下的实际文件路径完全一致（区分大小写）
• YAML语法对缩进敏感，每个字段前用2个空格，不要用Tab键

2. 修改galerie.html的循环逻辑

替换原有遍历静态文件的代码，改为遍历_data/galerie.yml中的数据：

---
layout: page
title: Galerie
permalink: /galerie/
---

<div class="container">
  <div class="row">
    {% for item in site.data.galerie %}
      <div class="col-lg-4 col-md-6 mb-4">
        <!-- 渲染标题与描述 -->
        <div class="col-12 center">
          <h2>{{ item.headline }}</h2>
          <p>{{ item.about }}</p>
        </div>
        <!-- 图片渲染部分 -->
        <a href="{{ item.image | relative_url }}" data-lightbox="gallery" data-title="{{ item.headline }}">
          <img src="{{ item.image | replace: '/galerie/', '/galerie/thumbs/' | relative_url }}" class="img-fluid rounded" alt="{{ item.headline }}">
        </a>
      </div>
    {% endfor %}
  </div>
</div>

3. 验证效果

启动Jekyll本地服务bundle exec jekyll serve，访问画廊页面即可看到每个图片对应的标题和描述正常渲染。

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