Hexo主题试作

曾经见到某同学手执一本《21天精通HTML+CSS》摇头晃脑，心想这俩玩意儿上手甚至都不需要三天，想必剩下那十八天都是作者在聊人生了。就算你花21天时间把书上代码认认真真敲了一通，也不能大大方方在简历上写上“精通HTML”，何况我学习时间统共都没有超过三天。

H.T.M.L

这样一来，如果我的简历上大言不惭说自己精通HTML字样，大概就会被当作Erlich老兄一样此地无银三百两了。

首先尝试用yeoman来搭建框架，参考Hexo主题制作指南，同样选择了Swig模板引擎以及StylusCSS预处理。
生成出来是一个不带任何CSS样式的页面，只是简单把可能用到的一下JSON数据堆叠起来渲染成HTML。各个文件的架构很清晰明确，从这里我们就可以找照葫芦画瓢地逐一堆砌起整个主题的架构了。

├── _config.yml // 主题配置文件
├── languages // 多语言文件夹
├── layout
│   ├── archive.swig // 存档页模板
│   ├── category.swig // 分类文章列表页模板
│   ├── includes // 各页面共享的模板
│   │   ├── layout.swig // 页面布局模板，其它的页面模板都是根据它扩展来的
│   │   ├── pagination.swig // 翻页按钮模板
│   │   └── recent-posts.swig // 文章列表模板
│   ├── index.swig // 首页模板
│   ├── page.swig // 页面详情页模板
│   ├── post.swig // 文章详情页模板
│   └── tag.swig // 标签文章列表页模板
└── source
    ├── css
    │   └── theme.styl // 主题自定义 CSS 文件
    ├── favicon.ico
    └── js
        └── theme.js // 主题 JavaScript 文件

本来打算按照Next主题的布局重新再写一个主题的，但是写着不到半天就发觉不对劲了。主要发现有一下几个问题：

1. Next用CSS预处理的方式构建了大量函数，比如响应式布局。想要模仿着重新写一个主题，要么就直接借用这些在base.styl里面的应用，要么就重新自己写。这就类似与是写程序时候的库函数，当然可以直接调用，但是在没有文档，接口有不那么清晰的CSS预处理环境下，首先完全搞懂这堆东西就是一个大问题。
2. Next给用户提供了几套不同的Scheme，同时也包含了大量可定制的内容（评论，搜索等第三方服务），想要以它作为参考要不狠下心就剔除这些功能，要不就还要花大量时间适配。
3. Next的布局，动画，包括字体和颜色都是花了大功夫调整的，光是看到分类极细的源码文件就能体会作者的用心，这些设计上的细节可谓是牵一发而动全身。

讲了半天其实就是一个意思：Next作者造诣之高超非吾辈所能及，反正一口也吃不成一个大胖子，不如在此基础上稍作改动更加实际。

首先就是加上一个足够炫酷的题头，菜单栏太普通，走马灯加载慢，于是参考Fuzzz的akina主题做了个不规则的背景。挑上一幅有层次感的图片，相信足够撑起门面了。

然后在普通页面的顶栏加了一个小小的动效，就是现在看到的这个页面，鼠标一道左上角logo处就能看到。当然还有其他一些小细节的调整。

最后终于加上了考虑了很久的评论功能，写博客这东西嘛，没有一点互动真的很难坚持下去。