简介

Octopress是利用Jekyll博客引擎开发的一个博客系统，生成的静态页面能够很好的在github page上展现。号称是hacker专属的一个博客系统(A blogging framework for hackers.)

根据大家的反应，本文我就来介绍一下如何在苹果电脑(OS X 10.8.3)利用Octopress搭建一个Github博客。本文需要读者熟悉一些shell命令，并掌握基本的git操作。

目录

一： 快速搭建

1. 安装Ruby
2. 安装Octopress
3. 配置Octopress
4. 将博客部署到GitHub上
5. 开始写博客

二： 个性化配置（个性化初级篇）

1. Header（标题栏）
2. Navigation（导航栏）
3. footer（尾栏）
4. 添加背景图片
5. LOGO图片
6. 导航栏倒圆角
7. 滑动返回顶部按钮
8. 二维码展示

三： 个性化配置（个性化中级篇）

1. 提高博客访问速度
2. 设置链接在新窗口打开
3. 首页文章以摘要形式展示
4. 代码着色
5. 修改代码生成css
6. 添加侧边栏文章分类（category）
7. 添加多说评论
8. 自动为图片添加url前缀
9. 添加访客统计

四： 个性化配置（个性化高级篇）

1. 侧边栏
2. 最新文章
3. GitHub Repos
4. 微博秀
5. 豆瓣展示
6. 访客地图
7. 酷站博客
8. 最热文章
9. 3D标签云与标签列表
10. 相关文章功能
11. 社会化评论与分享
12. 为博文添加原文链接及声明
13. 添加版权声明
14. 公益404

五： 其他

1. mackdown语法
   

一： 快速搭建

安装Ruby

Octopress需要Ruby环境，RVM(Ruby Version Manager)负责安装和管理Ruby的环境。所以我们先在终端输入如下命令，来安装RVM：

curl -L https://get.rvm.io | bash -s stable --ruby  

接着是安装Ruby 1.9.3，在终端依次运行如下命令：

rvm install 1.9.3  
rvm use 1.9.3  
rvm rubygems latest  

完成上面的操作之后，运行ruby –version应该可以看到ruby 1.9.3环境已经安装好了。 参考：Installing Ruby With RVM

安装Octopress

在安装Octopress之前，请确保你的电脑上已经安装有git了，在终端输入git –version，应该可以看到电脑中的git版本(我电脑上输出:git version 1.7.12.4 (Apple Git-37))，如果没有显示相关内容，请先安装git。 git安装之后，利用git命令将octopress从github上clone到本机，如下命令：

git clone git://github.com/imathis/octopress.git octopress  
cd octopress    # If you use RVM, You'll be asked if you trust  the .rvmrc file (say yes).  
ruby --version  # Should report Ruby 1.9.3  

接着安装相关依赖项：

gem install bundler  
rbenv rehash    # If you use rbenv, rehash to be able to run the    bundle command  
bundle install  

最后安装默认的Octopress 主题。

rake install  

配置Octopress

Octopress的作者已经尽量让配置简化了。大多数情况下只需要配置_config.yml和Rakefile文件即可。其中Rakefile是跟博客部署相关，一般情况下并不需要修改这个文件，除非使用了rsync。

config.yml是博客重要的一个配置文件，在config.yml文件中有三大配置项：Main Configs、Jekyll & Plugins和3rd Party Settings。

一般，该文件中其中url是必须要填写的，这里的url是在github上创建的一个仓库地址，具体请看第四步中创建的地址。另外再修改一下title、subtitle和author，根据需求，在开启一些第三方组件服务。

关于_config.yml文件中的更多内容，请看这里的内容：Configuring Octopress

建议：最好把里面的twitter相关的信息全部删掉，否则由于GFW的原因，将会造成页面load很慢。同理，修改定制文件/source/_includes/custom/head.html 把google的自定义字体去掉。from唐巧的博文中—配置。

将博客部署到GitHub上

Github的Page service可以免费托管博客，并且还可以自定义域名。 首先需要在GitHub上创建一个仓库，并将仓库名称按照这样的方式进行命名：username.github.com或organization.github.com。等后面配置完毕之后，我们就可以在浏览器中使用页面地址

http://username.github.com

来访问我们的博客。一般来说，我们希望在将博客的源码放到source分支下，并把生成的内容提交到master分支。

创建好仓库之后，我们需要利用octopress的一个配置rake任务来自动配置上面创建的仓库：可以让我们方便的部署GitHub page。在终端输入如下命令： C代码 收藏代码

