摘要：百度統(tǒng)計(jì)先注冊(cè)個(gè)百度統(tǒng)計(jì)的賬號(hào)站長(zhǎng)賬號(hào)，適合個(gè)人博客，注冊(cè)成功后按照提示，把代碼復(fù)制到中的的標(biāo)簽里這里特指我的博客文件好了，這樣你的博客就差不多了，是不是感覺很酷今天就到這兒，下篇文章見。

GITHUB地址：博客倉(cāng)庫(kù)

覺得好的話，記得給個(gè)星呀~

網(wǎng)頁(yè)端

移動(dòng)端1

移動(dòng)端2

GITHUB賬戶

SASS、JS、CSS

搜索功能

多說評(píng)論

百度統(tǒng)計(jì)

首先，你得有一個(gè)GITHUB賬戶，還沒有的趕緊去注冊(cè)一個(gè)吧。

登陸 GitHub，新建一個(gè) repository, 命名為 你的用戶名 + github.io。如我的用戶名為 haonancx，所以 repository 命名為 haonancx.github.io（可以購(gòu)買私人域名），如下圖。

注意圖片中紅色箭頭標(biāo)注的地方，命名和你掛載在 GITHUB 的域名是一致的，就是你命名為 "haonancx",那么你的個(gè)人博客地址就是 "haonancx.github.io";其次要勾選上 "Public",別人才能訪問你的博客。

如果你覺得我博客風(fēng)格還不錯(cuò)的話，可以去把他 GIT 下來；或者你可以從這里選中你喜歡的博客；地址：jekyllthemes

下載好你喜歡的博客，然后，把它上傳到你剛建好的 repository 上；
然后 輸入你的博客地址就訪問成功了。

如果你需要修改博客內(nèi)容，這里給你介紹一下；文件夾中的內(nèi)容（以我的博客為例）。

_include 文件夾中是網(wǎng)頁(yè)的公共部分，head.html是文件head標(biāo)簽里的引入的文件，圖片等，header.html、footer.html 是網(wǎng)頁(yè)的公共頭部（導(dǎo)航）和底部（版權(quán)）；

_layouts 中 default.html、post.html 是引入網(wǎng)頁(yè)的公共頭部（導(dǎo)航）和底部（版權(quán)）以及編譯發(fā)表文章的內(nèi)容，

_sass 、css文件夾中有整個(gè)博客的公共樣式文件。(在這里你可以對(duì)你的博客按照你喜歡的 UI 界面進(jìn)行調(diào)整)

images 文件夾中包含引用的圖片(傻子都知道~)。

scripts 文件夾中有引用的 JS 文件。

_config.yml 為博客的配置文件，如果你要使用一些插件，大部分都得在這里配置（很重要~）。

撰寫方式

試試雙擊Ctrl鍵看看，或者點(diǎn)擊右下角搜索圖標(biāo)；

博客從wordpress的jekyll，jekyll的核心思想:

將純文本轉(zhuǎn)化為靜態(tài)網(wǎng)站和博客

jekyll只是一個(gè)生成靜態(tài)網(wǎng)頁(yè)的工具，不需要數(shù)據(jù)庫(kù)支持。但是可以配合第三方服務(wù),例如Disqus。最關(guān)鍵的是jekyll可以免費(fèi)部署在Github上，而且可以綁定自己的域名。

jekyll沒有數(shù)據(jù)庫(kù)支持，默認(rèn)沒有搜索功能，那么怎么添加炫酷簡(jiǎn)潔的搜索的功能呢？google一下，大部分都是使用插件之類的，起始我們可以直接在服務(wù)端產(chǎn)生索引，之后利用索引進(jìn)行搜索。

受到spotlight的簡(jiǎn)潔啟發(fā)，于是打算做出一個(gè)類似于spotlight的搜索。下面先看一下操作步驟：

服務(wù)端生成文章索引

瀏覽器獲取文章索引

頁(yè)面交互以及按鍵控制

JSON代碼

{

"code" : 0 ,
"data" : [
 {\% for post in site.posts \%}
{
    "title" : " - {\% for tag in post.tags \%}{\% if forloop.rindex != 1 \%}_{\% else \%}{\% endif \%}{\% endfor \%}",
    "url" : ""
}
{\% if forloop.rindex != 1  \%}
,
{\% endif %}

{% endfor %}

]

}
{% endhighlight %}

由于文章中的動(dòng)態(tài)代碼會(huì)被解析，所以做了替換，代碼中%被替換成%,使用中請(qǐng)去除%前面的轉(zhuǎn)義符

這段代碼是一個(gè)雙層循環(huán)，將文章的標(biāo)題與標(biāo)簽組合，同時(shí)和url一起組合為json字符串，方便后續(xù)ajax調(diào)用。

瀏覽器獲取文章索引，此處也即一個(gè)ajax調(diào)用，使用$.ajax或者$.getJson都可以，此處可以參考一下ajax的異步請(qǐng)求。

頁(yè)面交互以及按鍵控制，為了能夠有一個(gè)更好的交互，對(duì)搜索進(jìn)行了很多的按鍵的操作:

PC下雙擊Ctrl鍵打開或者關(guān)閉搜索框，搜索框展示時(shí)按下Esc鍵關(guān)閉搜索框，按鍵的檢測(cè)在js中也是很容易進(jìn)行，此處也不在列代碼了。

為了移動(dòng)端也可以很好的搜索，在頁(yè)面的右下角加入搜索懸浮按鈕，點(diǎn)擊后打開搜索頁(yè)面，而在搜索頁(yè)面，右上角提供關(guān)閉按鈕，這樣整體下來就完美的實(shí)現(xiàn)了搜索。

jekyll bootstrap搭建的博客默認(rèn)使用的是Disqus評(píng)論插件,當(dāng)然不是說Disqus不好，只是針對(duì)我們國(guó)內(nèi)的用戶來說,似乎并不是最好的選擇。所以我們改為多說（容易上手）。

創(chuàng)建成功之后 我們會(huì)得到如下代碼

這段代碼有三個(gè)地方需要修改

最后我們就可以在頁(yè)面中看到多說了。

先注冊(cè)個(gè)百度統(tǒng)計(jì)的賬號(hào)(站長(zhǎng)賬號(hào)，適合個(gè)人博客)，注冊(cè)成功后；

按照提示，把代碼復(fù)制到 head.html 中的head的標(biāo)簽里；（這里特指我的博客文件）