Jekyll静态文件匹配异常：前缀相同的图片目录误匹配

Ah, I get it—your problem comes down to the contains filter doing a simple substring match. Since "pics/models/gallery/kenneth" includes "pics/models/gallery/ken" as a substring, the Ken page ends up grabbing images from both directories. Let's fix this with precise directory matching, here are a few easy solutions:

1. Add a Trailing Slash to Your Gallery Path (Simplest Fix) #

The easiest way to avoid substring matches is to append a trailing slash to your gallery_path. This way, we're checking for the exact directory name followed by a slash, so "ken/" won't be confused with "kenneth/".

Update your code like this:

<div class="model-gallery">
 {% capture gallery_path %}pics/models/gallery/{{ page.title | slugify | replace: '-','' | replace: 'å','a' | replace: 'ä','a' | replace: 'ö','o' }}/{% endcapture %}
 {% for image in site.static_files %}
 {% if image.path contains gallery_path %}
 {{image.size}}
 <img class="gallery-item" src="{{ site.baseurl }}{{ image.path }}" alt="{{page.title}}, {{site.title}}" />
 {% endif %}
 {% endfor %}
</div>

This works because "pics/models/gallery/kenneth/" doesn't contain "pics/models/gallery/ken/" as a substring—they're distinct directory paths now.

2. Match the Exact Directory Name via Path Splitting #

If you want more control, split the image path into parts and compare the directory name directly. This ensures we're only matching images in the exact target directory, regardless of other path structure.

Here's how to implement it:

<div class="model-gallery">
 {% capture target_dir %}{{ page.title | slugify | replace: '-','' | replace: 'å','a' | replace: 'ä','a' | replace: 'ö','o' }}{% endcapture %}
 {% for image in site.static_files %}
 {% assign path_parts = image.path | split: '/' %}
 {% comment %} Grab the directory name that holds the image (second last part of the path) {% endcomment %}
 {% if path_parts.size >= 2 and path_parts[-2] == target_dir %}
 {{image.size}}
 <img class="gallery-item" src="{{ site.baseurl }}{{ image.path }}" alt="{{page.title}}, {{site.title}}" />
 {% endif %}
 {% endfor %}
</div>

For an image at pics/models/gallery/ken/photo.jpg, splitting the path gives us an array like ["pics", "models", "gallery", "ken", "photo.jpg"]—we just compare the second-last element (ken) to our target directory name.

3. Use Regex for Precise Pattern Matching #

For the most precise control, use Jekyll's match filter with a regular expression. This lets you define an exact pattern for the directory path, ensuring no accidental substring matches.

Try this code:

<div class="model-gallery">
 {% capture target_dir %}{{ page.title | slugify | replace: '-','' | replace: 'å','a' | replace: 'ä','a' | replace: 'ö','o' }}{% endcapture %}
 {% capture gallery_regex %}^pics/models/gallery/{{ target_dir | escape }}/{% endcapture %}
 {% for image in site.static_files %}
 {% if image.path match gallery_regex %}
 {{image.size}}
 <img class="gallery-item" src="{{ site.baseurl }}{{ image.path }}" alt="{{page.title}}, {{site.title}}" />
 {% endif %}
 {% endfor %}
</div>

The escape filter ensures any special characters in your directory name are properly handled in the regex, and the ^ anchor makes sure the pattern starts at the beginning of the path.

Recommendation #

I'd start with the first solution (adding a trailing slash)—it's the least invasive change and directly fixes your substring matching issue without overcomplicating things.

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