$ rake setup_github_pages  

上面的命令会做一些事情(详细介绍看下面给出的参考链接)。其中最主要的就是创建一个_deploy目录，目录用来存放部署到master分支的内容。期间会要求你输入仓库的url，根据提示，进行输入即可。

完成上面的命令之后，我们就可以生成博客并真正的部署到仓库中了。执行如下命令：

rake generate  
rake deploy  

上面的命令首先生成博客文件，并将生成的博客文件拷贝到_deploy/目录下，然后将这些内容添加到git中，并commit和push到仓库的master分支。

现在可以访问

http://username.github.com

注意：有时候可能会有延时，要等几分钟才能打开。 至此，我们的博客已经完成基本的部署，不过博客的source需要单独提交，执行如下命令就可以将source提交到仓库的source分支下。

$ git add .  
$ git commit -m 'Initial source commit'  
$ git push origin source  

如果在部署到仓库之前，需要先预览一下博客，可以在终端输入rake preview命令，然后就能在浏览器中进行本地预览访问了：

http://127.0.0.1:4000/

或

http://localhost:4000/

效果跟仓库中的一样。

开始写博客

Octopress为我们提供了一些task来创建博文和页面。博文必须存储在source/_posts目录下，并且需要按照Jekyll的命名规范对文章进行命名：YYYY-MM-DD-post-title.markdown。文章的名字会被当做url的一部分，而其中的日期用于对博文的区分和排序。

通过Octopress提供的task可以正确的按照命名规范创建一个博文，并且在博文中会附带常用的一些yaml元数据。只需要在终端输入如下命令：

rake new_post["title"]  

其中title为博文的文件名，创建出来的文件默认是markdown格式。上面的命令会创建出这样一个文件：source/_posts/2013-08-03-title.markdown。打开这个文件，可以看到里面有如下一些内容了(告诉Jekyll博客引擎如何处理博文和页面)：

layout: post  
title: "title"  
date: 2013-08-03 16:36  
comments: true  
categories:   

接着我们就可以在这个文件中写我们的博文啦。完成之后，我们可以预览和部署博文。下面是创建并部署博文的一个完整过程：

$ rake new_post["New Post"]  
$ rake generate  
$ git add .  
$ git commit -am "Some comment here."   
$ git push origin source  
$ rake deploy  

本节介绍了如何利用Octopress搭建一个Github博客，下面讲介绍桌面去个性化你的博客。

个性化配置（初级篇）

这几个部分是经常需要个性化定制的，在 source/includes 中存在其对应的HTML文件，这是主题默认的文件，更换主题，更新octopress会被覆盖，所以应该编辑 source/includes/custom 下的文件来实现修改。

Header，Navigation，footer

Header（标题栏）

标题栏显示的内容为 /source/includes/custom/header.html 所实现的，其中title和subtitle在 config.yml 中定义，你可以进行适量的修改：

    <hgroup>
 <h1><a href="/">iOS梦工厂</a></h1>

<h2>iCocos——不战胜自己，何以改变未来！</h2>

</hgroup>

Navigation（导航栏）

可以自行为导航栏添加项目，链接至不同的页面，在 /source/_includes/custom/navigation.html 中编辑即可。

<ul class="main-navigation">
<li><a href="/">博客主页</a></li>
 <li><a href="/blog/archives">文章列表</a></li>
<li><a href="/category-cloud">分类云</a></li>
<li><a href="/about">关于</a></li>
</ul>

当想添加一些页面，如“关于”页面，可以试验 rake new_page[‘name’] 命令来创建，如 rake new_page[‘about’] 后，会建立 source/about/index.html 文件，在此文件编辑，添加自己想要展示的内容，然后再 navigation.html 里添加正确的路径即可，如

<li><a href="/about">关于</a></li> 

footer（尾栏）

在 source/_includes/custom/footer.html 中编辑尾栏：

<p>
    Copyright © 2017 - iCocos -
<span class="credit">
      Powered by
      <a href="http://octopress.org">Octopress</a>
</span>
</p>

默认显示 Copyright@2013 - author - Powered by Octopress ，你可以添加自己想显示在尾栏的东西，第三方统计流量统计工具也可以添加到这，如CNZZ、Google analytics和百度统计等，使用这些工具可以更详细的分析网站流量，改善引流措施，完善网站，具体添加方法见统计工具与SEO。

添加背景图片

