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

GITHUB地址：博客倉庫

覺得好的話，記得給個星呀~

網(wǎng)頁端

移動端1

移動端2

GITHUB賬戶

SASS、JS、CSS

搜索功能

多說評論

百度統(tǒng)計

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

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

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

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

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

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

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

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

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

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

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

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

撰寫方式

試試雙擊Ctrl鍵看看，或者點擊右下角搜索圖標；

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

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

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

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

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

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

瀏覽器獲取文章索引

頁面交互以及按鍵控制

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

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

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

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

頁面交互以及按鍵控制，為了能夠有一個更好的交互，對搜索進行了很多的按鍵的操作:

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

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

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

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

這段代碼有三個地方需要修改

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

先注冊個百度統(tǒng)計的賬號(站長賬號，適合個人博客)，注冊成功后；

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