Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步,無以致千里;不積小流,無以成江海。

0%

Octopress 加入 Category(分類)

緣起

部落格文章一旦變多起來,就需要進行整理,而且為了讓慣看的人能夠快速簡單的找尋,最好進行分類列表,所以經由官網上的說明套入 Category 插件。

找尋套件

先搜尋一下 Octopress 對於 Category 的相關套件,發現這篇文章 Octopress Top Categories Plugin,看到該篇文章中提到有人開發了 octopress-category-list 這套件,這個套件也是作者 Fork octopress-tagcloud 調整而來的,此篇文章作者自己又 Fork 調整了一版,我就偷懶一點直接 Fork 作者自己調整的這版,這樣之後我就可以直接變動我的版本

安裝套件

這部份很簡易,請到此直接下載,或是直接 git clone 一份,等下要把檔案複製到您的 octopress 資料夾下
Github Download ZIP

在剛剛下載的檔案中可以看到以下檔案
Files:


.
├───plugins
│   └── category_list.rb
└───source
    ├───categories
    │   └── index.markdown
    └───_includes
        └───custom
            ├───navigation.html
            └───asides
                ├─ category_cloud.html
                ├─ category_list.html
                └─ category_cloud.html

這些檔案按照同樣的路徑放到您的 octopress 資料夾下,先把category_list.rb這檔案放到 plugins 資料夾下,這是 plugin 的核心 code。
接著修改您的_config.yml,在default_asides增加套件的 html 檔案路徑與名稱,就是 category_cloud.html、category_list.html、category_cloud.html 這三個檔案,這個是設定側邊欄位的顯示。示範如下

1
2
3
4
5
6
7
8
default_asides: [
asides/recent_posts.html,
custom/asides/top_category_list.html,
custom/asides/category_cloud.html,
custom/asides/category_list.html,
asides/github.html,
asides/googleplus.html
]

接著建立頁面上方的選單
blog menu link

請參照上方的 Files tree,將 source 資料夾下的 categories 複製到您的 octopress/source 下,再把 navigation.html 複製到您的資料夾下,確認每個檔案都按照路徑複製就可以了。

上述的步驟太複雜的話,教大家簡單的方式:
將下載的 octopress-category-list 檔案開啟後,複製 plugins 跟 source 資料夾,貼上自己的 octopress 資料夾下

執行

一樣使用指令碼進行觀看

1
rake preview

完成的話,直接發布了

1
rake deploy

碎碎念

其實後來在看 octostrap3,在考慮要不要使用,看起來的版面挺漂亮的,可能等以後再使用了~

參考資料

歡迎關注我的其它發布渠道