侧边栏壁纸
博主头像
Excalibur博主等级

真实自有万钧之力。

  • 累计撰写 25 篇文章
  • 累计创建 14 个标签
  • 累计收到 2 条评论

完美解决:Hexo Next主题本地可预览CSS,但部署到网站CSS失效问题!

Excalibur
2020-03-28 / 0 评论 / 0 点赞 / 245 阅读 / 2,839 字
温馨提示:
本文最后更新于 2022-04-07,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

🌟 前言

  我的Hexo版本是3.9.0Next主题版本是7.5版本,也就是移除了custom文件的神奇的跨时代的版本。
  我的服务器不是github-page,而是阿里云的ECS服务器,关于如何将Hexogithub-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文件中,有一行语句是这样的:

 &#60link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css?v={{ version }}"&#62

  很明显之前多出来的?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中的

- &#60link rel="stylesheet" href="{{ url_for(theme.css) }}/main.css"&#62
+ &#60link rel="stylesheet" href="{{ url_for(theme.css) }}/main1.css"&#62

  也就是改成其他名字main1也好main2也好,就是改成跟原来不用的名字。然后继续hexo g就会将生成的那些博客文章页面里面的引用的css文件名改为main1.css文件。

  同时还要将/public/css中的main.css改为main1.css,最后hexo d,发现改动的css样式也生效了。

  当然这也就意味着,以后每次改动css样式,都要将main.css改成新的名字,如main2.cssmain3.css......。

  建议hexo clean && hexo g && hexo d之前,先备份一下/public文件夹,保留可以回退版本的可能。

  所以建议要么不改css,要么一次性改全。毕竟写Hexo博客,重要的不是好看,而是内容,不是嘛?😉

4️⃣ 总结

  1. 删除themes/next/layout/_partials/head/head.swig中的main.css?v={{ version }}后面的?v={{ version }}
  2. 每次修改css后,hexo d之前,改造themes/next/layout/_partials/head/head.swig中的main.css的名字,如main2.cssmain3.css......。
  3. 建议hexo clean && hexo g && hexo d之前,先备份一下/public文件夹,保留可以回退版本的可能。
0

评论区