从去年11月底开始,我下定决心要把自己的Jekyll博客模版改成WordPress Twenty Eleven和Twenty Twelve类似的模式,做了个Freshman21(读作21st),并且在github上公布了出来(这句有点像废话,本博客就是放在github pages的)。 并且在jekyllthemes.org做了宣传,三个月下来,有不少Jekyll博客的用户使用了我的模版,并且给我的模版纠正了很多错误的地方,非常感谢这些热心的用户。 那么,接下来想总结一下“一个博客模版必备的元素”。

1.基本Html+CSS应该包括的内容

  • Table of Content
  • h1,h2,h3,h4,etc.
  • Blockquotes
  • Code formatting and highlight
  • Table
  • font style : cite and bold
  • Responsive web design
  • li style
  • Open Graph META Tags
  • Microdata (schema.org)

TOC我在刚做模版时给忘记了,kramdown语法支持TOC,所以这块CSS是后加上的,先前fork本模版的用户要苦逼了m(_ _)m。 Open graph meta tags 和Microdata的信息都是为了Facebook,Twitter,G+这些社交分享功能才加入的,我觉得写个模版,需要遵守的规定越来越多了。

2.基本的页面应该包括的内容(模块)

  • 目录
  • 标签
  • 自我介绍
  • 留言簿
  • 版权声明
  • 订阅RSS
  • 近期文章
  • 博客友链
  • 博客归档

在上面的项目中,除了“博客归档”需要借助plugin其他都可以用html+css+liquid实现,“博客归档”如果不自己写程序,那么在liquid只能实现按年份的“伪归档”,我的博客模版里就是一个“伪归档”。

3.其他附加模块

  • Back to top滑动按钮
  • google analytics/百度统计
  • 分享到按钮
  • 站内搜索(推荐google search)
  • 异步加载自动展开
  • ReadMore 折叠长文章模式

上面所述的模块,设计社交分享,搜索引擎,用户体验,信息统计四个部分。

对于社交分享和统计,如果你的博客是建立在github pages上,请尽量采用国外的社交分享链接和留言系统,我知道这样对于国内读者非常不友好,但是由于GFW温柔注视github的情况时有发生,所以用国内的产品很可能出现各种莫名其妙的问题如果你的页面是建立在coding.net这样的国内网站上,并且网站面向国内用户,请禁止使用google系列的所有产品,所有google相关功能都有可替换的国内产品(写完这句,想到自己生活在一个大局域网内,还是挺悲伤的T_T)。

站内搜索有两种实现方式,一种是用Jekyll的plugin,在官网上就可以找到,但是这个插件有个弱点,貌似是说文章越多搜索时要缓存的内容越多,搜索速度会变慢。所以,我就采用google site搜索了,国内用户就当作没看见这段话。

用户体验主要想说的是“异步加载自动展开”和“折叠长文章”,前者需要写一些JaveScript,由于我的第一个模版想尽可能的是一个干净的html+css模版,所以我就没研究这个内容,不过文章多了,用这个应该用户体验会好些;后者就是在首页只显示博文的一部分内容,需要阅读全文需要点进页面,这个很好实现,用post.excerpt或者post.summary都可以,条条大路通罗马。 我一开始觉得用post.summary自己写summary的方法比较方便,但是后来仔细研究了一下,在模版中采用的是post.excerpt方法(我自己博客中没有用,想看效果出门左转找Freshman21)。

4.还能做些什么

  • cv
  • 参考文献的css修饰
  • 各种链接的css修饰
  • 在多人博客中区分不同作者
  • 引用博客文章的权限提示,引用格式
  • 数学文章的定理,命题,公里模块的css修饰,炫酷的Q.E.D.

这部分内容只是有想法,没有实现的动力,目前我是一个喜欢极简风格的人。