在上一篇文章中，已经搭建起了octopress博客。使用的是默认的主题，样式千篇一律，而且自带的一些功能和侧边栏并不适合国内的国情，得不到网络的支持，如facebook、twitter、google plus和disqus等。所以还是有必要进行一下改造，打造中国特色octopress博客的。

1. 第三方主题

首先，你先要选定的是博客使用的第三方主题，因为如果你已经进行了很多的网页设置，添加了很多的插件，再来改主题，你就要面临悲剧了，你会发现你已经配置好的东西被替换掉了，这无疑会对你的热情带来打击。所以我们先来看看第三方主题。你需要先找到自己喜欢的主题，之后可以在此主题上进行修改。点击这里是一个主题网站，给出了不同主题的预览图，使用该主题的博客和该主题的GitHub链接。选中你想要的，获得GitHub仓库地址，如下安装

$ cd blog
$ git clone https://github.com/shashankmehta/greyshade.git ./themes/greyshade
$ rake install['greyshade']
$ rake generate

这里我的博客在blog文件夹中，以安装greyshade主题为例。你按照自己的情况进行更改。rake generate后可以通过rake preview访问http://localhost:4000预览新的主题样式，不满意可以更换其他主题。

2. 侧边栏

侧边栏可以添加的插件很多，新浪微博、豆瓣等很多网站都有相应的插件，也可以到octopress的wiki页面寻找。

侧边栏在_config.yml中设置，添加进default_asides中，先后顺序代表显示的先后顺序，各个侧边栏插件代码放入相应的位置即可，自己添加的一般放入source/_includes/custom/asides，default_asides中默认从_includes之后路径开始写。

2.1 最新文章

首先说一下主题中可用的插件。

asides/recent_posts.html是最近写的文章的一个展示，添加到default_asides中即可显示，在_config.yml中可以设置显示最近多少篇文章，recent_posts: 5，注意冒号后有空格。

2.2 GitHub Repos

asides/github.html则是GitHub repos的一个展示，可以直接到达你的GitHub页面，在_config.yml中设置你的Github账号，并设置为true即可，如下：

# Github repositories
github_user: 812lcl 	#我的github
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true

2.3 微博秀

新浪微博是一个信息传播非常迅速的媒介，如果你热衷于微博，可以在侧边栏添加自己的微博秀。首先需要获得自己的微博秀代码，链接为http://app.weibo.com/tool/weiboshow，进行相应的设置即可获得微博秀代码。

然后在source/_includes/custom/asides创建weibo.html，添加如下代码，刚刚获得的微博秀代码也要添加到相应位置：

<section>
    <h1>新浪微博</h1>
    <ul id="weibo">
    <li>

    <!-- 在此插入获得的微博秀代码 -->

      </li>
    </ul>
</section>

最后在default_asides中加入custom/asides/weibo.html即可显示你的微博秀了。

2.4 豆瓣展示

你可以通过豆瓣读书、豆瓣电影、豆瓣音乐等多方面展示你自己，豆瓣也提供了类似微博秀的展示方式，添加方法也类似。获得豆瓣收藏秀的链接http://www.douban.com/service/badgemakerjs，根据自己的喜欢进行设置

然后在source/_includes/custom/asides创建douban.html，添加如下代码，刚刚获得的代码添加到<div>之间：

<section>
	<h1>My Douban</h1>
	<div>
	<!--添加到这-->
	</div>
</section>

最后在default_asides中加入custom/asides/douban.html显示你的豆瓣展示。

2.5 访客地图

效果如我的博客右侧那个精美的3D旋转地球所示，它可以显示访客数量，访客来自的地域，既有装饰作用，又有统计作用。它也有2D效果版，可以根据自己喜欢进行设置，地址在这里，然后获得代码。

依然在source/_includes/custom/asides创建earth.html，代码如下：

<section>
	<h1>访客地图</h1>
	<!--获得代码添加到这-->
</section>

在default_asides中加入custom/asides/earth.html显示你定制的访客地图。

2.6 酷站博客

你有一些经常去的网站、博客，想推荐给大家，则可以在侧边栏加上一个“酷站博客”，当然名字你自己取即可。

在source/_includes/custom/asides创建blog_link.html，代码如下：

<section>
<h1>酷站博客</h1>
<ul>
        <li>
        <a href="http://blog.jobbole.com/">伯乐在线</a>
        </li>
        <li>
        <a href="http://www.csdn.net/">CSDN</a>
        </li>
        <li>
        <a href="http://www.cnblogs.com/">博客园</a>
        </li>
        <li>
        <a href="http://coolshell.cn/">酷壳CoolShell</a>
        </li>
        <li>
        <a href="http://www.cnblogs.com/Solstice/">陈硕</a>
        </li>
</ul>
</section>

可以自行添加喜爱网站，然后在default_asides中加入custom/asides/blog_link.html。

看到这，你应该很熟悉添加侧边栏的流程了吧。

2.7 最热文章

Octopress Popular Posts Plugin是根据Google page rank计算，展示出权值最高的文章，插件的项目主页为点击这里。

