前言

玩Hexo不短了,突然在某个新网站部署时,发现首页一切正常,但点开子页面,如标签、分类等页面时,页面样式却是错乱的。
以为是文件没有上传完整,结果发现本地预览情况是一样的,且样式错乱时Hexo控制台并没有抛出任何错误提示,此类情况第一次关注到。

现象

  1. 首页打开正常,文章也能正常打开
  2. 标签、分类、存档等目录页时样式错乱

排错

排除主题导致

将主题配置为默认主题,然后再预览,发现问题同样的,说明跟主题无关,换什么主题都是这个现象。

添加 --debug 查看详细日志

只用 hexo s 启动时,控制台并没有触发任何异常,但前台页面却是错乱的,浏览器开发者工具打开,可见错误日志为:

Refused to apply style from ‘http://localhost/archives/css/style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

错误日志可见样式未加载,但这个拒绝理由让人看得云里雾里的,通过 hexo s --debug 启动后,可查看控制台日志输出:

1
2
3
4
5
6
7
8
9
10
11
12
13
05:41:09.217 DEBUG Rendering HTML index: index.html
GET / 200 66.447 ms - -
GET /css/style.css 200 3152.749 ms - -
GET /img/avatar.png 200 27.883 ms - -
GET /img/scrollbar_arrow.png 200 1.847 ms - -
GET /background/bg-4.jpg 200 8.649 ms - -
GET /js/main.js 200 6.026 ms - -
GET /js/pc.js 200 10.412 ms - -
05:41:16.058 DEBUG Rendering HTML archive: archives/index.html
GET /archives/ 200 29.652 ms - -
GET /archives/css/style.css 404 5.746 ms - 161
GET /archives/css/style.css 404 1.261 ms - 161
GET /img/avatar.png 200 1.023 ms - -

这里错误显示 /archives/css/style.css 这个文件 404 了,执行 hexo g 生成完,确实不会有这个文件存在,所以应该是程序解析资源路径识别上出了问题,打开 /archives/ 目录下的 index.html ,可见资源引用路径为:

1
<link rel="stylesheet" href="css/style.css">

这个路径表示当前路径下的 css 文件夹,该样式应该是全局的才正确。

修正解决

我们知道一个完整的资源路径应该是这样的:

1
https://sobaigu.com/css/style.css

上面的路径解释为:协议+域名+文件夹路径+文件名 ,在Hexo中就有一段是关于域名和路径配置的:

1
2
3
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #域名地址
root: / #文件夹路径

自己的网站配置这个地方检察了下,发现是省略了协议同时出现了大写字母,大写字母浏览器可以自动修正,但Hexo程序解析的时候却出了错,所以解决方法变是将大写字母改成小写,或者将协议添加完整:

1
2
url: sobaigu.com  #是否带协议各有利弊
root: /

如果添加协议的话就可以兼容大小写:

1
2
url: http://SoBaigu.com  #配置带协议在个别主题使用百度搜索时会出现问题
root: /