GitHub Pages部署的报社网站子路径下CSS与图片加载失效求助

根因定位 #

你的问题由CSS资源的相对路径引用逻辑导致：

• 你全站的CSS、JS等静态资源都存放在根目录的assets文件夹下
• 你所有页面的资源引用都写的是相对路径assets/css/xxx.css，没有前缀
• 访问/articles（根目录级路径）时，浏览器会把相对路径拼接为对应根目录下的assets资源路径，资源真实存在，样式正常加载
• 访问/article/xxx.html（二级目录级路径）时，浏览器会把相对路径拼接为/article/目录下的assets资源路径，该路径不存在，CSS加载失败，页面样式失效

修复方案 #

两种方案均可修复，优先选第一种：

1. 全局替换为绝对路径引用
   把所有页面里的资源引用路径开头加上/，比如把assets/css/main.css修改为/assets/css/main.css。带/前缀的路径会让浏览器固定从站点根目录开始查找资源，不管页面在哪个目录层级都能正确加载资源，后续新增子页面也不需要再调整路径，维护成本最低。
2. 调整子目录页面的相对路径层级
   仅修改/article目录下所有页面的资源引用，给路径前面加../回退到上一级目录，比如改成../assets/css/main.css，也能正确指向根目录下的资源文件。

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