在 sass/custom/_styles.scss 中添加：

html {
    background: #555555 url("/images/bg3.jpg");
    //background: #555555;
}

body > div {
    background-image: none;
    //background: #F5F5D5
} //侧边栏

body > div > div { //文章内容
    background-image: none;
    //background: #F5F5D5; 
    //background: url("/images/bg.jpg");
}

将背景图片放入 source/images/ 中，修改上述代码中的路径指向想要的图片，即可 更改博客、侧边栏或文章的背景图片。博客使用背景图片后，与Header区不太和谐， 所以我在 /sass/base/_theme.scss 中将 header-bg 设置成透明色了。

LOGO图片

我所说的logo图片有两种，一个是打开一个网页时，标签栏上显示的小图片。还有一个是标题栏主标题旁的图片。

首先针对于第一种可以选择你喜欢的图片（大小适中），替换 source 目录下的 favicon.png 即可。

或者将logo图片放入 source/images 中，然后修改 source/_includes/head.html ，找到 favicon.png ，修改其路径指向你的图片即可。

对于主标题旁的图片需要在 sass/custom/_styles.scss 中填入如下语句：

//Blog logo pic
@media only screen and (min-width: 550px) {

    body > header h1{
            background: url("/images/logo1.png") no-repeat 0 1px;
            padding-left: 65px;
    }

    body > header h2 { padding-left: 65px; }
}

根据自己情况进行修改即可。

导航栏倒圆角

我设置的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);
    }
}

滑动返回顶部按钮

当文章较长，通常希望有一个返回顶部的按钮，如下方法实现了在页面右下方添加一个返回顶部的图片按钮，点击后可以滑动的返回顶部。

首先创建 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 ，设置返回顶部按钮样式和位置，代码如下：

<!--返回顶部开始-->
<div id="full" style="width:0px; height:0px; position:fixed; right:180px; bottom:150px; 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>
<!--返回顶部结束-->

最后，还需要将返回顶部的图片放入 source/images ，命名为 top.png （或修改totop.html中图片的路径）。

二维码展示

在关于页面或边栏可以展示你的个人博客的二维码，方便移动终端扫描访问你的博客，插件主页 点击这里 。

在侧边栏显示，则将 qrcode.html 放入 source/includes/custom/asides/ 中，在 config.yml 中 default_asides 添加 custom/asides/qrcode.html 即可显示。

或者将 qrcode.html 代码添加到你想展示的页面的HTML文件中亦可。

个性化配置（中级篇）

提高博客访问速度

因为“墙”的关系，所以Octopress建立以后会发现访问速度奇慢无比，竟然超过了40s。

仔细分析后我们发现其中都是一些被墙的请求报了404Error，所以导致访问博客巨慢无比，下面我们就一次阉割掉这些被墙的请求。T_T

替换Google JS公共库

Octopress默认使用的是Google的JS公共库地址，加载的过程无比的缓慢。因此我们要把它改为 百度的JS公共库 ，需要把 /source/_includes/head.html 文件中的Google公共库地址改为：

去掉Twitter

从上图可以看出加载失败的还有twitter，这个也得给去掉。

把在根目录下的 _config.yml 文件中Twitter内容给注释掉。

# Twitter
#twitter_user:
#twitter_tweet_button: true

把 \source_includes\after_footer.html 文件中的twitter内容给注释掉：

include twitter_sharing.html

删除Google font

把在 \source_includes\custom\head.html 中的Google font样式给删除：

<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

设置链接在新窗口打开

在博文中，如果点击链接直接在本窗口打开了，那么用户体验就不是很好。而markdown的标准语法是不支持链接在新窗口打开的，虽然可以通过在markdown中直接写html标签来解决这个问题，但是这与markdown的简洁书写特性不符。但是我们可以通过设置Octopress来达到这种效果，即在 \source_includes\custom\head.html 文件中添加如下一段代码：

<script>
function addBlankTargetForLinks () {
$('a[href^="http"]').each(function(){
  $(this).attr('target', '_blank');
});
}
$(document).bind('DOMNodeInserted', function(event) {
addBlankTargetForLinks();
});
</script>

首页文章以摘要形式展示

2.在文章对应的markdown文件中，在需要显示在首页的文字后面添加 ，执行rake generate后在首页上会看到只显示<!—more—>前面的文字，文字后面会显示 Read on 链接，点击后进入文字的详细页面;

1.如果想将Read on修改为中文，可以修改_config.yml文件

