Mid Station

Hexo主题试作

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

H.T.M.LH.T.M.L

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├── _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处就能看到。当然还有其他一些小细节的调整。

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