..

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。

后记

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