A hexo theme NexT for Farbox

此无人访问的Blog不知不觉已经两年了,期间折腾过不少,到最后发现Blog还是简单省心才是最好的,毕竟没人看。

关于NexT

NexT,一个Hexo的漂亮并且简洁的主题。但是Hexo的操作太繁琐了,懒癌晚期的我连打字都懒,更别说Hexo中的各种操作命令。于是Farbox是我的最佳选择,但是太小众,主题模板除了官方提供的几个,第三方的屈指可数。

关于移植

关于移植,其实从很早很早以前就有这个打算了,每当我雄心勃勃地把NexT的源码Clone下来打开以后,表情大概如下图…

终于在前几天,狠下心一口气完成了…

Github: Farbox-NexT

NexT目录结构分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
├── 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

1
2
3
4
5

block class_block
- var class_name

div(class=class_name)

extend.jade

1
2
3

block class_block
- var class_name = 'classA'

以上代码的div中的class永远都是空的,在NexT的模板中,index继承的_layout中有一个page_class的block,当时也是被Farbox文档中在.jade的模板文件中,可以在单独一行中使用Jinja2的语法。蒙蔽了双眼,其实以下用法也是可以的:

base.jade

1
2

div(class='{{ class_block }}')

extend.jade

1
2
3

block class_block
| classA

本次移植的主题在index.jade与base.jade继承中的page_class就是用了以上的workaround。

诡异的字符串变量

在Farbox中声明一个字符串变量可以这样:

1
2

- var string = 'this is a string'

然而,当在字符串尾部加上一个迷之分号的时候…

1
2

- var string = 'this is a string;'

这特么的不科学啊!!!赶紧掏出http://jadelang.net验证一下我的语法压压惊,然而在网站上运行测试代码是毫无问题的…

于是字符串中的分号只能额外拼接,所以你能够在本次移植项目中发现一些奇丑无比的代码(都是在Javascript的拼接里),先这么写着能跑就好,以后再改吧(逃

TOC样式问题

根据文档的说明,post类型专有属性toc的值就是HTML格式的,这特么的就非常尴尬了,如何修改toc HTML中的样式呢?字符串替换!

其中一段代码:

1
2
3
4
5
6

- 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

后记

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