基于Bootstrap的黑色极简博客园主题

正如你所看到的，这是一个基于Bootstrap的黑色博客元主题。

主要的改进有：

• 使用时间轴形式展示首页的博文列表
• 评论区iMessage风格化
• 整体风格bootstrap化
• 响应式设计。

关于时间轴

在我的首页，你可以看到一个时间轴形式的博文列表。这个时间轴效果最初是我在最近参加的一个现场网页制作比赛中实现的，后经过完善和改进，若感兴趣可以移步我的Gist

该时间轴的实现并不复杂，js只负责添加class和节点，所看到的效果全由css完成，

关于博客园主题的定制

虽然我不太喜欢博客园提供的主题，但博客园容许我们自定义header和footer，这意味着我们可以直接插入css和js代码或引用外部文件，使得我们对博客园的定制有了无限的可能，缺乏的只是我们的想象力。

利用jquery强大的选择器和dom操作能力，我们可以按自己的意愿任意修改页面html，当html、css、js都可以被定制，还有什么不能做的呢。

需要注意的是，最好将css和js上传到自己的文件空间再引用，尽管我们可以直接在页面中插入相应的的代码，但这样不利于浏览器缓存，并且会有一些限制（博客园后台会对html代码进行过滤，比如alert会被过滤掉，而外部文件不会）。同样的，最好不要直接引用其他网站的css或js，而应该下载下来放到自己的文件空间再引用。

关于博客园的代码高亮

理想的代码高亮应该是使用<pre>保存，显示时渲染。博客园代码高亮的问题在于一旦插入，就直接生成一堆标签将代码弄得支离破碎，这样一来，修改代码就变得非常麻烦。

prettify是比较理想的代码高亮插件，官方就提供了多种主题，独立的css文件让定制更为方便。

最后的一些问题

我们所看到的博客园文章页面都不是一次性生成，评论区、边栏等一些模块是通过ajax异步加载的。这给我带来了一些问题，由于我需要用js修改dom，尽管我已经将don操作的时间推迟到了window.loaded，然而通过ajax下载的页面并不总能在windows.loaded前完成。于是，出现这种情况的时候，我的js会放空，页面html不会如我所愿的被改变。应该庆幸的是，这种情况发生的概率并不高，如果你发现评论区没有任何改观，刷新一下就好。

最后的最后

我不是前端攻城狮，但对前端有着很大的兴趣，欢迎交流。