我的jekyll配置和修改

主要记录使用jekyll搭建博客时的一些配置和修改。

注意： 使用时请删除{和%以及{和{之间的空格。

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

 a href="" /a 

 /li { % endfor %}

 /ul 

 /section 

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

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

 div 

 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=分享文章、查看评论 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 /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 

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

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

添加搜索栏

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

 form id="search-form" 

 input type="text" id="google-search" 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");

添加404页面 使用多说评论 修改博客主体为宽屏模式
git,程序配置文件管理,忽略本地更改 在不同的开发环境（同事与同事之间 开发与测试与生产环境）大概率是不同的。 如果每个人都按普通的流程，Pull然后修改成自己本地的，没有忽略监听更改。 那么当他提交代码时，经常会把配置文件也上传到git仓库中。 会影响其他人的开发。
Npm配置全局安装插件目录以及命令用法扩展 eslint 是一个代码检查的插件，类似sonarqube里面的打码扫描一样，像这种插件的话只需要本地使用，就可以用开发环境的进行依赖包安装。
雨客 微博@JavaChen，这里的所有博客文章来自http://blog.javachen.com/。