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中有一个pageclass的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

后记

算是长知识了,顺便练了一下手。前端的时代变化得太快,完全跟不上了。