標簽云（Tag Cloud）常見于各種博客站點中，標簽有利于網站內容分類，還可以用于相關性內容推薦。近日筆者有空把個人的開源博客Django_blog添加了一個新功能--標簽云。
實現原理
標簽云最終展現出來的效果其實是由兩個HTML參數來控制的，分別是：font-size和color，如：
標簽關聯的文章越多，表示這個標簽被引用的次數越大，font-size的值也越大，color的顏色越深。考慮到體驗效果，font-size不能隨著的標簽的引用次數的增大而無限增大，否則頁面顯得非常丑陋。因此會把font-size控制在某個區間，同理color也是在一個區間中。
這里我把font-size設置在12到33之間數組FONT_SIZES，標簽的font-size屬性只能是里面的一個值，COLORS是與FONT_SIZES對應的一個數組，12對應#ccc，15對應#adadad，以此類推。
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']
現在關鍵問題就是如何根據標簽的引用次數(tag_ref_count)來確定它的font-size。一旦font-size了，color也隨之確定。要想標簽的font-size能夠均勻分布在數組FONT_SIZES中，那么要遵循的一個原則就是，隨著次數的增加其font-size的取值也增加，而且引用次數最少的標簽使用MIN_FONT_SIZE，引用次數最多的標簽使用MAX_FONT_SIZE。
因此有一個公式，MIN_FONT_SIZE + n*step = MAX_FONT_SIZE，step是步長，n是指引用次數最多的標簽減去引用次數最少的標簽，表示兩者之間總共有多少步step，根據此根式可以算出每一步的step值是多少，知道了步長后，就可以計算出任意一個標簽的font-size了，任何一個標簽到最小標簽的步數是兩者之差，因此每一個標簽的font-size為 MIN_FONT_SIZE + (tag_ref_count-min_ref_count)*step
源代碼：
# encoding: utf-8
__author__ = 'liuzhijun'
class TagCloud(object):
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']
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 = 0
else:
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_size
def get_tag_color(self, tag_ref_count):
return TagCloud.COLORS[(TagCloud.FONT_SIZES.index(self.get_tag_font_size(tag_ref_count)))]
輸出結果：
12,12,12,18,24,18,21,27,33,
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
