前言
近期在为页面添加搜索工具的时候,出现了在本地预览正常,但是部署到云端后搜索框的css样式显示不正常的情况。在尝试了不同的一些解决方案之后,问题竟然被莫名其妙的解决掉了。这种bug被莫名其妙的解决掉了才最让人难受啊(恼)。尝试恢复了问题寻找一下具体的解决方式没有成功。只能将可能解决了问题的几种方案大致写出。
1.尝试强制刷新页面
这也是解决好我此次问题的最直接的方式。在本地预览正常。确认部署成功没有问题之后。需要强制刷新一下浏览器缓存才能显示重新部署了的页面,PC:Shift + F5刷新,PE:手动清除一下缓存再尝试刷新。之前一直在没有清除缓存的情况下刷新。结果样式始终不统一。
2.修改配置文件中的URL
如果出现大面积样式不统一或者css完全没有载入。可能是路径设置的问题。在根目录下的_config.yml中(不是主题文件夹下的_config.yml)找到url选项。设置为你的域名。或是xxxxxx.github.io/blog/的形式。如下图:
修改好后,先用hexo clean清除缓存
再用hexo g 生成待发布的文件
最后hexo d 发布
3.尝试重新卸载安装对应的插件和主题
如果是对应的某一个插件出现了样式不统一,也可以尝试着重新卸载安装对应的插件。在hexo根目录下的package.json文件中,可以看到我们已经安装的插件(依赖)如图:
用下面的命令可以删除掉已安装的依赖。
1 | npm uninstall xxx |
主题可以直接将主题文件夹删除,再用git clone命令重新安装(如果不想重新设置的话记得先将对应的_config.yml和已经设置过的其他文件保存好)
另外对于hexo-generator-search这个插件,在尝试重装的过程中发现其存在两个版本。版本号也不同。如果有对应插件的问题可以尝试更换一个版本。
4.jquery或css文件加载不正确
在处理该问题的过程,我并没有出现加载不正确的情况。但是看到有两位大佬是通过此种方式解决的。所以也可以留作尝试方案。
4.1替换加载链接
打开F12查看,原因是一个jquery文件没有加载成功。打开xx.github.io时,用的是https方式,从而这个jquery加载是失败的,本地是http模式。只要在yilia里,找到jquery的加载地址,把url从http改为https就可以了。
原贴地址:https://segmentfault.com/q/1010000007410421
4.2本地与在线样式文件不同
原贴地址:https://blog.csdn.net/ExcaliburUlimited/article/details/105161761
在出现问题的时候。我对照了本地css和部署后的css。发现二者虽然名字相同。但是内容存在一定的差距。但在问题解决后,二者内容保持了一致。一开始以为是hexo deploy命令部署的不全。或者是存在css合并的操作。现在再来看也许是没有强制刷新导致的本地缓存中的css与重新部署的css不一致。