Jekyll网站作品集画廊自动生成失败问题求助

我来帮你排查并修复Jekyll作品集画廊生成的问题，结合你给出的代码，主要有几个常见的坑需要解决：

1. 修复画廊图片的Alt文本错误 #

你代码里的alt="{{ post.alt }}"明显写错了——循环的对象是client不是post，而且要确保每个client.md的Front Matter里添加alt字段，不然图片的替代文本会为空。

修复后的画廊图片部分代码：

<img src="{{ site.baseurl }}/images/clients/{{ client.image_path }}" class="img-responsive" alt="{{ client.alt }}">

对应的client.mdFront Matter要补充：

---
name: "你的客户/项目名称"
subtitle: "项目副标题"
external_url: "项目外部链接"
image_path: "对应的图片文件名（比如client-1.jpg）"
alt: "图片的替代文本，用于无障碍和SEO"
---

2. 确保Jekyll集合配置正确 #

要让_clients文件夹里的文件被Jekyll识别并生成落地页，必须在_config.yml里添加集合配置：

collections:
  clients:
    output: true  # 开启自动生成落地页
    permalink: /clients/:title/  # 自定义落地页的URL结构

3. 修复落地页的全局变量引用错误 #

你落地页里的{% if portfolio.heading %}这个portfolio变量大概率没定义，导致这部分内容不显示。可以改成从站点配置里读取，比如先在_config.yml里添加：

portfolio:
  heading: "作品集"  # 你的作品集页面标题

然后落地页里的代码修改为：

{% if site.portfolio.heading %}
<h2>
  <a href="{{ site.baseurl }}/portfolio/">{{ site.portfolio.heading }}</a> / {{ page.title | capitalize }}
</h2>
{% endif %}

4. 统一图片路径引用逻辑 #

落地页里用了{% include relative-src.html src=page.image_path %}，如果这个include文件的逻辑有问题，会导致图片加载失败。可以直接换成和画廊一致的路径写法，避免依赖额外的include：

<img src="{{ site.baseurl }}/images/clients/{{ page.image_path }}" class="screenshot" />

另外，建议给外部链接添加判断，避免当external_url为空时显示无效链接：

{% if page.external_url %}
<p>
  <a href="{{ page.external_url }}">View {{ page.title }} &rarr;</a>
</p>
{% endif %}

最终修复后的完整代码 #

画廊代码（portfolio.html） #

<section>
  <div class="container">
    <ul class="image-grid">
      {% for client in site.clients %}
      <li>
        <a href="{{ site.baseurl }}{{ client.url }}">
          <img src="{{ site.baseurl }}/images/clients/{{ client.image_path }}" class="img-responsive" alt="{{ client.alt }}">
          <div class="details">
            <div class="name">{{ client.name }}</div>
            <div class="position">{{ client.subtitle }}</div>
          </div>
        </a>
      </li>
      {% endfor %}
      <li class="filler"></li>
      <li class="filler"></li>
    </ul>
  </div>
</section>

落地页代码（client模板） #

<section>
  <div class="container">
    {% if site.portfolio.heading %}
    <h2>
      <a href="{{ site.baseurl }}/portfolio/">{{ site.portfolio.heading }}</a> / {{ page.title | capitalize }}
    </h2>
    {% endif %}
    {% if page.subtitle %}
    <p class="subtext">{{ page.subtitle }}</p>
    {% endif %}
  </div>
</section>
<section>
  <div class="container">
    <p>
      <img src="{{ site.baseurl }}/images/clients/{{ page.image_path }}" class="screenshot" />
    </p>
    <div>
      {{ content }}
    </div>
    {% if page.external_url %}
    <p>
      <a href="{{ page.external_url }}">View {{ page.title }} &rarr;</a>
    </p>
    {% endif %}
  </div>
</section>

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