1.安装好之后可以简单配置一下：
主要是修改文件：_config.yml ，这个配置文件都有相应的注释。主要就是改一些博客头，作者名之类的东西。 注意最好把里面的twitter相关的信息全部删掉，否则由于GFW的原因，将会造成页面load很慢。
1.1添加百度统计，/source/_includes/custom/footer.html
1)把google的自定义字体去掉
2)添加以下文本到footer.html中
```
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?ada97da06266f7901b152f7e9cda2ada";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
```
3)添加CNZZ统计，修改source/_includes/custom/footer.html文件
在copyright后添加统计代码即可
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1255137947'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1255137947%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
1.2 分享和评论配置
主要介绍一下如何配置评论和分享到微博功能。步骤如下：
- 在_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/，获取分享的代码(登录自己的jiathis账号)
- 访问 http://uyan.cc/ ，获得评论的代码(登录自己的jiathis账号)
- 将上面2步的代码都加入到
weibo.html中即可,添加后的内容如下
<!-- JiaThis Button 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=2031184" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2031184" charset="utf-8"></script>
<!-- JiaThis Button END -->
<!-- UJian Button BEGIN -->
<div class="ujian-hook"></div>
<script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js"></script>
<!-- UJian Button END -->
<!-- UY BEGIN 友言插件-->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2031184"></script>
<!-- UY END -->
- 修改
sass/base/_typography.scss，将其中的rticle blockquote的font-style由italic改为normal,因为中文的引用文字用斜体显示其实并不好看。再将其中的ul, ol 的margin-left: 1.3em;修改为margin-bottom: 0em;
1.3 为octopress添加分类(category)列表
1.3.1 增加category_list插件
保存以下代码到plugins/category_list_tag.rb：
module Jekyll
class CategoryListTag < Liquid::Tag
def render(context)
html = ""
categories = context.registers[:site].categories.keys
categories.sort.each do |category|
posts_in_category = context.registers[:site].categories[category].size
category_dir = context.registers[:site].config['category_dir']
category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
end
html
end
end
end
Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)
这个插件会向liquid注册一个名为category_list的tag，该tag就是以li的形式将站点所有的category组织起来。如果要将category加入到侧边导航栏，需要增加一个aside。
1.3.2 增加aside
复制以下代码到source/_includes/asides/category_list.html,（使用时将｛｝分别换为{}）
<section>
<h1>分类目录</h1>
<ul id="categories">
｛% category_list %｝
</ul>
</section>
配置侧边栏需要修改_config.yml文件，修改其default_asides项：
default_asides: [asides/category_list.html, asides/recent_posts.html]
以上asides根据自己的需求调整。
2.Header，Navigation，footer
2.1Navigation（导航栏）
可以自行为导航栏添加项目，链接至不同的页面，在 /source/_includes/custom/navigation.html 中编辑即可。
<ul class="main-navigation">
<li><a href="{{ root_url }}/">博客主页</a></li>
<li><a href="{{ root_url }}/blog/archives">文章列表</a></li>
<li><a href="{{ root_url }}/category-cloud">分类云</a></li>
<li><a href="{{ root_url }}/about">关于</a></li>
</ul>
当想添加一些页面，如“关于”页面，可以试验 rake new_page['name'] 命令来创建，如 rake new_page['about'] 后，会建立 source/about/index.html 文件，在此文件编辑，添加自己想要展示的内容，然后再 navigation.html 里添加正确的路径即可，如 <li><a href="/about">关于</a></li> 。
3.样式修改
添加或修改控制样式，需编辑 sass/custom/_styles.scss ，博客的所有颜色控制在 /sass/base/_theme.scss 中进行设置。定制自己的配色，编辑 sass/custom/_colors.scss 。查看 HSL COLOR PICKER ，帮你挑选喜欢的颜色。
修改布局，需要编辑 sass/base/_layout.scss ，可以修改各部分的宽度等。
3.1 导航栏倒圆角
我设置的header区背景色透明，所以导航栏的直角有些尖锐，在 sass/custom/_styles.scss 中添加如下语句，将其修改为圆角：
//倒圆角
@media only screen and (min-width: 1040px) {
body > nav {
@include border-top-radius(.4em);
}
body > footer {
@include border-bottom-radius(.4em);
}
}
4.滑动返回顶部按钮
当文章较长，通常希望有一个返回顶部的按钮，如下方法实现了在页面右下方添加一个返回顶部的图片按钮，点击后可以滑动的返回顶部。
在source/_include/custom/footer.html中添加如下代码,并将css部分移到header.html中以优化加载速度：
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style type="text/css">
#back-top {
position: fixed;
bottom: 30px;
left: 80%;
margin-bottom: 0px;
}
#back-top a {
width: 80px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 80px;
height: 80px;
display: block;
margin-bottom: 0px;
background: #ddd url(/images/top.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #888;
}
</style>
<p id="back-top">
<a href="javascript:;"><span></span></a>
</p>
最后，还需要将返回顶部的图片放入 source/images ，命名为 top.png （或修改footer.html中图片的路径）。
5.二维码展示
在关于页面或边栏可以展示你的个人博客的二维码，方便移动终端扫描访问你的博客，插件主页 点击这里 。
在侧边栏显示，则将 qrcode.html 放入 source/_includes/custom/asides/ 中，在 _config.yml 中 default_asides 添加 custom/asides/qrcode.html 即可显示。
或者将 qrcode.html整合到about.html 代码添加到你想展示的页面的HTML文件中亦可。
6.让博客中连接在新窗口打开
由于markdown不支持这一语法，如果要自己用html标签实现，又有些违背了markdown以内容为重的立意。
参考博文《在Octopress中为markdown的超链接加上target="_blank"》，可以通过将如下代码添加到 {OCTOPRESS_HOME}/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>
7.列表的排版
默认情况，所有文字的排头会对齐，但如果有列表项的情况下也如此，列表头就会冲出文章的主体区块了。
在octopress/sass/custom/_layout.scss文件中找到#$indented-lists: true行，去掉#注释即可。
$indented-lists: true
8.404ERROR页面
在ocotopress/source目录下，增加404.html，rank new_page[404.html]并做出自定义的编辑。本博客使用了腾讯公益404，推荐大家使用，为社会贡献一分正能量。公益404
---
layout: page
title: "404 Error"
date: 2013-4-21 02:35
comments: false
sharing: false
footer: false
---
<center><h1>blog.sherlocky.com 404!</h1></center>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="http://blog.sherlocky.com/" homePageName="回到博客主页"></script>
9.日期格式修改
修改
_config.yml中的date_format参数为%Y-%m-%d %A，并添加配置time_format: "%H:%M:%S"具体格式说明可以参考http://ruby-doc.org/core-1.9.2/Time.html#method-i-strftime
修改
source/_includes/post/date.html文件,将其中的\{\{ page.date_time_html }}和\{\{ post.date_time_html }}分别替换为（请自觉去掉“\”，因为octopress处理大括号的问题，不加就不能显示，加了又不对，下同）:
\{\{ page.date | date: '%Y-%m-%d %H:%M:%S %A' }}
\{\{ post.date | date: '%Y-%m-%d %H:%M:%S %A' }}
如果要修改文章列表项里的日期格式，可以修改
source/_includes/archive_post.html文件，修改<time>标签中对应的year,month,day即可PS:%A表示英文的星期
10.在Octopress中为markdown的超链接加上target="_blank"
Octopress的Issues Open links in a new window就给出了比较完美的答案，简单hack a 标签。
请在{YOUR_OCTOPRESS}\source\_includes\custom\head.html文件后面添加下面的代码 (YOUR_OCTOPRESS是你Octopress的主目录)
function addBlankTargetForLinks () {
$('a[href^="http"]').each(function(){
$(this).attr('target', '_blank');
});
}
$(document).bind('DOMNodeInserted', function(event) {
addBlankTargetForLinks();
});
PS:代码来源 https://gist.github.com/4523641
11.使文章以摘要形式展示
默认情况下在博客的首页是显示每篇文章的全部内容，更多时候我们只想在首页展示文章的一部分内容，当点击阅读全文时进入到文章的详细页面，在Octopress中可以很轻松实现该功能：
1.在文章对应的markdown文件中，在需要显示在首页的文字后面添加
<!—more—>，执行rake generate后在首页上会看到只显示<!—more—>前面的文字，文字后面会显示Read on链接，点击后进入文章的详细页面;2.如果想将
Read on修改为中文，可以修改_config.yml文件excerpt_link: "阅读全文→" # "Continue reading" link text at the bottom of excerpted articles
参考
- 小熊的博客
- 象写程序一样写博客：搭建基于github的博客
- 将博客从GitHub迁移到GitCafe
- 定制Octopress - CSDN
- 定制Octopress - 推酷
- MarkDown简单示例
- Ruby开源项目介绍(1)：octopress——像黑客一样写博客
- 利用octopress部署博客到github
- git@gitcafe 的一些笔记
- Windows下搭建Octopress博客
- 设置octopress首页的日期格式
- 在Octopress中为markdown的超链接加上target="_blank"
- 用Github和Octopress搭建博客-windows
- GitCafe/Help
- paddingme
- 为octopress添加分类(category)列表
- Octopress博客设置
评论区