2007/05/31

三步驟把blogger的標籤,改造成標籤雲(Tag Cloud)




2007/10/08 更新 : 程式碼前幾個月有修改過, 但相對應的文章內容, 忘了改. 所以可能造成網友們在修改時的困擾. 刪除線部分, 就請忽略.

在 blogger 裡, 如果想把標籤呈現的方式, 由原來清單改成標籤雲的話, 該怎麼做呢?

其實只要三個步驟, 就可以改造完成了.


之前還不熟悉blogger的操作時, 尤其有些中譯名詞沒弄懂, 標籤雲找了很多資料,一直沒成功.

後來發現關鍵就在 展開小裝置範本 這個方塊要勾選, 預設值是沒有的. 由於它翻成"小裝置範本".. 怪我文學造詣太差,這個名詞沒能吸收消化.直到有一天, 突然開竅, 把語言轉成英文, 發現原來所謂的"小裝置範本", 其實是 widget template..


記得要養成良好的備分習慣..先備分template !

準備好的話, 就開始改造工程吧!
1. 先找到 ]]>

將以下程式碼,貼在 ]]> 之前.

/* Label Cloud Styles

----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0
!important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}


2. 找到 </head>

</head> 之前, 貼以下程式碼.


<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 0;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>


這一段程式碼是可以用來自己調整顏色, 字體大小等數值...

3. 找到這一列程式碼 (注意, 後面是 /> 結束哦!)

<b:widget id='Label1' locked='false'
title='Labels' type='Label'/>


用以下程式碼取代它.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


就可以把原先label1這個widget的長相,


改成這樣了.


參考資料 : http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html

2007/08/07 更新:

感謝李大夫 看到多名讀者在改造標籤雲過程中碰上麻煩, 所以細心地提供一些補充, 說明blogger 展開小裝置範本的差別.

"展開小裝置範本", 主要是把每一個widget所包住的程式, 都完整顯示出來, 如果把這選頁打勾, 例如步驟3, 我們已改造成功後的程式碼, 應該可以看到一段由<b:widget id='Label1' locked='false' title='Label Cloud' type='Label' 及 </b:widget> 包起來.

但是如沒勾選"展開小裝置範本", 那麼 這段程式碼就只會看到一行<b:widget id='Label1' locked='false' title='Label Cloud' type='Label' />. 有注意到 />嗎? 這就是用相當於</b:widget>. 代表這其中那一大串的程式碼,被藏起來啦!


相關文章 :

43 comments:

提到...

如果不是blogger的使用者(我是pixnet),也可以用改成這標籤雲嗎?

Skyvee 提到...

侍,
這段語法其實是針對 blogger 的一些變數修改的, 所以如果要對pixnet, 可能仍要修正後才能用哦!

SPEAKER 提到...

Skyvee

我終於把標籤雲用好啦!謝謝你的教學!現在要去搞繼續閱讀..我該怎麼樣才能把兩次出現文章的樣子弄掉呢...而且最近繼續約讀的程式碼有改過了吧?因為都不能用了!

Skyvee 提到...

Speaker, 繼續閱讀的部分, 我有把流程修改一下, 你可以照流程把之前的碼移除, 我有保留要移除的程式碼, 再按流程改看看..記得先備份template哦!

阳光飞翔 提到...

打扰了,我复制你的代码修改我的模板,可是无法成功,请问怎么改啊?

就最后一步的地方,复制代码保存后说XML无法解析,谢谢


We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".

Skyvee 提到...

阳光飞翔您好,
有時候直接從網頁copy html复制,會有解譯錯誤的問題, 要不要試著將這些代碼,先复制到notepad(小作家), 然後再從小作家重新复制後, 貼回blogger?

阳光飞翔 提到...
作者已經移除這則留言。
阳光飞翔 提到...

谢谢,现在已经搞定,是我自己的问题。
在你这儿看到了好多好东东,会常来看你,呵呵!

◤kahyan™◢ 提到...

我又有问题了,这个标签运会把我的标签分开2行呃~我看你的都没有这个问题,怎么解决?换了font size都1样呢~

Skyvee 提到...

阳光飞翔您好, 搞定就好囉! 歡迎有空常來啊! XD

Skyvee 提到...

Kahyan, 你指的是同一個標籤字, 但空間問題, 被換行了嗎? 如果是的話, 那就是要調字體大小了!

妙手回春李大夫 提到...

第三段的程式碼是沒有問題
但是做法上有所不同

現在blogger把這個widget寫成完整的格式
(b:widget id='Label1' locked='false' title='Articles' type='Label')
(b:includable id='main')
(b:if cond='data:title')
(h2)(data:title/)(/h2)
(/b:if)
(div class='widget-content')
(ul)
(b:loop values='data:labels' var='label')
(li)
(b:if cond='data:blog.url == data:label.url')
(data:label.name/)
(b:else/)
(a expr:href='data:label.url')(data:label.name/)(/a)
(/b:if)
((data:label.count/))
(/li)
(/b:loop)
(/ul)

(b:include name='quickedit'/)
(/div)
(/b:includable)
(/b:widget)
而非你原本的格式那樣簡單
取代的時候必須完整
也就是從(b:widget)到(/b:widget)整段
否則不管怎麼改都會出現上面陽光飛翔遇到的問題
另外值得一提的是
Title的default是labels沒錯
萬一有人跟我一樣早就改過名稱
那在搜尋的時候,會出現找不到的結果
兩個地方給您參考

Skyvee 提到...

謝謝李大夫的意見, 您說的沒錯, 原本就是將整段code (b:widget) (/b:widget)取代原本的label1所在那一列, 至於如果有改過template, 那就要看後來改掉的名稱是什麼了. 多謝您的補充.

妙手回春李大夫 提到...

sorry 我昨天說的也不是很完整,剛剛玩了一下,原來如果沒有勾選展開小裝置範本的話,就會出現(b:widget id='Label1' locked='false' title='Labels' type='Label'/)
要是已經勾選了展開小裝置範本,就會看到我昨天po的那段完整結構,可以在您文章中註明其中差異會比較清楚:)

Skyvee 提到...

李大夫真是個很熱心的人, "展開小裝置範本", 其實就是把widget的程式碼完整呈現, 由於這種註解,要在每篇hack文章, 怕讀者們看了也煩, 我也在考慮, 也許要再寫個針對template時的說明文章..很感謝您一再幫我補充! 我先在這篇加上一段吧!

K.E. 提到...

請問要怎麼把標籤的那一個sidebar (widget)改成不是list呢?
因為樣板本身設定它是list的型態,所以就算是標籤雲,也都變成 "標籤雲排排隊"
目前我把標籤雲的語法暫時拿起來 (因為大大小小的不太好看^^"),但很希望能夠使用標籤雲這個功能,因此想請問如何只單獨把標籤雲的這一個element的list取消?
謝謝 ^^

Skyvee 提到...

k.e. 是否可以留一下你的blog網址? 我比較好查一下?

K.E. 提到...

抱歉抱歉,我以為有login就可以看到我的blog了 ^^"
http://summer-sunshine13.blogspot.com/
感謝萬分 <(_ _)>

skyvee 提到...

KE, 先試看看把 .sidebar li {
background: url(http://img225.imageshack.us/img225/8595/icobh1.gif) no-repeat 0 5px;
}
這段移除看看?

K.E. 提到...

Skyvee你好,
已嘗試將.sidebar li移除,但在標籤處仍然呈現list的排列
我對CSS與HTML不是很熟析,但猜想是否該拿掉或修改某段語法讓這個element覺得自己不應該是個list?
三番兩次的來麻煩你真是不好意思,如果你覺得太麻煩就當成我跟標籤雲沒有緣份吧,希望不會耽誤你太多的時間 ^^"

Skyvee 提到...

K.E. 你好,
看起來需要原始碼, 我才有方向呢!還是請你把template(用匯出方式或copy到記事本)寄給我? skyvee886 AT gmail.com

K.E. 提到...

已經寄到你的信箱了,萬分感激

Skyvee 提到...

收到了 有時間可以專心下來的話, 就儘快看看. :)

X 提到...

您好,我是blogger新手

  這幾天改造blog,於此處文章受惠許多,完成大半.惟lable cloud無法順利呈現.找多篇文章當對照實驗,卻仍失敗(裝置也有打開)不知是何緣故.

  在來是頁面呈現問題.文章區較短時,左邊sidebar會蓋住下方區塊(圖片鏈結http://i243.photobucket.com/albums/ff199/stuffinto/Untitled-1.gif?t=1189338340)以上問題,勞煩幫忙留意了,謝謝.

X 提到...

補上網站位置:
http://mystagogue.blogspot.com/
與問題頁:
http://mystagogue.blogspot.com/2007/09/i-p_04.html

Skyvee 提到...

X您好,
我將您套用的template抓了回來試過. 右邊sidebar過長, 會蓋住footer的問題, 看來是原設計者原本就存在的問題,與標籤雲無關. 所以也許請您直接與原設計者反應? 這也是幫他的忙,找到問題.
另外標籤雲的部分, 我不知道您的問題是在哪裡? 不過, 我把程式加到template後, 是正常的. 請參考http://blogweb20.blogspot.com/ (這網頁只會暫時存在)

X 提到...

感謝您的幫忙
現已將標籤雲完成
至於版型問題,當儘快回覆原設計者

Skyvee 提到...

謝謝 X 的留言, 希望您的sidebar 問題可以儘早解決. :)

x 提到...

....不好意思,又來打擾....

我的lable cloud似乎中看不中用.點進去變成http://yourblog.blogspot.com/search/label/%E5%B1%95%E6%BC%94

....這....

Skyvee 提到...

X您好, 我注意到您在標籤雲程式區段內,有加入一行
var lcBlogURL = 'http://YOURBLOG.blogspot.com';

不知道為何有這行程式呢?把這程式移除,就可了.

X 提到...

  ....我將您所指出的那行,代換成我的網址位置,就可行了?靈異.

而邊欄問題,似乎石沉大海.
嘗試更改clear:both 但好像變動不大...感謝您耐心的回應.

Skyvee 提到...

x, 很高興你的標籤雲終於work了. :)

我想, 那位原創者也需要點時間去修改. 我看了原始檔, sidebar的位置是絕對位置, footer是相對位置. 這可能是文章內容比sidebar短, 就會出現footer被蓋掉的原因....我對blogspot的版型還沒研究得夠透徹, 所以暫時也沒想到可以怎麼改..所以才想說, 原創者也許有方法.

x 提到...

能得到您耐心回答

已經非常感謝

多次打擾,還請見諒

雙羊 提到...

skyvee 我又來了 orz...
我最近大幅修改我的文章標籤,決定把文章標籤在放回 widget 裡,本來我也遇到語法不完全無法關閉的問題,後來才知道第三步驟是不需打開最小範本 orz
無論如何我弄好了 ^________^
但是我有一個另外的問題跟請求,不知道有沒有什麼方式可以讓標籤對文字的判讀以中文字為優先,也就是說我喜歡我的標籤是中文開始、英文結束,而不是英文先於中文,我說的有點含糊,不知道 skyvee 聽的懂嗎?感謝 :-)

Skyvee 提到...

雙羊, 你是希望標籤的排序是中文先吧? 這部分可能不太容易做到耶!blogger本身有標籤排序的功能, 不過目前只有兩種排序, 一是按字母(當然英文先囉!)另一是按文章數(頻率).

到 網頁元素--> 選標籤, 就可以設定了.

雙羊 提到...

原來如此,我還是放棄標籤好了..嗚嗚。

丁D 提到...

您好,我想請問一下,我按照您所說得作法操作
按預懶時出現了

XML
XML The element type "b:section" must be terminated by the matching end-tag "".

可以請您幫我解惑一下嗎。謝謝您

Skyvee 提到...

雙羊, 也許日後blogger會推出反向排序, 到時候就可以用啦! :)

丁D, 看起來是第3步驟出了問題, 不要勾選 "小裝置範本",然後再複製一下程式碼試試?因為你的 b:section 沒有結束標籤.

雙羊 提到...

路過幫忙一下,因為我前幾日也有跟丁D同樣的問題,其實就如 skyvee 上面說的,第一、二步驟要勾「小裝置範本」,第三步驟不要勾,直接找「關鍵字」替換。

ps. 你跟李大夫的前後對話我大概看了不下六次才懂,也才知道我錯在哪
\(" ̄□ ̄)/<--此人是程式麻瓜

Skyvee 提到...

謝謝雙羊的補充, 這篇我應該再重新整理, 中間的程式碼我曾改過, 但是開頭的文章忘了改, 因為程式碼改過後, 就不用再開"小裝置範本"了. 因為雙羊的留言, 讓我發現這個問題, 真不好意思, 也謝謝雙羊提醒了我.

丁D 提到...

非常謝謝Skyvee及熱心的雙羊。應該已經初步成功了。
不過出現了一個問題,就是標籤的字型跟顏色不一樣,不過我沒有另外改,只是單純把程式碼貼上去後,就有一些"特殊的效果了",還請您就此部分不吝解惑~

又,在第二段程式碼中,字體字型大小顏色這裡可否指教一下呢,

先謝謝大家的回答~

丁D 提到...

啊,非常不好意思。在此附上敝人的BLOG以供情況參考,http://ddingdb.blogspot.com/

還請大家多多指教

Skyvee 提到...

丁d, 顏色可以到這個網頁, http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html去調, 其中 rgb 那欄的三個百位數, 就是在以下兩行修改.
var maxColor = [0,0,255];
var minColor = [0,0,0];