2020年初的站点全面升级

因为已经有大概8个月没有同步过Hexo和主题NexT的最新代码,所以选择对整个站点进行重新配置,并重新定制NexT主题。

Hexo

Hexo并没有做太多的更新,主要是程序的总体升级,跟上最新版本。做的一个改动是解决Hexo在编译过程中会自动转换单引号为中文引号的问题,对于微软雅黑等字体这个转换会带来页面的不美观。

具体的解决方法在另一篇文章中。

主题

主题方面的升级比较多,这里分为样式、Layout、其他配置分别说。

样式

样式原先是直接修改模板,现在得益于Hexo支持利用脚本把自定义的文件注入到主题里对主题原有的样式进行替换,所以我根据可查到的一些指南注入了自定义的样式。

这些样式覆盖了主题本身和使用到的一些插件。

注入的方式是在主题的scripts目录下加入了一个注入,例子如下:

1
2
3
4
5
6
7
8
9
10
11
/* global hexo */

const path = require('path');

const files = ['text', 'color' ,'layout', 'mobile'];

hexo.extend.filter.register('theme_inject', injects => {
for (let file of files) {
injects.style.push(path.join(hexo.theme_dir,'custom/style/'+file+'.styl'));
}
});

之后我定制的所有样式都能够很好地注入到主题里面,对主题原有的样式进行覆盖,同时主题也不会因为后续的merge而出现冲突,是比直接修改模版要好很多的方法,这一次的更新一劳永逸地解决了冲突问题。

样式主要针对字号、侧边栏、插件的一些不合理的地方做了修正,有的修正是普适的有的是针对这个站点特别制作的,包括针对移动端的适配,Hexo其实处理得并不优雅。

一些样式会逐步考虑提PR让它成为主题的内置样式,之前我很多魔改的地方,包括备案以及Sidebar中Social部分在更新之后已经成了内置的样式,在我魔改的时候主题还没有加入这些东西,说明不止有我一个人认为这个样式可以进一步改进。

后续会考虑抽出一些普适性的样式提交PR,减少这一类的魔改,同时也可以通过和开发者的讨论得到一个更加合理的样式,更加完美地解决问题。

Layout

Layout方面主要是出于希望让这个站点后续有更多的可用方式,注入了一个之前针对App适配写的动态适配脚本,原则上载入一个CSS也能做到类似的事情,不过暂时不想重写。

其他

主题本身自带了对pangu.js的支持,pangu.js是由Vinta编写的一个排版库,这个库的意义在于给中英文加空格。但是作者是台湾人,有的东西并不符合简体中文的行文习惯,而且存在过度转换的问题,会把我不想转换的东西转换掉。

所以借助这个主题自带的vendor替换,我自己在Vinta编写的现有版本基础上重写了一个pangu.js,具体的解析在另一篇文章,大致是把之前han.simple.js的正则拿过来做了增强,然后用pangu.js的框架把我的正则封装起来,扩大其用途。

顺便框架的一些新东西我也启用了,比如说canvas-ribbon(这个背景实属好看)。

相关文章

(预留位置)