升级icarus到5.x
博客搭了很久，也没写多少东西，写东西其实很耗费精力。文没写几篇，机器人倒是天天给我发邮件说依赖炸了依赖炸了，记得曾升级过一次主题到5.x，直接全炸了，后来实在没什么时间，于是版本回退万事大吉，今天再重新更新一下。
源码升级
因为原本我在4.X的主题版本魔改太多，所以只能克隆源码升级，如果用 NPM 大概率问题多多。不过可以记录一下。
npm
用 npm 无非就是哪里依赖炸了装哪里。不是魔改的博客完全可以一用，可惜我的已经用面目全非脚踹过了。仅随手写个流程。
例行公事先 npm -v 和 node -v V一下看看版本，说不定整台电脑环境最老的就是这俩破烂了。太老了就更一更，更炸了就回滚，基操每次都得来一遍，菜狗的基本修养不能落下。
然后一个 npm list --depth=0 看看都装了些啥。不出意外肯定有意外。
npm ERR! peer dep missing 和 UNMET PEER DEPENDENCY （父依赖缺少了这个依赖的对等版本）之类的不一个接一个地来都不算什么年久失修的破烂博客项目了，无关紧要的包就不用管了，只要能跑起来，满屏的 ERR! 都是小意思，WARN 就更不用管了哈哈哈。
然后 npm info xx 看看要装的包的详细信息，然后 npm view xx version 看看还有点啥好的版本整一整，装最新的大概率在 hexo g 就全部爆炸。
然后 npm install --save xx@5.1.0 xxx@2.0.0 什么的装好收工。（好像 npm 版本比较新的都可以省略 –save 了，已经默认。）
源码
icarus 老文档是这么写的
1 | git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b <version number> --depth 1 |
我直接下了包放到 blog\themes\icarus 里
到这一步以后，再 hexo clean ，hexo g 搞一搞，报什么依赖出问题就装一个。完事。
重新魔改
虽然我的魔改都有记录备份，但是毕竟是大版本更新，文件结构和代码内容还是有很多小改动的，直接复制粘贴就炸了。与其一个个翻更改，不如重新魔改一遍。
参考本博客两篇主要文章《Hexo-icarus主题黑夜模式以及背景》，《hexo博客改进记录》。
完成上一步源码升级以后，先本地 hexo g s 看看有什么缺失，基本配置、文章、额外页面是完全没有受到影响的，也就是还能跑。（有那么一瞬间我都不想改了），夜间样式、图标、自定义的组件大小得全部重来。
按部就班来就按顺序看，直接一波改完直接目录跳到总结那里开始即可。
经过修改的文件以及位置
以我的前端水平，不记一下，下次大更新必挂，还是一劳永逸好。
文件基本都是在 bolgPath\themes\icarus 里，既然是源代码升级的方式 bolgPath\node_modules 里的 hexo-theme-icarus 就是图一乐，拿来看看依赖都勉强。
以下、增加的直接增，修改的都是小改动，覆盖修改的其实就是大改，除非大版本更新有影响，不然都直接覆盖比较省事
夜间以及背景
夜间模式
在
icarus/source/js下 增加night.js在
icarus/source/css下增加night.styl在
icarus/source/css下修改default.styl，末尾新增一行@import 'night'在
icarus/layout/common下修改scripts.jsx在<Fragment>标签间添加<script>标签索引<script src={url_for('/js/night.js')} defer={true}></script>在
icarus/layout/common下覆盖修改navbar.jsx与footer.jsx夜间背景
在
icarus/source/js下 增加universe.js修改
icarus/layout/layout.jsx，添加canvas和星空绘图的script路径。（参考夜间模式改动博文）1
2
3
4
5
6
7
8<body class={}>
<script ......></script>
<canvas id="universe"></canvas>
...
...
...
<script type="text/javascript" src="/js/universe.js"></script>
</body>日间背景
图片在
icarus\source\img里 覆盖修改 整个文件夹，网页图表也全在这个文件夹。在
icarus\include\style里 修改base.style的body。1
2
3
4
5body
/*添加下列代码*/
background: url(../img/mount.jpg) no-repeat
background-attachment: fixed
background-size: cover
其他魔改
固定导航栏
在
icarus\source\css内 覆盖修改style.styl修改组件、主页面宽度
在
icarus/include/style下 复制增加mystyle文件夹上一步在固定导航栏已经覆盖了
style.styl，就不用动了时间轴生肖图标
在
icarus\source下 复制增加font文件夹上两步已经覆盖了
style.styl和复制了mystyle文件夹，不用改动在
icarus\layout内覆盖修改archive.jsx颜色已经在新增的
mystyle\timeline.styl与night.styl改好。不用管。addtoany的图标修改
在
themes\icarus\layout\share复制增加addtoany.jsx
总结
增加与覆盖
在 icarus/source/js 下 增加 night.js
在 icarus/source/css 下增加 night.styl
在icarus/layout/common 下覆盖修改 navbar.jsx 与 footer.jsx
在 icarus/source/js 下 增加 universe.js
图片在 icarus\source\img 里 覆盖修改 整个文件夹，网页图表也全在这个文件夹。
在 icarus\source\css 内 覆盖修改 style.styl
在 icarus/include/style 下 复制增加 mystyle 文件夹
在 icarus\source 下 复制增加 font 文件夹
在 icarus\layout 内覆盖修改 archive.jsx
在 themes\icarus\layout\share 复制增加 addtoany.jsx
修改
在 icarus/source/css 下修改 default.styl ，末尾新增一行 @import 'night'
在 icarus/layout/common 下修改 scripts.jsx 在 <Fragment> 标签间添加 <script> 标签索引 <script src={url_for('/js/night.js')} defer={true}></script>
修改 icarus/layout/layout.jsx ，添加canvas 和星空绘图的script 路径。（参考夜间模式改动博文）
在 icarus\include\style 里 修改 base.style 的 body 。
完成
完成后本地测试、上传即可。
1 | git add -A |
