上一篇讲了如何通过Github + Octopress搭建属于自己的博客，这篇主要记录一下如何个性化我们的博客，包括主题，布局排版等。
一、更换主题：
在上一篇文章中，我们安装了默认主题classic，我觉得不是很好看，所以去找了几个主题，先是选择了Slash，它是是专为 Octopress 设计的简单布景主题，清新简洁，排版完美，支持classic 主题的所有功能，并内建 Fancybox。
打开终端，输入以下指令即可完成Slash主题的安装：
$ cd octopress
$ git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate
更多关于slash的请访问http://tommy351.github.io/Octopress-Theme-Slash/index_tw.html#overview
后来我又换成了solarized主题，它有两种模式light和dark,安装方法差不多，在octopress目录下，终端键入：
git clone http://github.com/erikzaadi/solarized-octopress-theme .themes/solarized
rake install["solarized"]
想要改变模式,编辑 sass/custom/_colors.scss 然后改变 $sol 和 $solarized:
$sol : light; // light or dark - Recommended: set $solarized to the opposite of this
$solarized : dark; // (code syntax highlighting theme)
对于这些第三方主题，如果有自己不满意的地方，我们都是可以自己修改设计的，具体做法就是去octopress目录下修改配置文件，比如字体，配色，布局排版等等。
更多关于第三方主题请访问https://github.com/imathis/octopress/wiki/3rd-Party-Octopress-Themes
二、修改基本信息
初次打开自己的博客时，我的第一想法是修改一下博客空间名等基础的设置。想要修改，可以进入 octopress打开_config.yml文件，它分为三部分，修改其第一部分即可修改基本信息。
Main Configs
url: http://yoursite.com # blog地址
title: My Octopress Blog # blog名称，会出现在左上角
subtitle: A blogging framework # title下面的副标题，可以用来放你的喜欢的名人名言，或者简单介绍下自己
author: Your Name # 会出现在每篇文章下面的Posted by
simple_search: http://google.com/search # 右边搜索框使用的搜索引擎
description: # head.html中meta name="description"的默认content，但一般都被会截断的文章内容替换掉
Jekyll & Plugins
root: / # 网站的根目录，如果你网站是http://site.com/project这样的形式，就要写成 root: /project
# 生成文章的url形式，比如不喜欢url中带时间，习惯后缀加html，可以写成 /blog/:title.html
permalink: /blog/:year/:month/:day/:title/
paginate: 10 # 每页展现blog的数量，如果blog数量大于这个，会产生翻页
recent_posts: 5 # 右侧最近发表模块里blog的数量
# 在某篇blog中使用<!-- more -->，列表页就不会展现该blog全文，就会显示这个read on链接，指向blog全文
excerpt_link: "Read on →"
# 右侧边栏的展现，有些要下面的设置配合，比如你没有配置github_user，则这儿也不会展现github.html
# 也可以增加一些自己的页面，比如在/source/_includes/custom/asides/下增加about.html
# 然后在列表中增加custom/asides/about.html即可，这儿前后的顺序，就代表了页面上下的次序
default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html]
# 可以给不同的页面配置不同的侧边栏
blog_index_asides:
post_asides:
page_asides:
三、添加navigation页面
octopress默认有Blog、Archives、Tags三个导航栏，但比如我们想要添加一个About导航栏，在终端执行以下代码新建页面
$ rake new_page[about]
这会生成 source/about/index.markdown 文件。编辑该文件的内容。然后在头部导航菜单中添加页面的超链接，具体做法是编辑 /source/_includes/custom/navigation.html 文件，设置超链接，我的设置是：
<ul class="main-navigation">
<li><a href="{{ root_url }}/">Blog</a></li>
<li><a href="{{ root_url }}/blog/archives">Archives</a></li>
<li><a href="{{ root_url }}/tags">Tags</a></li>
<li><a href="{{ root_url }}/about">About</a></li>
</ul>
效果为
四、侧边栏添加分类目录Categories
我们可使用第三方插件实现 octopress-tagcloud
将文件包下载，拷贝文件只同样的目录下，然后在_config.yml的default_asides中添加category_list.html目录，我的为 custom/asides/category_list.html
对于文章怎么分类呢？在文章markdown文件开头设置categories属性即可，比如：
categories: Octopress
五、添加第三方评论
配置Disqus插件
disqus 是octopress内置的comments功能，注册disqus并和你的博客网址关联后，编辑config.yml文件可以打开该功能，找到以下内容并修改
#Disqus comments
disqus_short_name:
disqus_show_comment_count: false
填入注册 disqus 账号的名称，并将false修改为true。
另外需要注意：
- disqus必须要和自己的博客地址username.github.io关联上，通过添加Website关联
- 在disqus的setting的edit profile中设置开启Moderation
六、侧边栏添加微博秀
通过在侧边栏添加微博模块可以多一种互动方式。
首先要从新浪微博秀获取到自定义的微博秀代码，设定好微博秀样式后将代码复制下来。
然后在source/_includes/custom/asides目录下新建weibo.html文件，按照如下格式编辑该文件：
<section>
<h1>新浪微博</h1>
<ul id="weibo">
<li>
-- 在此插入获得的微博秀代码 --
</li>
</ul>
</section>
将刚才赋值下来的自定义微博秀代码粘贴到上述指定位置。
最后，和自定义category侧边栏一样，我们需要在default_asides中加入custom/asides/weibo.html。
重新部署后，微博秀就能正常展示啦！
七、新标签页打开网站中第三方链接
Octopress博客中，默认是在当前界面中打开第三方链接，这导致网站浏览者跳到第三方链接后很难回来，为了用户体验，我们可设置在新标签页中打开链接
将以下代码加入source/_includes/custom/head.html文件中：
> <script type="text/javascript">
> function addBlankTargetForLinks () {
> $('a[href^="http"]').each(function(){
> $(this).attr('target', '_blank');
> });
> }
>
> $(document).bind('DOMNodeInserted', function(event) {
> addBlankTargetForLinks();
> });
> </script>
记得把左侧的 > 符号都去掉。
不过本站的链接还是会在当前界面中打开。
八、快速返回顶部按钮
文章较长时，返回顶部按钮还是很有用的。下面介绍如何添加一个返回顶部按钮：
- 实现返回按钮功能
首先创建source/javascripts/top.js，添加如下代码实现滑动返回顶部效果:
function goTop(acceleration, time)
{
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement)
{
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body)
{
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0)
{
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
- 自定义返回按钮格式
创建source/_includes/custom/totop.html，设置返回顶部按钮样式和位置，
其中的width、height、right、bottom为图片在网页中的位置，可根据图片大小自行设定，示例代码如下：
<!--返回顶部开始-->
<div id="full" style="width:50px; height:50px; position:fixed; right:80px; bottom:100px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
<a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="返回顶部"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script>
<!--返回顶部结束-->
- 选择按钮图片
找到自己喜爱的返回按钮图片，命名为top.png后添加到source/images目录中（或修改totop.html中图片的路径）。
九、添加分享功能
添加分享功能很简单，
在 _config.yml 中增加一项： weibo_share: true
修改source/_includes/post/sharing.html ，增加：
// 下面的大括号是全角的，如果复制，请自行改成半角
｛% if site.weibo_share %｝
｛% include post/weibo.html %｝
｛% endif %｝
增加文件：source/_includes/post/weibo.html
访问 http://www.jiathis.com/，获取分享的代码
将上面 2 步的代码都加入到 weibo.html 中即可
另外可访问 http://uyan.cc/ ，获得评论的代码，添加到weibo.html，即可增加评论功能
十、添加访问统计功能
octopress模板里面默认带了Google Analytics工具，只需要注册Google Analytics， 获得一个google_analytics_tracking_id， 添加到_config.yml中对应位置，并对网站进行验证即可。然后可以通过Google Analytics分析网站的流量了。而且可以使用Google站长工具，对网站进行更全面的分析，进行SEO。
对自己的网站进行验证，只需将网站提供的用于验证的代码添加到source/_includes/head.html的<head>标签之间，网站部署到网上后，过几分钟即可验证通过，其他 需要验证的也同样操作。
除了Google的统计工具，还有就是国内使用很广的CNZZ了，注册后，添加并验证你的网站就可以添加统计代码了，选好自己喜欢的样式，获得代码，可添加到source/_includes/custom/footer.html中。即可查看每天你的博客的流量，进行相应的优化了。
最后还要提的就是百度站长工具和 百度统计了，方法和CNZZ方法类似 ，统计代码也可以添加到source/_includes/custom/footer.html中。但是我发现 似乎百度统计并不太准确，并且百度很难搜的到我的博客。
我的统计代码添加如下，使用CNZZ：
<p>
Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256694231'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1256694231%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</p>
十一、添加友情链接
在source\_includes\custom\asides目录下添加一个blogroll.html文件，模仿about.html，添加一些友情链接，例如：
<section>
<h1>友情链接</h1>
<ul>
<li>
<a href="http://jianshu.com/">简书</a>
</li>
<li>
<a href="http://cocoachina.com/">CocoaChina</a>
</li>
</ul>
</section>
然后在_config.yml文件中，在default_asides的数组中添加custom/asides/blogroll.html。
十二、一些汉化工作
若有需要，我们可以做一些汉化工作：在 _config.yml中，把 Read on改为 “继续阅读”。 在 source/_includes/custom/asides 目录下，将Recent Comments改为“最新评论”，Categories改为“分类目录”，将 source/_includes/asides/recent_posts.html 中Recent Posts 改为“最新文章”。
十三、在添加原文地址
当别人转载了我们的文章时，有时我们想要在自己的文章末尾添加原文地址，可按以下步骤添加
添加
post_footer_filter.rb插件到plugins目录下，这个插件可以在这儿 codemacro 下载到此时默认显示在链接之前的是
original link:，通过该插件代码可看出可以通过original_url_pre参数指定。只需要在_config.yml中加入
original_url_pre: "显示信息"
- 将链接信息与文章内容区分出来, 默认状态下，加入的链接信息与文章内容在显示上无法区分。可以在
sass/custom/_styles.scss中加入一行：
.post-footer{
margin-top:10px;
padding:5px;
background:
none repeat scroll 0pt 0pt #eee;
font-size:90%;
color:gray
}
十四、公益404
在source目录下创建404.markdown，添加如下代码，即可实现公益404的功能，当你的网页出错找不到时，可以为公益尽一份力。
---
layout: page
title: "404 Error"
date: 2013-10-10 19:17
comments: false
sharing: false
footer: false
---
<script type="text/javascript" src="http://www.qq.com/404/search_children,js" charset="utf-8></script>
博客原文地址：个性化我们的Octopress博客
