高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

幫你的 Octopress 增加文章分類

發現在 Octopress 似乎沒有現成可以放在 sidebar 的分類,於是便自己動手刻一個,順便練一下手感。程式碼短短的,使用方法也很容易,首先你可以按下面程式碼區塊右上角的 download,並將檔案存在 Octopress 的 plugins 資料夾:

(category_list.rb) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# encoding: utf-8
module Jekyll

  class Site

    def create_category_list
      write_to_tag_cloud if @config['category_tag_cloud']
      write_to_sidebar if @config['category_sidebar']
    end

    private
    # generate category tag list and write to 'source/_includes/asides/categories_tag.html'
    def write_to_tag_cloud
      puts ' => Creating Categories Tag Cloud'
      lists = {}
      max, min = 1, 1
      @categories.keys.sort_by{ |str| str.downcase }.each do |category|
        count = @categories[category].count
        lists[category] = count
        max = count if count > max
      end

      html = ''
      lists.each do | category, counter |
        url = get_category_url category
        style = "font-size: #{100 + (60 * Float(counter)/max)}%"
        if @config['category_counter']
          html << " <a href='#{url}' style='#{style}'>#{category.capitalize}(#{@categories[category].count})</a> "
        else
          html << " <a href='#{url}' style='#{style}'>#{category.capitalize}</a> "
        end
      end

      File.open(File.join(@source, '_includes/asides/categories_tag.html'), 'w') do |file|
        file << """{% if site.category_tag_cloud %}
<section>
<h1>#{@config['category_title'] || 'Categories'}</h1>
<span class='categories_tag'>#{html}</span>
</section>
{% endif %}
"""
      end
    end

    # generate category lists and write to 'source/_includes/asides/categories_sidebar.html'
    def write_to_sidebar
      puts ' => Creating Categories Sidebar'
      html = "<ul>\n"
      # case insensitive sorting
      @categories.keys.sort_by{ |str| str.downcase }.each do |category|
        url = get_category_url category
        if @config['category_counter']
          html << "  <li><a href='#{url}'>#{category.capitalize} (#{@categories[category].count})</a></li>\n"
        else
          html << "  <li><a href='#{url}'>#{category.capitalize}</a></li>\n"
        end
      end
      html << "</ul>"
      File.open(File.join(@source, '_includes/asides/categories_sidebar.html'), 'w') do |file|
        file << """{% if site.category_sidebar %}
<section>
<h1>#{@config['category_title'] || 'Categories'}</h1>
#{html}
</section>
{% endif %}
"""
      end
    end

    def get_category_url(category)
      dir = @config['category_dir'] || 'categories'
      File.join @config['root'], dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase
    end
  end

  class CategoryList < Generator
    safe true
    priority :low

    def generate(site)
      if site.config['category_list']
        puts "## Generating Categories.."
        site.create_category_list
      end
    end
  end

end

程式碼寫得有點髒,應該有更漂亮的寫法 :)

再來,請打開根目錄的_config.yml,加上一些設定:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ----------------------- #
#    Categories           #
# ----------------------- #
# create categories page
category_list: true
# use counter after categories
category_counter: true
# category title
category_title: 分類
# create an include categories list in @source/_includes/asides/categories_sidebar.html
# and don't forget to add 'asides/categories_sidebar.html' into @default_asides if you want to enable it.
category_sidebar: true
# create an include categories tag cloud page in @source/_includes/asides/categories_tag.html
# and don't forget to add 'asides/categories_tag.html' to @default_asides if you want to enable it.
category_tag_cloud: true

其中,category_list就是用來啟用是否產生側類分類的;category_counter就是用來決定要不要秀出計數器,category_title是那個區塊的標題,category_sidebarcategory_tag_cloud打開的話,則各會產生兩個用來include的檔案。category_sidebar的效果就是一個一個的排下來,但如果你的文章分類很多可能會讓頁面拉很長,如果不喜歡,也可以改用category_tag_cloud的呈現效果。

產生完檔案還不夠,你還需要在_config.yml加一下你要include的區塊,以下是我自己的設定,請依個人需要修改:

1
default_asides: [asides/about.html, asides/recent_posts.html, asides/categories_tag.html, asides/googleplus.html, asides/plurk.html, asides/recent_comments.html, asides/twitter.html, asides/links.html, asides/advertise.html]

最後,重新rake generate之後應該就可以看到成果了,就如同你現在正在看的這篇文章的右手邊分類一樣的效果。

為了tag cloud看起來不會太擠,你可能會需要用CSS來調整一下line-height

不確定這樣做是不是最好的做法,而且有些程式碼我還是硬寫在Ruby裡的,如果有更好的做法還請不吝告知 :)

Comments