这个插件的安装与之前的方法不同，首先在Gemfile中添加

gem 'octopress-popular-posts'

Gemfile中的是bundle安装时安装的所有依赖的软件，然后用bundle安装

bundle install

执行命令，将插件拷贝到你的source目录，如下：

bundle exec octopress-popular-posts install

到这就安装完了，可以设置显示了，在_config.yml中设置，增加下面一行：

popular_posts_count: 5      # Posts in the sidebar Popular Posts section

设置边栏显示文章数，最后在default_asides中添加custom/asides/popular_posts.html，即可显示出来。

这样就设置好了，同时建议将缓存的page rank文件添加进你的.gitignore中

.page_rank

2.8 3D标签云与标签列表

octopress默认的只支持category的分类，而并没有tag。category和tag分别代表有序/无序的知识点归纳。一篇文章只能属于一个category，但可以有多个tag。原来的plugin下只有category_generator.rb插件，实现category功能，在github上有两个插件帮助实现了tag生成和tag cloud功能插件1，插件2。但似乎并不支持中文，而category_generator.rb是支持中文的，所以我有样学样，改成了支持中文的，并且实现了3D标签云的，插件已经上传到github。clone到你博客的目录即可。

包含文件如下：

 ├─ plugins/
    │  ├─ category_generator.rb
    │  ├─ category_list.rb
    │  ├─ category_tag_cloud.rb
    │  ├─ tag_generator.rb
    │  └─ tag_list.rb
    └─ source/
       └─ _includes/
          └─ custom/
             └─ asides/
                ├─ category_cloud.html
                ├─ category_list.html
                ├─ tag_cloud.html
                └─ tag_list.html

其中category_generator.rb和tag_generator.rb定义了根据文章的category和tag标签分类存储文章的方法，category_tag_cloud.rb则可以定义了根据category或tag生成3D标签云的方法。category_list.rb和tag_list.rb实现了将所有文章的category和tag列出来的方法，其中category可以显示文章个数，tag根据此标签文章多少，大小随着改变。

四个HTML文件则是category和tag的列表和3D标签云的侧边栏实现。需要哪个，在default_asides中添加即可。

还有一点需要注意，在_config.yml中默认设置了category的目录，需自己加入tag目录

category_dir: blog/categories
tag_dir: blog/tags

这样可以观看效果了，不过3D效果的标签云，对于不支持flash的浏览器无效，如safari。

标签功能的实现，我参考了一下几篇文章：

2.9 相关文章功能

此功能即根据当前阅读的文章，分析博客中其他与此相近的文章，进行推荐的一个功能，在octopress wiki中推荐的第三方插件中有一个插件实现此功能，项目主页点击这里。该插件，利用octopress自带的LSI实现对文章分析分类，然后进行推荐，但当文章较多时分类过慢，它推荐安装GSL来进行分类。我安装过这个功能，但不知道它是根据什么规则分类，而且之后不知道安装了什么，之后每次分类都会出错。你可以自己尝试一下，项目主页都有详细的步骤。

就在我想放弃这个功能的时候，我发现了它――related_posts-jekyll_plugin。这个插件很简单，只需下载_plugins/related_posts.rb放在自己的plugins文件夹中，然后在想添加相关文章推荐的地方添加如下语句： {% raw %}

<section>
	<h2>相关文章：</h2>
	<ul class="posts">
		 {% for post in site.related_posts limit:5 %}
			<li class="related">
			<a href="{{ root_url }}{{ post.url }}">{{ post.title }}</a>
			</li>
		{% endfor %}
	</ul>
 </section>

我是在source/_layouts/post.html中加入的这些语句，这个html文件是打开博文时的布局，我将相关文章添加在博文的结束处。

这个插件是根据文章的tag进行分类的，根据所有博文与本篇文章共同tag的多少依次排序进行推荐，还是很简单有效的。

参考这里

3. 社会化评论与分享

3.1 友言和加网

octopress内置了disqus评论系统，不适合我国基本国情，所以需要用一些国内的第三方评论系统，如友言、多说，可以以微博、人人、QQ等账号登陆发表评论，网站通过验证后可以对评论进行分析，管理。

多说评论系统可参见为 Octopress 添加多说评论系统，不多做介绍。

我主要使用的是友言的一套评论系统及插件，分享使用的是加网JiaThis。首先注册友言账号，否则无法进行后台管理。注册之后获得代码，添加到source/_includes/post/share_comment.html。加网点击这里，定制自己喜欢的样式，获得代码也添加到上述文件中。

share_comment.html文件中代码如下（每个人不同）：

<!-- JiaThis BEGIN -->
<div class="jiathis_style_32x32">
        <a class="jiathis_button_qzone"></a>
        <a class="jiathis_button_tsina"></a>
        <a class="jiathis_button_tqq"></a>
        <a class="jiathis_button_weixin"></a>
        <a class="jiathis_button_renren"></a>
        <a href="http://www.jiathis.com/share?uid=*******" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
        <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1361705530382241" charset="utf-8"></script>
