標籤雲的製作與標籤過濾

標籤雲加到部落格上可以讓您用一目了然的方式，檢視部落格分類的項目，同時可以用字型顏色和大小來 分別分類的數量，一下次就可以看出熱門的分類。

標籤雲這東西已經有很多人做了，這裡僅提供參考的部落格教學，照著裡面操作就可以做出屬於你自己的標籤雲。

Abin's Tech Note: 增強標籤分類功能: 標籤雲 (Label Cloud)

光有標籤雲還不夠，在立揚網站上面，我希望過濾掉不希望顯示的分類，因此我就打算直接改Abin's Tech Note:標籤雲裡面的程式。

一開始我是希望過濾掉數量比較少的分類，避免某些較不熱門的分類把標籤雲弄得很複雜，修改方式如下：

原先程式碼
function generateLabels(){
var blogURL = 'http://become.wei-ting.net';
var maxFontSize = 18;
var minFontSize = 11;
var maxColor = [204,204,204];
var minColor = [119,119,119];
var showCount = true;

var labelColor= [];
var labelSize = 0;
var labelCount = new Array();

for (var i in labels)
if (!labelCount[labels[i]])
labelCount[labels[i]] = new Array(labels[i])

total = labelCount.length-1;
section = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';

for(var tag in labels) {
for (var i=0; i < 3; i++)
labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);

labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
li = document.createElement('li');
li.style.fontSize = labelSize+'px';

a = document.createElement('a');
a.title = labels[tag]+' articles with Label: '+tag;
a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
a.href = blogURL+'/search/label/'+encodeURIComponent(tag);

if (showCount) {
span = document.createElement('span');
span.innerHTML = '('+labels[tag]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
}
ul.appendChild(li);
ul.appendChild(document.createTextNode(' '));
}
section.appendChild(ul);
}

改成這樣
function generateLabels(){
var blogURL = 'http://abinlee.blogspot.com';
var maxFontSize = 18;
var minFontSize = 11;
var maxColor = [204,204,204];
var minColor = [119,119,119];
var showCount = true;
var minCountFilter = 3;

var labelColor= [];
var labelSize = 0;
var labelCount = new Array();

for (var i in labels)
if (!labelCount[labels[i]])
labelCount[labels[i]] = new Array(labels[i])

total = labelCount.length-1;
section = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';

for(var tag in labels) {
for (var i=0; i < 3; i++)
labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);

labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
li = document.createElement('li');
li.style.fontSize = labelSize+'px';

a = document.createElement('a');
a.title = labels[tag]+' articles with Label: '+tag;
a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
a.href = blogURL+'/search/label/'+encodeURIComponent(tag);

if (showCount) {
span = document.createElement('span');
span.innerHTML = '('+labels[tag]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
}
if(labels[tag]>minCountFilter){
ul.appendChild(li);
ul.appendChild(document.createTextNode(' '));
}
}
section.appendChild(ul);
}


後來我將分類用特定字元起始，例如IC設計改成+IC設計，這樣一來我就只要讓特定的標籤可以顯示出來就好。
修改的程式碼如下：
function generateLabels(){
var blogURL = 'http://become.wei-ting.net';
var maxFontSize = 18;
var minFontSize = 11;
var maxColor = [204,204,204];
var minColor = [119,119,119];
var showCount = true;

var labelColor= [];
var labelSize = 0;
var labelCount = new Array();

for (var i in labels)
if (!labelCount[labels[i]])
labelCount[labels[i]] = new Array(labels[i])

total = labelCount.length-1;
section = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';

for(var tag in labels) {
for (var i=0; i < 3; i++)
labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);

labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
li = document.createElement('li');
li.style.fontSize = labelSize+'px';

a = document.createElement('a');
a.title = labels[tag]+' articles with Label: '+tag;
a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
a.href = blogURL+'/search/label/'+encodeURIComponent(tag);

if (showCount) {
span = document.createElement('span');
span.innerHTML = '('+labels[tag]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(tag));
li.appendChild(a);
}
if(encodeURIComponent(tag).substring(0,3)=='+';){
ul.appendChild(li);
ul.appendChild(document.createTextNode(' '));
}
}
section.appendChild(ul);
}