使用Jekyll在Github上搭建我的博客（文章分類索引）

系列文章傳送門：

使用Jekyll在Github上搭建我的博客（環境搭建）

使用Jekyll在Github上搭建我的博客（博客編寫）

使用Jekyll在Github上搭建我的博客（分頁實現）

今天又滾出去野了一天，打牌輸了，好在輸的很少，聊天聊到了之後的路子，不太好走啊...

使用Category分類

通常來講，一個我的博客的文章會分爲不少種，好比說有記錄生活情感的、技術交流的、轉載他人的等等，而在jekyll中，可使用Category進行分類，使用方法很是簡單

爲文章定義分類

首先要肯定文章屬於哪一個分類。這個配置能夠設置在文章的頭信息中，使用category或者categories肯定，如文章屬於「test」類別：

---
layout: MyTemplate
title: Category Sample
category: test
---

或者使用categories，這個屬性接受一個數組，表明這篇文章所述的類，如文章屬於「test」和「sample」類別：

---
layout: MyTemplate
title: Category Sample
categories: [test, sample]
---

加入這些信息後，文章所屬分類就定義好了。可是還須要在頁面（或者模板）中輸出分類全部的文章才能完成以分類爲基礎的索引功能

輸出全部分類

全部的分類信息都被存儲在site對象的categories中，因此能夠經過liquid的for標籤進行輸出：

{% for category in site.categories %}
<h2>{{ category | first }}</h2>
</span>{{ category | last | size }}</span>
<ul class="arc-list">
    {% for post in category.last %}
        <li>{{ post.date | date:"%d/%m/%Y"}}<a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
</ul>
{% endfor %}

上面代碼能夠看到，首先從site中取出全部categories的信息，分別輸出。categories的元素爲一個兩個元素的數組，第一個元素爲category的名字，第二個元素則爲一個數組，保存有該分類下文章的列表

因而乎就很簡單了：
* 使用{{ category | first }}輸出分類的名稱
* 使用{{ category | last | size }}輸出該分類下文章的數目
* 遍歷category.last輸出全部文章的信息，構建到該文章的索引

這樣就完成了在一個頁面上輸出全部分類，及其全部文章索引的方法了。可是須要注意的是，這種方式只能獲取全部分類，而不能獲取某個單一分類下的文章。畢竟jekyll編譯完成後是靜態頁面，沒有辦法動態生成（除非爲每個分類都建立一個html文件，並在首頁上建立一大堆通向這些html文件的a標籤）。事實上，這個問題有一個解決方法是使用jekyll插件去解決。可是github不支持三方jekyll插件。因此必須繞個彎子來實現這種方式

輸出單個分類下的全部文章

咱們能夠輕鬆得到全部分類下的全部文章，可是沒有辦法只輸出一個分類下的文章。

首先能夠想到的解決方法方法：首先把全部分類和全部文章的html生成好，而後所有隱藏。把須要顯示的分類的名稱放在url中，使用javascript讀取名稱出來後根據名稱顯示該分類。這樣作有一個壞處：若是文章數較多，而每一個文章都有不少分類，那麼就會出現html文件很大，加載很慢的狀況。

因而乎又想到一種方法，將全部的數據壓縮在JSON中，而後經過javascript解析JSON對象，而後動態生成html。這種方法不過是一個折中，若是須要生成的html較爲複雜，徹底可使用第一種方法。但若是隻是簡單的索引，這種方法就足夠了。根據須要考量吧。下面放一點簡單的源碼來介紹一下這種方法：

var dataStr = '{ {% for cat in site.categories %}{% if cat[0] != site.categories.first[0] %},{% endif %}"{{ cat[0] }}":[{% for post in cat[1] %}{% if post != cat[1].first %},{% endif %}{"url":"{{post.url}}", "title":"{{post.title}}", "date":"{{post.date | date:"%d/%m/%Y"}}"}{% endfor %}]{% endfor %} }',
    data = JSON.parse(dataStr),
    curTag = $.query.get("cat"),
    archieves = data[curTag];

