Jekyll配置分页后子页面博文预览图路径404问题如何解决？

问题原因 #

你在Front Matter中配置的图片路径为相对路径，浏览器会基于当前页面的URL路径解析相对路径：首页路径为站点根目录，所以路径解析正常；分页页URL带有/page2/这类层级，浏览器会把相对路径拼接在当前路径后，最终请求了不存在的/page2/assets/img/xxx资源。

解决方案 #

方案1：直接修改为根路径格式 #

在所有博文Front Matter的image路径开头添加斜杠，将相对路径改为站点根路径，浏览器会统一从站点根目录查找资源，不受当前页面路径层级影响。

修改后Front Matter示例：

---
layout: post
title:  "My first blog post"
image: /assets/img/post_image.png
---

方案2：模板层统一适配（兼容子目录部署场景） #

如果站点后续需要部署到站点子目录，不需要修改每篇博文的Front Matter，直接修改渲染缩略图的模板代码即可：
找到主题中渲染博文预览图的代码段，替换为如下格式：

<img src="{{ site.baseurl }}{{ post.image }}" alt="{{ post.title }}">

之后在_config.yml中配置baseurl参数：根目录部署配置为baseurl: ""，子目录部署配置为对应子目录路径，比如baseurl: "/blog"。

方案3：批量处理路径修改 #

如果博文数量较多，可以写脚本批量遍历_posts目录下的所有Markdown文件，统一给image字段的路径开头添加斜杠，避免手动修改遗漏。

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