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

安裝 octopress-tagcloud

首先要先安裝插件,在’<octopress 目錄 & gt;/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 目錄 & gt;/_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> 文章標籤 < span class="tag"></h3>
{% tag_cloud %}
</div>
</section>

網頁插入標籤雲邊欄

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

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

小結

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