我是山姆鍋

一直想在 "影化身部落格" 的首頁加個標籤雲邊欄，昨天終於利用了一點時間把它做好了。離想要的還有點差距，有時間再來改善。山姆鍋使用的標籤雲插件是這個 octopress-tagcloud，它也支援分類列表，但我目前只使用了標簽雲功能。

安裝 octopress-tagcloud

首先要先安裝插件，在’<octopress 目錄>/plugins/' 目錄中，新增 tag_cloud.rb 檔案，內容拷貝這個：

插件原始碼

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
# encoding: utf-8

# Tag Cloud for Octopress
# =======================
#
# Description:
# ------------
# Easy output tag cloud and category list.
#
# Syntax:
# -------
#     {% tag_cloud [counter:true] %}
#     {% category_list [counter:true] %}
#
# Example:
# --------
# In some template files, you can add the following markups.
#
# ### source/_includes/custom/asides/tag_cloud.html ###
#
#     <section>
#       <h1>Tag Cloud</h1>
#         <span id="tag-cloud">{% tag_cloud %}</span>
#     </section>
#
# ### source/_includes/custom/asides/category_list.html ###
#
#     <section>
#       <h1>Categories</h1>
#         <ul id="category-list">{% category_list counter:true %}</ul>
#     </section>
#
# Notes:
# ------
# Be sure to insert above template files into `default_asides` array in `_config.yml`.
# And also you can define styles for 'tag-cloud' or 'category-list' in a `.scss` file.
# (ex: `sass/custom/_styles.scss`)
#
# Licence:
# --------
# Distributed under the [MIT License][MIT].
#
# [MIT]: http://www.opensource.org/licenses/mit-license.php
#
require 'stringex'

module Jekyll

  class TagCloud < Liquid::Tag

    def initialize(tag_name, markup, tokens)
      @opts = {}
      if markup.strip =~ /\s*counter:(\w+)/i
        @opts['counter'] = ($1 == 'true')
        markup = markup.strip.sub(/counter:\w+/i,'')
      end
      super
    end

    def render(context)
      lists = {}
      max, min = 1, 1
      config = context.registers[:site].config
      category_dir = config['root'] + config['category_dir'] + '/'
      categories = context.registers[:site].categories
      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 = category_dir + category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase
        style = "font-size: #{100 + (60 * Float(counter)/max)}%"
        html << "<a href='#{url}' style='#{style}'>#{category}"
        if @opts['counter']
          html << "(#{categories[category].count})"
        end
        html << "</a> "
      end
      html
    end
  end

  class CategoryList < Liquid::Tag

    def initialize(tag_name, markup, tokens)
      @opts = {}
      if markup.strip =~ /\s*counter:(\w+)/i
        @opts['counter'] = ($1 == 'true')
        markup = markup.strip.sub(/counter:\w+/i,'')
      end
      super
    end

    def render(context)
      html = ""
      config = context.registers[:site].config
      category_dir = config['category_dir']
      categories = context.registers[:site].categories
      categories.keys.sort_by{ |str| str.downcase }.each do |category|
        html << "<li><a href='/#{category_dir}/#{category.to_url}/'>#{category}"
        if @opts['counter']
          html << " (#{categories[category].count})"
        end
        html << "</a></li>"
      end
      html
    end
  end

end

Liquid::Template.register_tag('tag_cloud', Jekyll::TagCloud)
Liquid::Template.register_tag('category_list', Jekyll::CategoryList)

設定邊欄樣版

在 '<octopress 目錄>/_source/includes/custom/asides/' 目錄中新增一個名為 tag_cloud.html 的檔案，原始的範例內容：

1
2
3
4
<section>
  <h1>Tag Cloud</h1>
    <span id="tag-cloud">{% tag_cloud %}</span>
</section>

以下是影化身部落格使用的內容：

1
2
3
4
5
<section id="crum_tags_subtitle-2" class="widget-3 widget-last widget tags-widget">
  <div class="widget-inner"><h3>文章標籤</h3>
  {% tag_cloud  %}
  </div>
</section>

網頁插入標籤雲邊欄

在想要出現標籤雲邊欄的頁面樣板，在希望出現的地方插入下面指令：

1
{% include custom/asides/tag_cloud.html %}

小結

Octopress 中，標籤 (tag) 跟分類 (category) 好像是同一件事情，但是山姆鍋想要將它們分開。如果有哪位高手知道如何做的話，請不吝指教！