A hexo theme NexT for Farbox
此无人访问的Blog不知不觉已经两年了，期间折腾过不少，到最后发现Blog还是简单省心才是最好的，毕竟没人看。
关于NexT
NexT，一个Hexo的漂亮并且简洁的主题。但是Hexo的操作太繁琐了，懒癌晚期的我连打字都懒，更别说Hexo中的各种操作命令。于是Farbox是我的最佳选择，但是太小众，主题模板除了官方提供的几个，第三方的屈指可数。
关于移植
关于移植，其实从很早很早以前就有这个打算了，每当我雄心勃勃地把NexT的源码Clone下来打开以后，表情大概如下图…
终于在前几天，狠下心一口气完成了…
Github: Farbox-NexT
NexT目录结构分析
├── languages
├── layout
│ ├── _components
│ │ └── algolia-search
│ ├── _macro
│ ├── _partials
│ │ ├── head
│ │ ├── search
│ │ └── share
│ └── _scripts
│ ├── pages
│ ├── schemes
│ └── third-party
│ ├── analytics
│ └── comments
├── scripts
│ └── tags
├── source
│ ├── css
│ │ ├── _common
│ │ │ ├── components
│ │ │ │ ├── footer
│ │ │ │ ├── header
│ │ │ │ ├── highlight
│ │ │ │ ├── pages
│ │ │ │ ├── post
│ │ │ │ ├── sidebar
│ │ │ │ ├── tags
│ │ │ │ └── third-party
│ │ │ ├── outline
│ │ │ └── scaffolding
│ │ ├── _custom
│ │ ├── _mixins
│ │ ├── _schemes
│ │ │ ├── Mist
│ │ │ │ ├── outline
│ │ │ │ └── sidebar
│ │ │ ├── Muse
│ │ │ │ └── sidebar
│ │ │ └── Pisces
│ │ └── _variables
│ ├── fonts
│ ├── images
│ ├── js
│ │ └── src
│ │ └── schemes
│ └── vendors
│ ├── algolia-instant-search
│ ├── fancybox
│ │ └── source
│ │ └── helpers
│ ├── fastclick
│ │ └── lib
│ ├── font-awesome
│ │ ├── css
│ │ └── fonts
│ ├── jquery
│ ├── jquery_lazyload
│ ├── ua-parser-js
│ │ └── dist
│ └── velocity
└── test
目录挺清晰的，只要翻一遍，大概就知道各个模块之间的关系与布局。
在做移植的时候，由于懒，我也直接照搬原有的基本目录结构，毕竟这样比较不容易搞混…
移植语法的选择
从Farbox的官方API文档中可以看到，Farbox的模板有两种语法支持：
- Jinja2
- Jade
并且它们可以同时混用，本次移植我选择了Jade语法，还是因为懒，Jade的语法比较简单，没有大量的花括号混淆视线，嗯，Jinja2的语法给我的感觉就是这样的。
踩过的坑
暂时把记得的记录一下下啦
变量的继承
在Farbox模板引擎下，是无法继承一个变量的！！！Google上的Sample Code都是无法生效的，举个栗子：
base.jade
block class_block
- var class_name
div(class=class_name)
extend.jade
block class_block
- var class_name = 'classA'
以上代码的div中的class永远都是空的，在NexT的模板中，index继承的_layout中有一个page_class的block，当时也是被Farbox文档中**在.jade的模板文件中，可以在单独一行中使用Jinja2的语法。**蒙蔽了双眼，其实以下用法也是可以的：
base.jade
div(class='{{ class_block }}')
extend.jade
block class_block
| classA
本次移植的主题在index.jade与base.jade继承中的page_class就是用了以上的workaround。
诡异的字符串变量
在Farbox中声明一个字符串变量可以这样：
- var string = 'this is a string'
然而，当在字符串尾部加上一个迷之分号的时候…
- var string = 'this is a string;'
这特么的不科学啊！！！赶紧掏出http://jadelang.net验证一下我的语法压压惊，然而在网站上运行测试代码是毫无问题的…
于是字符串中的分号只能额外拼接，所以你能够在本次移植项目中发现一些奇丑无比的代码（都是在Javascript的拼接里），先这么写着能跑就好，以后再改吧（逃
TOC样式问题
根据文档的说明，post类型专有属性toc的值就是HTML格式的，这特么的就非常尴尬了，如何修改toc HTML中的样式呢？字符串替换！
其中一段代码：
- var toc = post.toc
toc = toc.replace('<ul>', '<ol class="nav">')
toc = toc.replace('</ul>', '</ol>')
toc = toc.replace('<li>', '<li class="nav-item">')
.post-toc-content= toc
It works fine! 当然，当需要自定义的样式比较复杂的话，这种方式是不可行的了，可以尝试通过Javascript来修改。
翻页路由大小写问题
看过这么多个Farbox模板，都是只有上一页和下一页，并没有实际页数的显示，所以怎么也得做一个。
然而调用Farbox提供的paginator的时候，当page为1的时候，也就是第一页，路由/page/1不会显示，这很正常，可以理解，但是！同时它会导致整个URL转成小写的！对于大小写敏感的Category路由就非常蛋疼了，举个栗子：
http://www.sunnyyoung.net/category/iOS：获取成功http://www.sunnyyoung.net/category/ios：获取失败
因此在翻页的处理上也要注意一下，page为1的时候当不要取paginator生成的URL。
后记
算是长知识了，顺便练了一下手。前端的时代变化得太快，完全跟不上了。