Jekyll中ERROR '/undefined'错误的来源及修复方法

你遇到的控制台错误输出如下：

bundle exec jekyll serve --livereload
LiveReload address: http://127.0.0.1:35729
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
        LiveReload: Browser connected
[2025-01-14 14:29:18] ERROR '/undefined' not found.

以下是具体的排查方向和修复方法：

• 动态模板变量未正确赋值
  即便你检查了静态img标签，也要留意用Liquid模板变量生成的资源路径（比如<img src="{{ post.cover_image }}">）。如果变量未定义或为空，渲染后会变成<img src="undefined">，浏览器会发起/undefined的请求。
  修复：遍历所有使用变量的资源引用（img、script、link标签都要覆盖），确保变量有有效值，或者给变量添加默认值，比如{{ post.cover_image | default: '/assets/images/default-cover.png' }}。

• 前端JavaScript错误发起请求
  页面中的JS代码如果使用了未定义的变量拼接请求URL，比如const imgSrc = undefined; const img = new Image(); img.src = imgSrc;，就会触发/undefined的请求。
  修复：打开浏览器开发者工具（F12），切换到「网络」标签，找到状态为404的/undefined请求，查看「发起者」列定位到对应的JS代码，修正变量赋值逻辑，或者添加判断（比如if (imgSrc) { img.src = imgSrc; }）。

• CSS背景图片路径错误
  CSS中如果用模板变量生成背景图片路径，比如background-image: url({{ site.header_bg }});，当变量未定义时，渲染后的CSS会变成url(undefined)，浏览器会请求当前域名下的/undefined。
  修复：检查所有CSS文件（包括Jekyll生成的编译后CSS），搜索undefined关键词，找到对应的背景图片声明，修正变量配置或替换为有效路径。

• 主题/插件引入的问题
  你使用的Jekyll主题或第三方插件可能存在未处理的变量逻辑，导致生成了无效的资源路径。
  修复：检查主题的_config.yml文件，确保所有和资源路径相关的配置项都已正确设置；或者暂时禁用所有第三方插件，重启服务看错误是否消失，逐步排查出问题插件。

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