Hexo博客Next主题进一步调整以及性能优化

发表于 分类于
rongyi_theme_color 首先感谢宵鸣哥提供的配色方案，Next扁平化的UI搭配扁平的人物配色特别合适（鼻梁骨警告）

修改黑色模式

虽然Next主题在cfg里提供了开启黑色模式的代码，但我使用下来有三个问题

  1. 黑色不是0x000000全黑
  2. 无法手动随时随地切换亮暗模式
  3. 我手贱想自己搓css

但原生的Next主题没有提供切换亮暗模式相关的内容，所以现在有两种方法以达成需求

  1. 自己手搓js控制切换渲染
  2. 找现成的插件即开即用

因为我懒所以找了个插件就用起来了，等下次闲下来再手搓吧，到时候高低给他整个炫酷切换动画。

插件：hexo-next-darkmode

链接

插件本质上是在生成的过程中将自己的一坨css内联到body里面，根据就近原则，优先级比较高，就达到了覆盖next主题提供的黑色模式的目的。

原作者写的readme很详细了，跟着做就行。

配色错乱的问题

但是，使用这个插件的话，本质上next还是没打开黑色模式，只不过我们插了一段css到body里面让页面看上去黑了一点。

所以会出现一个致命问题：浅色主题下部分深色文字（如tag的词云）会在我们自己搞的假深色主题下隐身，彻底看不见。

解决方案很无脑，就是直接改next主题。

说实话原本我想偷懒的，结果写到这一步发现还不如自己手搓，但做都做了不如硬着头皮做下去。

直接进themes/next/source/css一顿乱调，把配色方案给改的面目全非毫无起伏。

就成了现在大家看到的样子了。

总之还是要抽时间手搓一下，至少写两套完整的css可以切换，而不是暴力修改next主题本身。

关闭动画及性能优化

狠狠地关闭动画！

之前看别人博客的时候，打开文章先看一两秒动画就觉得这玩意纯属鸡肋，烦人的要死，极大地降低了阅读效率和页面加载速率，就像手机的过渡动画一样无趣。

直接进next的config找到motion,enable:false

世界清净了。

CDN加速

next的资源加速详见next的config中vendors:描述。

静态资源详见next的config中css:,js:,images:三条，填上cdn地址。

图片懒加载

先装插件npm install hexo-lazyload-image --save

然后修改根目录下hexo的config

1
2
3
4
5
6
lazyload:
  enable: true 
  onlypost: false
  loadingImg: /images/loading.gif
  isSPA: true #Simple Page, should be activated when pjax is enabled.
  preloadRatio: 3

其实现在大伙流量套餐都是十几个G起步，家用宽带再怎么也有个10M带宽，懒加载可有可无。

但是，由于博客部署在github上，由于众所周知的不明原因经常会导致加载缓慢，所以加个懒加载还是很有必要的，图片转圈圈总比白屏好。

不蒜子还是别用了

这访问量算的不是很准的样子，玩个乐呵可以，但我对效率有极致追求，所以这动辄200ms的加载时间承担不起。

虽然真的很好玩，但不得不放弃。