excerpt_link: "Read on →"  #  "Continue reading" link text at the     bottom of excerpted articles
excerpt_link: "阅读全文→"  # "Continue reading" link text at the  bottom of excerpted articles

代码着色

Octopress使用的是Pygments来进行代码着色的，使用方式也比较简单如下所示：

1

//java code

Pygments支持的语言列表

修改代码生成css

当然你也可以修改Pygments生成的代码css样式。

Pygments默认提供了很多css样式，你可以在python shell中用下面命令列出当前pygments所支持的样式：

>>> from pygments.styles import STYLE_MAP
>>> STYLE_MAP.keys()
['manni', 'igor', 'xcode', 'vim', 'autumn', 'vs', 'rrt', 'native', 'perldoc', 'borland', 'tango', 'emacs', 'friendly', 'monokai', 'paraiso-dark', 'colorful', 'murphy', 'bw', 'pastie', 'paraiso-light', 'trac', 'default', 'fruity']
>>>

通过-S来选择，需要生成default的样式：

pygmentize -S default -f html > your/path/pygments.css

有时候Octopress会把我们想要展示的Ruby代码解析成HTML，如果只是想展示代码，而不让Octopress来解析，那么可以在代码前后加入和代码。

添加侧边栏文章分类（category）

1.在 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)

2.添加 source/_includes/asides/category_list.html 文件，内容如下：

<section>
  <h1>Categories</h1>
  <ul id="categories">
  ***
    {百分号raw百分号}{百分号 category_list 百分号}{百分号endraw百分号} 
  ***
  </ul>
</section>

3.修改 _config.yml 文件，在 default_asides 项中添加 asides/category_list.html ，值之间以逗号隔开，值的先后顺序代表了侧边栏展现的先后顺序。

default_asides: [asides/category_list.html, asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

在侧边栏还可以添加其他组件，如微博、标签云等，添加方式和上面类似。

添加多说评论

Octopress默认自带了DISQUS，但是对于国内不是很好用。所以在经过考虑之后选择了国内比较流行的多说评论系统。 首先要去 多说网站注册 ，获取站点的 short_name 。

在 _config.yml 中添加

# duoshuo comments
duoshuo_comments: true
duoshuo_short_name: yourname 

在 ./source/_layouts/post.html 中的 disqus 代码

下方添加多说评论模块：

如果你希望一些单独的页面下方也放置评论功能，那么在 ./source/layouts/page.html 中也做如上修改。 然后创建一个 ./source/includes/post/duoshuo.html 文件，内容如下：

<div class="ds-thread" data-title="Octopress博客的个性化配置"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"tianweili"};
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = 'http://static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
    || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>

最后再修改 _includes/article.html 文件，在

下方添加下面代码：

注意： 以上所有F代表false，T代表true，更改对应的就可以 （不要问为撒）

自动为图片添加url前缀

我把图片资源都 放在了七牛云存储 上，写博客时候就是用七牛的外链。但是这样有几个问题：

每次写博客插入图片外链地址时候都很麻烦，需要给每张图片都添加七牛外链地址url前缀； 如果以后更换了存储，那就麻烦了，需要依次编辑替换每个图片的url前缀 现在我们就使用一种灵活的方式来配置并自动生成图片的URL前缀：

首先修改 /plugins/image_tag.rb 文件，在 @img[‘class’].gsub!(/“/, ‘’) if @img[‘class’] 后添加下面一行代码：

./plugins/image_tag.rb
@img['src'] = Jekyll.configuration({})['static_file_prefix'] + @img['src'] if @img['src'][0] == '/'

然后再修改根目录下的 _config.yml 文件，添加如下配置：

# Add url prefix for image automatically
static_file_prefix: http://7u2i08.com1.z0.glb.clouddn.com

最后我们在插入图片的时候要记住不能再使用Markdown语法来写了，要 使用Ocotpress自定义的IMG标签来插入图片 。

本地预览先generate后preview，这样一来插入图片就灵活方便多了。

添加访客统计

本博客的访客统计系统使用的是Flag Counter，所以要 先去Flag Counter获取代码 。

拿到代码后添加 .\source_includes\custom\asides\flag_counter.html 文件：

flag_counter.html
<section>
<h1>访客统计</h1>
<br/>
<a href="http://s07.flagcounter.com/more/2SH"><img src="http://s07.flagcounter.com/count/2SH/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_12/viewers_0/labels_0/pageviews_1/flags_0/" alt="Flag Counter" border="0"></a>
</section>

