预览文章

source ~/.bash_profile
jekyll server

添加about me 边栏

参考the5fire的技术博客在index.html页面加入如下代码：

<section>
<h4>About me</h4>
<div>一个Java方案架构师，主要从事hadoop相关工作。<a href="/about.html">更多信息</a> 
<br/>
<br/>
<strong><font color="red"><a href="/atom.xml" target="_blank">订阅本站</a></font></strong>
<br/><br/>
联系博主：javachen.june[a]gmail.com
</div>
</section>

添加about页面

在根目录创建about.md并修改，注意：文件开头几行内容如下

title: About
layout: page
group: navigation

设置固定链接

在 _config.yml 里，找到 permalink，设置如下：

permalink: /:categories/:year/:month/:day/:title

修改，markdown实现为redcarpet

首先通过gem安装redcarpet，然后修改_config.yml：

redcarpet:extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "strikethrough", "superscript", "with_toc_data", "highlight", "prettify"]

首页添加最近文章

在index.html页面

<section>
<h4>Recent Posts</h4>
<ul id="recent_posts">{ % for rpost in site.posts limit: 15 %}
<li class="post">
<a href=""></a>
</li>{ % endfor %}
</ul>
</section>

首页为每篇文章添加分类、标签、发表日期以及评论连接

在index.html页面找到<h3><a href="{ { BASE_PATH }}{ { post.url }}">{ { post.title }}</a></h3>，在下面添加：

 <div class="c9">Categories：{ %for cg in post.categories % }<a href="/categories.html#-ref"></a>{ %if forloop.index < forloop.length % },{ %endif%}{ %endfor%}|Tags：{ %for cg in post.tags %}<a href="/tags.html#-ref"></a>{ %if forloop.index < forloop.length %},{ %endif%}{ %endfor%}|Time：<time date="{ { post.date|date: '%Y-%m-%d' }}"></time><a href='#comments' title='分享文章、查看评论' style="float:right;margin-right:.5em;">Comments</a>
</div>

修改h1、h2等标题字体

主要是参考图灵社区的css，在assets/themes/twitter/css/style.css中添加如下css代码：

h1,h2,h3,h4,h5,h6{margin:18px 0 9px;font-family:inherit;font-weight:normal;color:inherit;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999999;}
h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
h3{font-size:18px;line-height:27px;}h3 small{font-size:14px;}
h4,h5,h6{line-height:18px;}
h4{font-size:14px;}h4 small{font-size:12px;}
h5{font-size:12px;}
h6{font-size:11px;color:#999999;text-transform:uppercase;}

添加返回顶部功能

同样是参考了图灵社区的css和网上的一篇js实现。在assets/themes/twitter/css/style.css：

.backToTop {display: block;width: 40px;height: 32px;font-size: 26px;line-height: 32px;font-family: verdana, arial;padding: 5px 0;background-color: #000;color: #fff;text-align: center;position: fixed;_position: absolute;right: 10px;bottom: 100px;_bottom: "auto";cursor: pointer;opacity: .6;filter: Alpha(opacity=60);
}

在assets/themes/twitter/js添加jquery和main.js，main.js内容如下：

jQuery.noConflict();
jQuery(document).ready(function(){var backToTopTxt = "▲", backToTopEle = jQuery('<div class="backToTop"></div>').appendTo(jQuery("body")).text(backToTopTxt).attr("title","Back top top").click(function() {jQuery("html, body").animate({ scrollTop: 0 }, 120);}), backToTopFun = function() {var st = jQuery(document).scrollTop(), winh = jQuery(window).height();(st > 200)? backToTopEle.show(): backToTopEle.hide();    //IE6下的定位if (!window.XMLHttpRequest) {backToTopEle.css("top", st + winh - 166); }};backToTopEle.hide(); jQuery(window).bind("scroll", backToTopFun);jQuery('div.main a,div.pic a').attr('target', '_blank');
});

添加文章版权说明

在_includes/themes/twitter/post.html中文章主体下面添加如下代码：

<hr>
<div class="copyright">
<p><strong>本文固定链接：</strong><a href='{ {page.url}}'>http://blog.javachen.com/2013/08/31/my-jekyll-config.html</a></p>
<p><strong>原创文章,转载请注明出处：</strong><a href='{ {page.url}}'>JavaChen Blog</a></p>
</div>

并在assets/themes/twitter/css/style.css中添加如下css代码：

.copyright {
margin: 10px 0;
padding: 10px 20px;
line-height: 1;
border-radius: 5px;
background: #f5f5f5;
}

添加read more功能

参考Jekyll - Read More without plugin，在index.html找到，然后修改为：

{ % if post.content contains "<!-- more -->" %}
{ { post.content | split:"<!-- more -->" | first % }}
<h4><a href='{ {post.url}}' title='Read more...'>Read more...</a></h4>
{ % else %}
{ { post.content}}
{ % endif %}

然后，在文章中添加即可。

添加搜索栏

参考Jekyll Bootstrap - Create Simple Search box，在_includes/themes/twitter/default.html导航菜单下面添加：

<form class="navbar-search pull-left" id="search-form"><input type="text" id="google-search" class="search-query" placeholder="Search">
</form

添加js：

jQuery("#search-form").submit(function(){var query = document.getElementById("google-search").value;window.open("http://google.com/search?q=" + query+ "%20site:" + "http://blog.javachen.com");
});