前言

玩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: /