標簽云（Tag Cloud）常見于各種博客站點中，標簽有利于網(wǎng)站內容分類，還可以用于相關性內容推薦。近日筆者有空把個人的開源博客Django_blog添加了一個新功能--標簽云。
實現(xiàn)原理
標簽云最終展現(xiàn)出來的效果其實是由兩個HTML參數(shù)來控制的，分別是：font-size和color，如：
|
1
|
<a href="http://foofish.net/blog/tag/django" rel="external nofollow" style="font-size:24px; color:#4f4f4f">django</a> |
標簽關聯(lián)的文章越多，表示這個標簽被引用的次數(shù)越大，font-size的值也越大，color的顏色越深。考慮到體驗效果，font-size不能隨著的標簽的引用次數(shù)的增大而無限增大，否則頁面顯得非常丑陋。因此會把font-size控制在某個區(qū)間，同理color也是在一個區(qū)間中。
這里我把font-size設置在12到33之間數(shù)組FONT_SIZES，標簽的font-size屬性只能是里面的一個值，COLORS是與FONT_SIZES對應的一個數(shù)組，12對應#ccc，15對應#adadad，以此類推。
|
1
2
3
4
|
MIN_FONT_SIZE = 12 # 最小尺寸MAX_FONT_SIZE = 33 # 最大尺寸FONT_SIZES = [MIN_FONT_SIZE, 15, 18, 21, 24, 27, 30, MAX_FONT_SIZE] COLORS = ['#ccc', "#adadad", '#8e8e8e', '#6f6f6f', '#4f4f4f', '#303030', '#111', '#000'] |
現(xiàn)在關鍵問題就是如何根據(jù)標簽的引用次數(shù)(tag_ref_count)來確定它的font-size。一旦font-size了，color也隨之確定。要想標簽的font-size能夠均勻分布在數(shù)組FONT_SIZES中，那么要遵循的一個原則就是，隨著次數(shù)的增加其font-size的取值也增加，而且引用次數(shù)最少的標簽使用MIN_FONT_SIZE，引用次數(shù)最多的標簽使用MAX_FONT_SIZE。
因此有一個公式，MIN_FONT_SIZE + n*step = MAX_FONT_SIZE，step是步長，n是指引用次數(shù)最多的標簽減去引用次數(shù)最少的標簽，表示兩者之間總共有多少步step，根據(jù)此根式可以算出每一步的step值是多少，知道了步長后，就可以計算出任意一個標簽的font-size了，任何一個標簽到最小標簽的步數(shù)是兩者之差，因此每一個標簽的font-size為 MIN_FONT_SIZE + (tag_ref_count-min_ref_count)*step
源代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
# encoding: utf-8__author__ = 'liuzhijun'class TagCloud(object):MIN_FONT_SIZE = 12MAX_FONT_SIZE = 33FONT_SIZES = [MIN_FONT_SIZE, 15, 18, 21, 24, 27, 30, MAX_FONT_SIZE]COLORS = ['#ccc', "#adadad", '#8e8e8e', '#6f6f6f', '#4f4f4f', '#303030', '#111', '#000']def __init__(self, min_ref_count, max_ref_count):TagCloud.min_ref_count = min_ref_count# 如果最大標簽和最小標簽相等,那么認為兩者的步長為0,所有標簽取同樣的font-size.if max_ref_count == min_ref_count:TagCloud.step = 0else:TagCloud.step = (TagCloud.MAX_FONT_SIZE - TagCloud.MIN_FONT_SIZE) / (max_ref_count - min_ref_count)def get_tag_font_size(self, tag_ref_count):font_size = TagCloud.MIN_FONT_SIZE + (tag_ref_count - TagCloud.min_ref_count) * TagCloud.step# 上面計算出來的font_size并不一定剛好是FONT_SIZES中的某個元素, 可以能某兩個元素之間的某個值# 因此要取最接近FONT_SIZES中某個元素font_size = min(TagCloud.FONT_SIZES, key=lambda x: abs(font_size - x))return font_sizedef get_tag_color(self, tag_ref_count):return TagCloud.COLORS[(TagCloud.FONT_SIZES.index(self.get_tag_font_size(tag_ref_count)))] |
輸出結果：
|
1
|
12,12,12,18,24,18,21,27,33, |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
