如何在Jekyll自定义集合中管理并正确引用本地图片？

冲突原因 #

Jekyll默认会将集合目录下的非Markdown文件（如图片）当作集合的关联文件处理，但未自动识别图片的目录结构，导致所有图片被错误输出为/集合名.jpg（比如event1.jpg），多个图片共享同一输出路径引发冲突。

解决方案 #

方案1：针对单个集合配置输出路径 #

在_config.yml中添加默认规则，为每个集合的图片指定独立的输出目录：

collections_dir: events
collections:
  event1:
    output: true
    permalink: /:collection/:title
    sort_by: date
  event2:
    output: true
    permalink: /:collection/:title
    sort_by: date

# 新增图片输出路径配置
defaults:
  - scope:
      path: "events/_event1/images"
      type: "files"
    values:
      permalink: "/event1/images/:basename:output_ext"
  - scope:
      path: "events/_event2/images"
      type: "files"
    values:
      permalink: "/event2/images/:basename:output_ext"

配置后，events/_event1/images/title1.jpg会被输出到_site/event1/images/title1.jpg，文档中直接用/event1/images/title1.jpg引用即可。

方案2：通用化配置（支持新增集合） #

如果后续会添加更多集合，使用通用规则自动匹配集合名，无需重复修改配置：

defaults:
  - scope:
      path: "events/_*/images"
      type: "files"
    values:
      permalink: "/:collection/images/:basename:output_ext"

这个配置会自动从路径中提取集合名，将图片输出到对应集合的images目录下，新增集合时无需额外配置。

验证 #

执行jekyll build命令，检查_site目录：

• 应生成event1/images和event2/images子目录
• 对应图片已正确复制，无冲突提示

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