很长一段时间以来就看到各种基于 Twitter Bootstrap 主题的博客很清爽，而且对 Tag 的归档也做得很赞，于是很想将自己的博客也换成 Bootstrap 的主题，随着看到的博客越来越多，自己的 Octopress 主题先得越来越臃肿，而 Tags 归档功能也相形见绌，更换主题的欲望越来越强烈了。于是乎，趁这个周末捣鼓了一番，最终大功告成，在这里分享一下具体过程。
Bootstrap 主题的安装
首先下载适用于 Octopress 的 Bootstrap主题 并解压缩到博客的 .theme 目录，然后安装：
rake install['bootstrap']
安装的过程中可能会提示有 sass 或其他依赖库的语法错误神马的，这是因为 sass 的版本过低，可以通过如下命令来跟新：
bundle update sass
其他库的升级类推。升级完这些依赖后，要修改你的 Octopress 博客的根目录下的 Gemfile 中的版本说明。最后再重新运行上上条的 rake install 指令。这样就完成主体的安装了，是不是很简单（实际操作中遇到问题的话，一般都是 jekyll 等各种的库的版本及相互间的依赖问题，通过 bundle update 基本上都能搞定）。安装完了之后，可以运行 rake generate 和 rake preview 来看看效果了。
配置 Tags 归档
接下来是配置类似 这种显示结果 的 Tags 归档页面了。
首先，需要安装 jekyll-bootstrap 的一些东西，请先下载并解压。主要是 includes/JB/ 目录下的内容，将 JB 文件夹拷贝到 $BLOG_HOME/source/includes/ 目录下，还有 jekyll-bootstrap 根目录下的 tags.html 拷贝到你想展示 Tags 的目录，并在 _config.yml 文件中配置 tag_dir 项的值为该目录，例如我这里的配置是：
tag_dir: blog/tags
所以我的 tags.html 文件放在了 $BLOG_HOME/source/blog/tags 目录下，并将 tags.html 重命名为 index.html。
这些配置好了后，你就可以先运行 rake generate 和 rake preview 来看看效果。可以发现 Tags 归档页的显示还是不太友好。那么我们需要加入一些自己的 css 样式。这里我参考了 pluskid 师兄的博客的 css 代码并略有修改，在我新建的 $BLOG_HOME/source/stylesheets/style.css 文件中加入如下代码：
/* tag_box */
.tag_box {
list-style:none;
margin:0;
padding:2px 0 ;
overflow:hidden;
}
.tag_box li {
line-height:20px;
margin:0;
}
.tag_box.inline li {
float:left;
padding:2px 0 ;
}
.tag_box a {
padding: 2px;
margin: 2px;
background: #eee;
color:#005F6B;
border-radius: 3px;
text-decoration:none;
}
.tag_box a span{
vertical-align:super;
font-size:0.8em;
}
.tag_box a.active {
background:#57A957;
border:1px solid #4C964D;
color:#FFF;
}
/* tag_box end */
注意，这里由于新加了 css 文件，要让其生效，需要在 html 模板中加入引用，具体我是在 $BLOG_HOME/source/_includes/head.html 文件中加入如下代码：
<link href="/stylesheets/style.css" media="screen, projection" rel="stylesheet" type="text/css">
你也可以直接在 html 模板中加入 css 代码而不用新建 css 文件并添加引用。
至此，已经配置完成了 ^_^ 可以运行 rake generate 和 rake preview 来看看最终效果了。
PS：本博客的主题及插件相关文件和代码可以看我的 GitHub Repo：xoctopress. 如有问题，可以参考这些代码。