Hexo博客改版记录

每当我把之前立下的 flag 执行的时候，都感觉是一件很骄傲的事，太多的计划被我用各种接口扼杀在摇篮中了。

引言

在 Android 更新到 5.0 后，我就对触摸反馈这一点很感兴趣。也尝试模拟过，但是最后的效果都不太满意。
偶然的一次在 github上看到了 Materialize 这个项目，才知道了谷歌的Material Design(原质化设计) 设计规范。而后在公司听到设计师提到这个东西时，突然有种跟上了潮流的感觉。

就像一些文章中提到的，即使你不懂设计，但是照着样式去做，也不会太丑。
这显然很对我的胃口。

改版内容

除了博客风格改版外，也改变了以下一些内容。

Hexo toc

在我刚使用 Hexo 不久时，还曾专门写了一篇文章介绍 hexo-toc 插件的使用。不过最近在我升级了 hexo-toc 插件后，发现已经不需要像我写的那么麻烦了。这还不是重点。
因为博客布局结构要有很大变化，很多模版我都需要重写。所以就需要查阅 Hexo 文档寻找一些可利用的资料。
就在这个过程中，我居然发现了 Hexo 居然有生成 toc 的辅助方法。好气好气，也不是第一次翻文档了，之前居然都没注意到。

与 hexo-toc 插件比，这个辅助方法更加便利。文档链接
hexo-toc 需要在编辑时插入标记，且生成后的内容还在文章中占位。这对于想实现一些浮动式文章导航的同学十分不便。
而<%- toc(str, [options]) %>方法就简单多了，只要是在文章页中，你放到什么地方，就在什么地方渲染。

去 jquery

仅仅是一个博客，也没有多少复杂的 Dom 操作。读者也都是程序猿，也不存在要考虑浏览器兼容。jquery 能不用则不用，当前的 js 也就写了100多行。

去 fancybox

fancybox 是基于 jquery 的一个图片浏览插件，jquery 去了，它自然也就失效了。请求数挺多的,而且它本身的功能，我并不在意，没什么卵用的感觉。如果后续有需要，也可以用原生实现一个。

去 stylus, 用 less

这个纯粹是个人的习惯。html 和 css 还是喜欢原生的代码风格，stylus 和 jade 这种强缩进的都不太喜欢。

替换时需要在配置文件中增加 less 插件的依赖和参数配置。

plugins:
  - hexo-renderer-less
less:
  paths:
    - source/css/style.less

安装 roboto 字体

Roboto 字体是 Material Design 的推荐英文字体。英文字体文件字节小，毕竟只有26个字母。虽然写不了几个单词。
中文推荐字体是 Note，但是要115.5MB。Google Note Fonts

增加 Waves 效果

这个也是 Material Design 提倡的响应式交互效果。
Materialize 中使用的是 Waves。我也是顺藤摸瓜才知道了这个库。

现在的文章分享是直接通过 JiaThis API 接口，不需要引用额外的js。这样DIY就更方便了。
默认的分享样式，很难实现一些效果。像我现在的分享，有文章右侧的静态挂件和顶部浮动导航右侧的分享按钮。

最后

我不懂设计，所以关于 Material Design 的介绍，也就不多提。附上参考链接，有兴趣的可以去提高一下审美。

一些小细节还会不断的调整，之后整理下再把主题发布到 github 上。