Jekyll Multiverse主题中如何判断文件名是否为excalidraw.svg或drawio.svg

开发者阿泽

2026-8-18

问题描述

我在GitHub仓库使用Multiverse主题搭建博客（地址appstew.github.io），想在_layout/multiverse.html中实现代码，判断文件名是否以excalidraw.svg或drawio.svg结尾。目前正在参加Java训练营，对HTML/JS/CSS了解甚少，已尝试搜索并编写代码1小时但无果，暂无更多时间处理。这功能在Java中很容易实现，但我无法在Jekyll的HTML模板代码中完成。现有代码片段如下：

{% for image in site.images %}
<article class="thumb">
  <a href="{{site.baseurl}}/images/{{ image.path | split: '/' | last | split: '.' | first }}.html">
    
    <img src="{{site.baseurl}}/img/{{ image.path | split: '/' | last | split: '.' | first }}.excalidraw.svg" alt="{{ image.title }}" />
    
    <img src="{{site.baseurl}}/img/{{ image.path | split: '/' | last | split: '.' | first }}.drawio.svg" alt="{{ image.title }}" />

解决方案

Jekyll基于Liquid模板语言，你可以利用Liquid的ends_with过滤器实现文件名后缀判断，修改代码如下：

{% for image in site.images %}
<article class="thumb">
  <a href="{{site.baseurl}}/images/{{ image.path | split: '/' | last | split: '.' | first }}.html">
    <!-- 提取完整文件名（包含后缀） -->
    {% assign filename = image.path | split: '/' | last %}
    <!-- 判断文件名是否符合指定后缀 -->
    {% if filename ends_with 'excalidraw.svg' or filename ends_with 'drawio.svg' %}
      <img src="{{site.baseurl}}/img/{{ filename }}" alt="{{ image.title }}" />
    {% endif %}
</article>
{% endfor %}