给Octopress博客配置Twitter Bootstrap主题

很长一段时间以来就看到各种基于 Twitter Bootstrap 主题的博客很清爽，而且对 Tag 的归档也做得很赞，于是很想将自己的博客也换成 Bootstrap 的主题，随着看到的博客越来越多，自己的 Octopress 主题先得越来越臃肿，而 Tags 归档功能也相形见绌，更换主题的欲望越来越强烈了。于是乎，趁这个周末捣鼓了一番，最终大功告成，在这里分享一下具体过程。

Bootstrap 主题的安装

首先下载适用于 Octopress 的 Bootstrap主题 并解压缩到博客的 .theme 目录，然后安装：

1

rake install['bootstrap']

安装的过程中可能会提示有 sass 或其他依赖库的语法错误神马的，这是因为 sass 的版本过低，可以通过如下命令来跟新：

1

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 项的值为该目录，例如我这里的配置是：

1

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 文件中加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/* 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 文件中加入如下代码：

1

<link href="/stylesheets/style.css" media="screen, projection" rel="stylesheet" type="text/css">

你也可以直接在 html 模板中加入 css 代码而不用新建 css 文件并添加引用。

至此，已经配置完成了 ^_^ 可以运行 rake generate 和 rake preview 来看看最终效果了。

PS：本博客的主题及插件相关文件和代码可以看我的 GitHub Repo：xoctopress. 如有问题，可以参考这些代码。