Hugo Congo主题分页时同目录特色图片加载异常求助

问题描述 #

我是Hugo新手，自定义Congo主题时遇到以下问题：

• 主题默认采用Page Bundles匹配特色图，但我想复用frontmatter的feature字段指定图片名称来展示特色图
• 目录结构如下：

Hugo/
  content/
    journal/
      post1.md
      featured-image1.jpeg
      post2.md
      image234.jpg
      ...

• 文章frontmatter示例：

---
title: Post 1
feature: "featured-image1.jpeg"
...
---

---
title: Post 2
feature: "image234.jpg"
...
---

• 尝试的代码：

<img alt="..." class="..." src="{{ .Params.feature }}" />

• 问题：无分页时图片显示正常，启用分页后图片路径被拼接到分页URL后，无法正确找到与markdown同目录的图片
• 限制：必须保持当前简化目录结构，不使用Page Bundles或static目录存储图片

解决方法 #

将图片路径改为基于文章文件所在目录的根相对路径，替换原有代码为：

<img alt="..." class="..." src="{{ path.Join .File.Dir .Params.feature | relURL }}" />

原理说明 #

• .File.Dir会获取当前文章markdown文件所在的目录（如journal/），与feature字段的图片名拼接后得到正确的文件相对路径
• relURL会将该相对路径转换为站点根目录的相对URL，避免分页时URL层级变化导致的路径错误

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