主要記錄使用jekyll搭建博客時(shí)的一些配置和修改。

注意： >使用時(shí)請(qǐng)刪除{和%以及{和{之間的空格。

預(yù)覽文章

source ~/.bash_profile jekyll server

添加about me 邊欄

參考the5fire的技術(shù)博客在index.html頁(yè)面加入如下代碼：

<section> <h4>About me</h4> <div>一個(gè)Java方案架構(gòu)師，主要從事hadoop相關(guān)工作。<a href="/about.html">更多信息</a> <br/> <br/> <strong><font color="red"><a href="/atom.xml" target="_blank">訂閱本站</a></font></strong> <br/><br/> 聯(lián)系博主：javachen.june[a]gmail.com </div> </section>

添加about頁(yè)面

在根目錄創(chuàng)建about.md并修改，注意：文件開(kāi)頭幾行內(nèi)容如下

title: About layout: page group: navigation

設(shè)置固定鏈接

在 _config.yml 里，找到 permalink，設(shè)置如下：

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

修改，markdown實(shí)現(xiàn)為redcarpet

首先通過(guò)gem安裝redcarpet，然后修改_config.yml：

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

首頁(yè)添加最近文章

在index.html頁(yè)面

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

首頁(yè)為每篇文章添加分類、標(biāo)簽、發(fā)表日期以及評(píng)論連接

在index.html頁(yè)面找到<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='分享文章、查看評(píng)論' style="float:right;margin-right:.5em;">Comments</a> </div>

修改h1、h2等標(biāo)題字體

主要是參考圖靈社區(qū)的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;}

添加返回頂部功能

同樣是參考了圖靈社區(qū)的css和網(wǎng)上的一篇js實(shí)現(xiàn)。在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內(nèi)容如下：

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'); });

添加文章版權(quán)說(shuō)明

在_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>原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處：</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導(dǎo)航菜單下面添加：

<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"); });

其他

• 添加404頁(yè)面
• 使用多說(shuō)評(píng)論
• 修改博客主體為寬屏模式

總結(jié)

以上是生活随笔為你收集整理的我的jekyll配置和修改的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。