将页面添加到侧边栏，在 ./_config.yml 配置文件中添加下面一行配置：

default_asides: [……, custom/asides/flag_counter.html]

最后添加控制开关，在 ./_config.yml 配置文件中添加下面一行配置：

# Flag Counter
flag_counter: true

个性化配置（高级篇）

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

第三方主题

首先，你先要选定的是博客使用的第三方主题，因为如果你已经进行了很多的网页设置，添加了很多的插件，再来改主题，你就要面临悲剧了，你会发现你已经配置好的东西被替换掉了，这无疑会对你的热情带来打击。所以我们先来看看第三方主题。

你需要先找到自己喜欢的主题，之后可以在此主题上进行修改。 点击这里 是一个主题网站，给出了不同主题的预览图，使用该主题的博客和该主题的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 预览新的主题样式，不满意可以更换其他主题。

侧边栏

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

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

最新文章

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

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

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

微博秀

新浪微博是一个信息传播非常迅速的媒介，如果你热衷于微博，可以在侧边栏添加自己的微博秀。首先需要获得自己的微博秀代码，链接为 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 即可显示你的微博秀了。

豆瓣展示

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

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

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

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

<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>

gem 'octopress-popular-posts'

bundle install

bundle exec octopress-popular-posts install

popular_posts_count: 5      # Posts in the sidebar Popular Posts section

.page_rank

 ├─ 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_dir: blog/categories
tag_dir: blog/tags

<section>
<h2>相关文章：</h2>
  <ul class="posts">

      <li class="related">
      <a href="/blog/2017/01/20/chu-ci-jian-mian-llvm-slash-clang/">初次见面-LLVM/Clang</a>
      </li>

      <li class="related">
      <a href="/blog/2017/01/12/node-dot-jsshi-shi-yao-gui-%3F/">Node.js是什么鬼？</a>
      </li>

      <li class="related">
      <a href="/blog/2017/01/10/appda-bao-fa-bu-keng-zhong-zhi-keng/">App打包发布———坑中之坑</a>
      </li>

      <li class="related">
      <a href="/blog/2016/12/30/bao-chi-chu-cin-ji-xu-qian-jin/">保持初心继续前进-年终篇</a>
      </li>

      <li class="related">
      <a href="/blog/2016/12/26/ios-daobao/">自动打包上传代码</a>
      </li>

</ul>
</section>

<!-- 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&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 -->

# comment and share
comment_share: true

<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>

| <a href="#comments" id="uyan_count_unit" du="" su="">0条评论</a>
 <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=*******"></script>

# 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/> written by <a     href='#{url}'>#{author}</a> 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

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

<DIV style="font-size:12px;BORDER-BOTTOM: #bbbbbb 1px solid; BORDER-LEFT: #bbbbbb 1px solid; BACKGROUND: #f6f6f6; HEIGHT: 120px; BORDER-TOP: #bbbbbb 1px solid; BORDER-RIGHT: #bbbbbb 1px solid" class=oec2003right> 
<DIV style="MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 5px; MARGIN-RIGHT: 10px"> 
<IMG alt="" src="http://images.cnblogs.com/cnblogs_com/oec2003/219566/r_fw90100.jpg" width=90 height=100></DIV> 
<DIV style="LINE-HEIGHT: 200%; MARGIN-TOP: 10px; COLOR: #000000"> 
作者： <A href="http://oec2003.github.io/">冯威</A> <BR> 
出处： <A href="http://oec2003.github.io/">http://oec2003.github.io/</A> 
<BR>本文基于<a target="_blank" title="Creative Commons Attribution 2.5 China Mainland License" href="http://creativecommons.org/licenses/by/2.5/cn/"> 
署名 2.5 中国大陆</a>许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名 
<a href="http://oec2003.github.io/">冯威</a>（包含链接）。 </DIV></DIV> 

.oec2003right 
{ 
    background: #C3D9FF; 
    height:120px; 
    border:1px solid #BBBBBB; 
}

.oec2003right a:link 
{ 
    color: #0057b6; 
    text-decoration: none; 
} 
.oec2003right a:visited 
{ 
    color: #0057b6; 
    text-decoration: none; 
} 
.oec2003right a:active,a:hover 
{ 
    color: #0057b6; 
    text-decoration: underline; 
}

在class中增加类类似的一行，修改为对应的html就可以

# Post License 
post_license: true

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>