🌟 前言
我的Hexo
版本是3.9.0
,Next
主题版本是7.5
版本,也就是移除了custom
文件的神奇的跨时代的版本。
我的服务器不是github-page
,而是阿里云的ECS
服务器,关于如何将Hexo
从github-page
迁移到阿里云的ECS
服务器请看这篇文章:将博客部署到阿里云服务器上。
当然一开始觉得这个版本好搓卡,本来想改改样式,不会CSS
,上网搜搜就有很多改custom
文件的文章,复制复制就可以改成很好看的样式,这下好了,一移除就全部失效了。
其实不然,在与Next
的大坑中摸爬滚打了很久后,
发现,你可以在themes/next/source/css/main.styl
中最后加上一句:
@import "_custom/custom";
然后再在themes/next/source/css
目录下新建_custom
文件夹,再进去新建custom.styl
文件,将网上搜罗到的Next
主题的文件都粘贴进去,就可以在本地预览这些新添加的样式了。
🙆当然你也许不需要这么麻烦的操作,你甚至可以在themes/next/source/css
文件夹中的任何一个.styl
文件添加你想要的css
样式代码都可以在本地预览中生效。
我想其中的原因在于:主题调用的文件主要来自于themes/next/source/css/main.styl
,而这个文件里面全是import
语句,即将所有的css
文件import
进来,也就意味着最后生成的整体的main.css
文件不过是将所有的css
分文件中的语句按顺序排列罢了,所以你加在哪个文件改变的不过是最后的main.css
的语句顺序罢了,但是其提供的效果依然生效。但为了日后修改方便,还是建议找对应的位置添加。
1️⃣ 问题陈述
前言中我也提到了“本地预览生效”的话,意味着,你大可自己定义css
样式,也可以将网上的内容复制粘贴,但有一点非常头疼,那就是大多数情况下,你只能成功地进行本地预览,而一旦deploy
到服务器上要么就是完全无效,要么就是稀奇古怪,甚至有时候你即使将整个/css
文件夹删除,发现deploy
后的网站样式完全没有变化。😢
紧接着通过在部署后的页面以及本地预览的页面分别进行F12
调试,逐一对比,终于发现了不一样的地方。本地预览时调试页面的/css
的文件下的文件名为main.css
就跟hexo g
生成在/public
文件夹下是一模一样的,但是到了部署页面中这个文件名就变为了main.css?v=7.3.0
,这多出来的?v=7.3.0
百思不得其解。再看看main.css
中的文件内容跟我pc里面的/public/css/main.css
里面的东西一模一样,但是main.css?v=7.3.0
里面莫名其妙的少了几百行,原以为是hexo deploy
命令部署的不全,漏了东西,但上阿里云的服务器文件夹里面一看内容跟我本地的一样。并且当我将main.css
里面的东西复制到main.css?v=7.3.0
时,我想要的部署的页面就跟我本地预览终于一样了,虽然刷新一下就没了,毕竟是网页调试。
那么问题就很清楚了,就是这个main.css?v=7.3.0
并不放在服务器端,调用的源头也并不明朗,而且是无法更改的,所以得想办法让部署的页面加载main.css
而不是main.css?v=7.3.0
。
2️⃣ 问题解决
既然知道问题出在哪里就很简单了,费了一番功夫,终于发现在themes/next/layout/_partials/head/head.swig
文件中,有一行语句是这样的:
<link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css?v={{ version }}">
很明显之前多出来的?v=7.3.0
就是出自于这里的?v={{ version }}
,所以就把这里的?v={{ version }}
删除,就可以了。
然后再hexo clean && hexo g && hexo d
,查看部署端页面,样式齐全完美!问题解决。👍👍👍
3️⃣ 一些缺点
这个方法可以完美地解决问题本身,而且绝对不会再出现本地预览与部署端不一样的问题,但是会出现副作用。
当我以为终于可以愉快地肆无忌惮地玩耍时,又发现一个新的问题。就是我又再次改造了css
样式,即在/_custom/custom
文件中加入了一些样式,再hexo d
发现样式没有变化。再调试发现问题,main.css
文件没有变化。思考一下,猜测这个原因应该跟main.css?v=7.3.0
问题是一样的,它本身是不可更改的,即使再hexo d
新的css
文件,其本身不会变化。
问题的解决方法就是将themes/next/layout/_partials/head/head.swig
中的
- <link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css">
+ <link rel="stylesheet" href="{{ url_for(theme.css) }}/main1.css">
也就是改成其他名字main1
也好main2
也好,就是改成跟原来不用的名字。然后继续hexo g
就会将生成的那些博客文章页面里面的引用的css
文件名改为main1.css
文件。
同时还要将/public/css
中的main.css
改为main1.css
,最后hexo d
,发现改动的css
样式也生效了。
当然这也就意味着,以后每次改动css
样式,都要将main.css
改成新的名字,如main2.css
、main3.css
......。
建议hexo clean && hexo g && hexo d
之前,先备份一下/public
文件夹,保留可以回退版本的可能。
所以建议要么不改css
,要么一次性改全。毕竟写Hexo
博客,重要的不是好看,而是内容,不是嘛?😉
4️⃣ 总结
- 删除
themes/next/layout/_partials/head/head.swig
中的main.css?v={{ version }}
后面的?v={{ version }}
- 每次修改
css
后,hexo d
之前,改造themes/next/layout/_partials/head/head.swig
中的main.css
的名字,如main2.css
、main3.css
......。 - 建议
hexo clean && hexo g && hexo d
之前,先备份一下/public
文件夹,保留可以回退版本的可能。
评论区