首先經過上面介紹過的方法構建JSON字符串，這裏只是一個模板，讀取了全部分類，並以分類名稱爲key，文章列表爲value構建了一個對象。文章列表的元素也是一個對象，有date，url，title三個值，分別表示文章的日期、url路徑、標題，幫助生成索引。解析完以後就能夠經過url中的category的名稱取出來了。這裏使用了一個叫jQuery.query的插件，專門取url的參數並進行包裝。

綜上所述，好比只顯示單一分類的頁面叫showCategory.html，要顯示java分類，那麼首頁中給個a標籤，href爲/showCategory.html?cat=java就好了，方便快捷（笑）

類別爲中文時問題

Windows下，使用UTF-8編碼時當category爲中文時，在經過url進入文章時，會出現以下錯誤

Internal Server Error
"\xAE\xBE" from GBK to UTF-8

我並不知道這個編碼爲什麼會須要從GBK轉換爲UTF-8，因此只能經過其餘方式進行避開。網上應該會有人解答這個問題，須要進一步去查了，這裏講一下我怎麼避開的吧

首先介紹一下jekyll的Permalinks這個配置，這個配置定義了文章被jekyll處理後生成結果的最終路徑，默認爲/:categories/:year/:month/:day/:title.html，也就是說，如一篇文章叫「2014-2-6-this-is-a-title.md」，在文章中定義的文類爲[測試, new]，那麼最終這篇文章的路徑將會是「_site/測試/new/2014/02/06/this-is-a-title.html」，也就是說若是category爲中文名稱的話，中文將會出如今url中。而後就會根據中文去jekyll的action中索引，而後致使錯誤。

避開方法就是去掉根據permlinks中的categories，由於通常狀況下根據時間來生成文件夾就已經夠了，在_config.yml中新增一行：

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

規則能夠本身定，具體參照jekyll的Permlinks配置介紹頁面，別出現categories就好了

使用文章標籤索引文章

如今不少博客都支持給文章添加標籤，表示這篇文章具體是哪幾方面的技術。jekyll也是支持標籤的，並且不須要額外的插件。使用方法和categories相似

給文章添加標籤

文章中的標籤配置使用tags來定義，內容爲一個數組，放在文章的頭中，如本文的標籤訂義：

---
layout: MyTemplate
title: 使用Jekyll在Github上搭建我的博客（文章分類索引）
tags: [github, jekyll]
---

輸出全部標籤

通常狀況下，標籤與文章爲很複雜的多對多關係，因此若是生成全部標籤及含有該標籤的全部文章，html將會很是龐大，因此通常只是生成全部的標籤，而後經過點擊標籤到達該標籤的索引頁面，頁面中僅顯示含有該標籤的文章。

輸出全部標籤，能夠經過liquid的for標籤遍歷site.tags來實現：

{% for tag in site.tags %}
    <a href="/show_by_tag.html?tag={{ tag[0] }}"> {{ tag[0] }}</a>
{% endfor %}

tag[0]是標籤的名稱

輸出含有某標籤的全部文章數

實現思路和上面categories同樣，先生成JSON字符串再經過javascript動態生成html，具體代碼：

var dataStr = '{ {% for tag in site.tags %}{% if tag[0] != site.tags.first[0] %},{% endif %}"{{ tag[0] }}":[{% for post in tag[1] %}{% if post != tag[1].first %},{% endif %}{"url":"{{post.url}}", "title":"{{post.title}}", "date":"{{post.date | date:"%d/%m/%Y"}}"}{% endfor %}]{% endfor %} }',
    data = JSON.parse(dataStr),
    curTag = $.query.get("tag"),
    archieves = data[curTag];

這裏仍是同樣，使用jQuery.query插件獲取url中的參數，和上面的<a href="/show_by_tag.html?tag={{ tag[0] }}"> {{ tag[0] }}</a>相對應

標籤沒有字符集問題，放心使用吧

總結

文章的分類其實實現並不難，可是須要繞點小彎子。若是有更好的不須要使用插件的方法但願能告知我，感激涕零