打造一個「精緻的」我的博客

我爲何要寫博客？其實我最初打算寫博客，緣由很簡單，我就是想把工做中、學習中遇到 的問題及解決方案記錄下來，它能幫你梳理下整個過程的要注意的地方，寫寫你在工做中遇到的問題，用來記錄和回顧。Tips:我的博客排版、UI更佳；地址：https://haonancx.github.io/

GITHUB地址：博客倉庫

以爲好的話，記得給個星呀~

廢話少說，先上效果圖

網頁端

移動端1

移動端2

主要技術棧

• GITHUB帳戶

• SASS、JS、CSS

• 搜索功能

• 多說評論

• 百度統計

GITHUB帳戶

首先，你得有一個GITHUB帳戶，尚未的趕忙去註冊一個吧。

• 登錄 GitHub，新建一個 repository, 命名爲 你的用戶名 + github.io。如個人用戶名爲 haonancx，因此 repository 命名爲 haonancx.github.io（能夠購買私人域名），以下圖。

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

• 若是你以爲我博客風格還不錯的話，能夠去把他 GIT 下來；或者你能夠從這裏選中你喜歡的博客；地址：jekyllthemes

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

SASS、JS、CSS

若是你須要修改博客內容，這裏給你介紹一下；文件夾中的內容（以個人博客爲例）。

1. _include 文件夾中是網頁的公共部分，head.html是文件head標籤裏的引入的文件，圖片等，header.html、footer.html 是網頁的公共頭部（導航）和底部（版權）；

2. _layouts 中 default.html、post.html 是引入網頁的公共頭部（導航）和底部（版權）以及編譯發表文章的內容，

3. _sass 、css文件夾中有整個博客的公共樣式文件。(在這裏你能夠對你的博客按照你喜歡的 UI 界面進行調整)

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

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

6. _config.yml 爲博客的配置文件，若是你要使用一些插件，大部分都得在這裏配置（很重要~）。

代碼高亮模塊（jekyll 支持代碼高亮），只需在你寫的文章的先後加上約定的代碼便可。

撰寫方式

搜索功能

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

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

將純文本轉化爲靜態網站和博客

jekyll只是一個生成靜態網頁的工具，不須要數據庫支持。可是能夠配合第三方服務,例如Disqus。最關鍵的是jekyll能夠免費部署在Github上，並且能夠綁定本身的域名。

jekyll沒有數據庫支持，默認沒有搜索功能，那麼怎麼添加炫酷簡潔的搜索的功能呢？google一下，大部分都是使用插件之類的，起始咱們能夠直接在服務端產生索引，以後利用索引進行搜索。

受到spotlight的簡潔啓發，因而打算作出一個相似於spotlight的搜索。下面先看一下操做步驟：

1. 服務端生成文章索引

2. 瀏覽器獲取文章索引

3. 頁面交互以及按鍵控制

JSON代碼

{% highlight ruby %}

layout: null

{

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

• 因爲文章中的動態代碼會被解析，因此作了替換，代碼中%被替換成%,使用中請去除%前面的轉義符

• 這段代碼是一個雙層循環，將文章的標題與標籤組合，同時和url一塊兒組合爲json字符串，方便後續ajax調用。

• 瀏覽器獲取文章索引，此處也即一個ajax調用，使用$.ajax或者$.getJson均可以，此處能夠參考一下ajax的異步請求。

• 頁面交互以及按鍵控制，爲了可以有一個更好的交互，對搜索進行了不少的按鍵的操做:

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

• 爲了移動端也能夠很好的搜索，在頁面的右下角加入搜索懸浮按鈕，點擊後打開搜索頁面，而在搜索頁面，右上角提供關閉按鈕，這樣總體下來就完美的實現了搜索。

多說評論

jekyll bootstrap搭建的博客默認使用的是Disqus評論插件,固然不是說Disqus很差，只是針對咱們國內的用戶來講,彷佛並非最好的選擇。因此咱們改成多說（容易上手）。

建立成功以後 咱們會獲得以下代碼

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

最後咱們就能夠在頁面中看到多說了。

百度統計

先註冊個百度統計的帳號(站長帳號，適合我的博客)，註冊成功後；

按照提示，把代碼複製到 head.html 中的head的標籤裏；（這裏特指個人博客文件）

好了，這樣你的博客就差很少了，是否是感受很酷？？？ 今天就到這兒，下篇文章見。

部分技術實踐整理於網絡