<!-- JiaThis END -->

<!-- Baidu Button BEGIN 
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare">
        <a class="bds_tsina"></a>
        <a class="bds_qzone"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <a class="bds_t163"></a>
        <a class="bds_hi"></a>
        <span class="bds_more"></span>
        <a class="shareCount"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6839808" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
        document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
 Baidu Button END -->

<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=*******"></script>
<!-- UY END -->

其中有一段代码注释掉了，那是我曾经添加的百度分享的代码，如果使用其他分享或评论，代码也可以添加到这。

现在功能代码在share_comment.html中了，下面需要使其显示到博文的底部。

首先在_config.yml中添加开关：

# comment and share
comment_share: true

然后在source/_includes/post/sharing.html中添加如下代码： {% raw %}

{% if site.comment_share %}
  {% include post/share_comment.html %}
{% endif %}

最后需要使你的网站通过友言的验证，才可以进行后台管理，后台可以进行评论管理、社交影响力分析、和评论栏的风格功能设置。

3.2 评论热榜和最新评论侧边栏

友言提供了多个嵌入式组件，如评论热榜、最新评论、评论计数等。我们可以将他们做成侧边栏进行展示，或在首页文章列表中，显示每篇文章的评论数目。

首先在你的友言后台管理中找到安装设置->嵌入式组件获得评论热榜和最新评论的代码，分别创建source/_includes/custom/asides/uyan_hotcmt.html和source/_includes/custom/asides/uyan_newcmt.html，代码如下：

<section>
<h1>评论热榜</h1>
<div id="uyan_hotcmt_unit"></div>
        <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=*******"></script>
</section>

<section>
<h1>最新评论</h1>
<div id="uyan_newcmt_unit"></div>
        <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=*******"></script>
</section>

然后再_config.yml的default_asides中添加其路径即可显示在侧边栏中。

友言评论框、评论热榜、最新评论可以在后台进行设置，改变设置并不需要更改代码。

3.3 评论计数显示

友言提供评论计数功能，可以将每篇文章的评论数显示在博客首页相应文章题目旁。实现方法为：在source/_includes/article.html中 {% raw %}

{% include post/date.html %}{{ time }}

的后边填入嵌入组件中获得的评论计数的代码，需要修改其中一些内容 {% raw %}

 | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#comments" id="uyan_count_unit" du="" su="">0条评论</a>
  <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=*******"></script>

4. 为博文添加原文链接及声明

可以为你的每篇博文末尾加上原文链接，方法很简单，只需创建plugins/post_footer_filter.rb，代码如下：

# post_footer_filter.rb
# Append every post some footer infomation like original url 
# Kevin Lynx
# 7.26.2012
#
require './plugins/post_filters'

module AppendFooterFilter
        def append(post)
                author = post.site.config['author']
                url = post.site.config['url']
                pre = post.site.config['original_url_pre']
                post.content + %Q[<p class='post-footer'>
                        #{pre or "original link:"}<a href='#{post.full_url}'>#{post.full_url}</a><br/>&nbsp;written by <a href='#{url}'>#{author}</a>&nbsp;posted at <a href='#{url}'>#{url}</a></p>]
        end
end

module Jekyll
        class AppendFooter < PostFilter
                include AppendFooterFilter
                def pre_render(post)
                        post.content = append(post) if post.is_post?
                end
        end
end

Liquid::Template.register_filter AppendFooterFilter

并可以针对这一区域的样式进行美化，在sass/custom/_style.scss末尾增加下列内容：

.post-footer{margin-top:10px;padding:5px;background:none repeat scroll 0pt 0pt #eee;font-size:90%;color:gray}

尊重原创，此功能来源为octopress每篇文章添加一个文章信息。

5. 公益404

在source目录下创建404.markdown，添加如下代码，即可实现公益404的功能，当你的网页出错找不到时，可以为公益尽一份力。

---
layout: page
title: "404 Error"
date: "2013-10-10"
comments: false
sharing: false
footer: false
---
<script type="text/javascript" src="http://www.qq.com/404/search_children,js" charset="utf-8></script>

好了先写到这了，还有一些东西没写，等后续再写吧。

参考文章：

Octopress侧边栏及评论系统定制

目录

1. 第三方主题

2. 侧边栏

2.1 最新文章

2.2 GitHub Repos

2.3 微博秀

2.4 豆瓣展示

2.5 访客地图

2.6 酷站博客

2.7 最热文章

2.8 3D标签云与标签列表

2.9 相关文章功能

3. 社会化评论与分享

3.1 友言和加网

3.2 评论热榜和最新评论侧边栏

3.3 评论计数显示

4. 为博文添加原文链接及声明

5. 公益404

812lcl

Linux命令学习（2）：rsync

Linux命令学习（1）：diff 和 patch

Vim 基本配置

重学C语言(四)——变量初始化

重学C语言(三)——复杂声明分析

重学C语言(二)——运算符优先级与计算顺序

重学C语言(一)——类型转换

Vim补全配置

Vim插件配置续

Octopress添加统计与SEO