花了两三天时间认真的码(chao)了点代码,把以前用的Biture主题重写成swig版本的,然后做了一些优化。新主题加了个re叫Rebiture以示区别。

缘起

以前用Biture的时候实际上就有做一些修改,还fork了一下biture把改动推到Github上去了。不过以前就觉得Biture的ejs代码写的很混乱,试用过新版本Hexo的NexT主题之后就更觉得如此了。所以动了直接用swig推翻重写,只沿用biture的页面结构和css的想法。

新特性

  • 添加了多说的支持,当然也保留了Disqus。不过多说优先级要高一些。
  • 添加了百度统计的支持,而且在head和body结束前各加了一个自定义区块,可以添加自己需要的统计代码。
  • 首页显示评论条数。
  • 调整了Archive/Category/Tag页面里标题的字体大小。biture原作者看起来是完全不用这些特性……
  • 用Hexo的Paginator函数重写了分页,稍微修正了一下样式。

TODO

  • 计划再用Stylus之类的把css也重写一遍
  • 把Archive/Category/Tag页面的样式再美化一下
  • Pagination也要美化
  • 文章内容的模板考虑把index和post分开写
  • 考虑换个代码高亮主题……

杂想

Hexo

Hexo页面模板有fallback机制,最差情况下只要有index的模板就可以生成整站了。但是fallback的顺序有点奇怪……

同样作为以文章列表为基础,archive是fallback到index的完全能理解。category和tag则是优先fallback到archive,因为这三者可能都只需要显示标题,不像index需要那么多内容。

而文章内容页,如果说post被fallback到index是没办法的话……page为何不优先fallback到post呢……事实上Biture里两者的内容完全一样,我改写的Rebiture也完全一样。只有NexT,文章内容模板和评论部分是分开的,因为没给page设计评论所以有所不同。

另外一点,Hexo的i18n的机制没太搞懂……也可能是hexo server在这方面处理有问题。如果站点配置里language什么都不填写,似乎并不会使用default的内容。我写了default/zh-CN/zh-TW,但是除了设置为zh-CN的时候,不管language留空还是写default,页面都在使用繁体的locale……百思不得其解。

因为我个人想完全使用英文,就直接放弃了i18n的设置。似乎biture的新版本里也去掉了。

最后一点是Hexo的升级做的不太好……我已经经历了两次升级Hexo后原来的站点(模板)不能渲染了。当然这一点不能算是Hexo的错。重点是有很多随着版本升级变化的东西,Hexo似乎没有写在Migration Guide里。比如以前archive/category/tag页面的分页是分别、单独设置的,现在生成的_config.yml里则没有这个设置。如果还在使用用旧选项做判断的模板的话,pagination就会出问题。

最离谱的是默认主题Landscape就有这个问题,但是没有随着Hexo的更新而更新。作为默认主题使用的也是EJS而不是现在内置的Swig……

NexT

从NexT里抄了很多东西,比如整体的模板继承结构,边边角角的一些设计(footer位置的since)。还有很多别的想抄的,CC协议标注、文章数统计、站内搜索。不过暂时没找到好位置放这些东西……等把biture的css理清楚再加吧。

NexT里也有一些问题或我个人不适应的地方。比如page模板不给comments,我的guestbook就搞不起来了。实际上某些作品展示页面之类的功能上page有comments还是很有用的。

另外就是Google Analytics的代码摆放的位置。实际上很多主题似乎都有这个问题,不知道从哪本老黄历上翻的说放在body结束之前,所以都往最后放。实际上自从10年左右GA更换为异步代码之后就一直推荐在head标签里放代码了。但是Google Analytics的代码部署的首页没提到这一点(百度统计就提到了),在Developers频道里才说了。不管是以前的GA.js还是新的Universal Analytics,都是放在head里比较好。

Biture

Biture的作者貌似是台湾人,移植了好几个主题到Hexo,不过好像后续都不怎么管了…23333

Biture里个人使用的痕迹很重。看了下他自己的博客,Archive/Category/Tag页面几乎算得上是根本就不用,所以这三者模板的部分写的也很简单。一个time标签放日期和一个div标签放标题,两者之间也没有做任何样式的处理。标题跟首页的标题一样大……放在这三个没有内容摘要的页面里那就是大的出奇,不得不自己加了区分的class在css里改小。

Biture原本的文件结构大概是从Landscape之类移植来的。有很多代码其实根本就没用到……不过标签的使用个人认为比别的模板好一些。比如凡是文章都用的article标签,内部加了header标签和footer标签划分区域。从早期用Table布局到后来的“有Div就够了”再到现在可以不用div的地方就不用,总算是有比较合理的进步了。

Swig

一直很喜欢Swig,虽然这是头一次拿Swig写东西……不过同作为由Jinja启发产生的Javascript页面模板,Swig已经远不如Nunjucks活跃了。Swig似乎是个人开发,Nunjucks则是Mozzila主持的,总归不能比。Hexo内置的渲染引擎也转向Nunjucks了,因为支持异步渲染。虽然对外还是说内置Swig的支持。

相比较EJS,Swig可能只有一点不爽……就是JS代码似乎不能乱嵌入了。严格的说这是好事。不过我一直没搞清楚哪些地方可以嵌入JS,哪些地方又是Swig自己分析逻辑。有次在内容标签里用了三元运算符Swig报错了,我才知道内容标签是Swig自己解析的……

另外遇到的模板语言很不爽的一点就是生成的HTML里掺杂着很多空白行……都是模板里对应位置有模板逻辑代码,残留下来的换行符。但实际上那些换行符是为了模板代码看起来有序才加的……最后还是装了hexo-beautify在发布的时候做一下美化

CDN

基于某些大家都懂的原因,Rebiture相比Biture针对大陆做了很多优化。Disqus偶尔会碰到加载不能的状态,而且第三方登录也不符合国情,所以换了多说。其实在国内而言多说真的算是不错了,就是后台略烂……我的文章列表一直不能翻页,而且似乎几篇我删掉了的文章不知道卡在数据库什么位置,相同的文章就是添加不进来。

很多常用的前端库也都有CDN。Rebiture现在用BootCDN,感觉还不错。

比较麻烦的是Google Fonts API……网上有Google Fonts的国内镜像,但是!但是!但是它提供的是字体文件……而实际上很多地方都是用@import引入谷歌提供的css。

因为懒得手写这部分代码,所以干脆使用的360的CDN,换个域名就可以了……只是引入个css代码片段,希望360做不出什么出格的事情。

总结

基本上就是这个样子……总算把对Biture主题做的更改推到了一个自己比较满意的程度并且保存了起来,之后改起来也应该比较方便。

写了两三天代码感觉还挺舒服的。Workflow还远未到达让我满意的程度,不过vim至少是用的比以前熟了,可喜可贺。