幫blogger.com加上分類標籤及最新回覆的功能（完全不用外掛）分類：網路、部落格

會寫這篇整理算是對最近熬夜的研究畫上一個句點，不然我越來越有興趣的時候，每天都不用睡了。會研究這個主題是因為 http://www.blogger.com 這個部落格平台提供的功能其實不很完全，目前被大家所詬病的是少了＂分類＂、＂引用＂、＂最新留言匯整＂這三項功能。

先提醒一下要詳細研究以下的文章，請先具備了解很多專有名詞及程式寫作的能力，並不是我寫的不夠清楚，而是重頭到尾寫清楚可能要三天三夜，所以只能很簡略的說明方法，另外，要對 blogger.com 這個部落格的平台有一定的熟悉度。

對我來講，＂引用＂其實跟＂留言＂是一樣的功能，而且很少人引用我寫的高調短文，所以這個功能後續再想辦法補強，目前網路上使用最多的應該算是 http://www.haloscan.com 的服務吧！其實若要自己改寫留言的 HTML Form，應該是有辦法解決的。

blogger.com 的特性是在文章發布的同時把 HTML 的靜態頁面組版組好，所以發布一篇文章的時候，幾乎同時要組內頁(ItemPage)、首頁(MainPage)、匯整頁(ArchivePage)這三個頁面，這我想也是為什麼 blogger.com 的系統不作分類的緣故，因為一做一對一的分類，重新組版要多組一個頁面，如果是一篇文章對ｎ個分類的組版，那組版不是要很多次嗎？那系統鐵定做不大了。

首頁主控台想法：

如果不能寫伺服器端的程式，那麼最好的辦法就是用 Javascript 寫客戶端的程式了，而能夠得知這些訊息的就只有首頁(MainPage)完全知道，要克服避免下載過多的資料到客戶端，唯一的辦法就是只傳必要的資訊到客戶端，例如：標題、時間、分類標籤(tag)、作者以及每一篇文章的PID了，有了這些資訊，其實就可以組合出必要的功能，可以利用搜尋方式，找出每篇文章的分類標籤(tag)，有了時間就可以依據最新留言來作排序的功能。

但是現在問題來了，缺少內文的部落格首頁是沒有什麼吸引人的，blogger.com 的修改文章功能給我了一些靈感，去偷偷看了他們的 javascript 程式碼，他是利用 DCOM 內建的 XMLHttpRequest 元件來下載內文的，但是要能用 XML/RPC 必要知道帳號密碼才能取得到的，所以這個方法被我打了一個大叉叉。

內文載入方式：

我又想了一個方法是用 HTML 內包一個 IFRAME 來載入內文資料，然後用 Javascript 來解析這段 HTML 把必要的內頁(ItemPage)資訊給取出來，顯示給瀏覽者看，在網路隨便搜尋了 javascript 的文章，找到有人用 DHTML 的方法，然後配合 Javascript 的 onload callback function 來通知所內頁已經下載成功，然後再把資料傳送給父親(parent)，顯示出內文資料。

這個方法雖然好，可是多少還是浪費一些頻寬，另外一些javascript 的防錯處理還是要作的，不然讓瀏覽者一直跳出視窗說你的網頁錯誤，有點不舒服，這方面的除錯我花了不少的時間，然後 Lordcolus 說 firefox 不能看，我去追查了一下，原來是用到非 Javascript 的正確語法，是 MS 加強的方便語法，所以 firefox 看不懂所致。不過用 firefox 的感覺比 IE 還要慢，而且有時候會撈錯內頁，IE並不會有這樣的情況發生，這點我也找了很久是否是我程式的錯誤，可是因為很難重複發生，就不繼續追查了。

另外有一個小問題是 javascript 的程式碼用引號(") 來區分標題的字串，所以當文章的標題出現引號的時候會導致程式錯誤，整個首頁就顯示不出來了。

分類標籤的做法：

由於 blogger.com 並沒有分類標籤這個欄位，起先想用相關連結(link)這個欄位來做，但是想想這個欄位擅自拿來用也不太好，所以用了 HTML H6 這個tag，只要在CSS 語法中把 h6 給隱藏起來即可，未來如果要把分類顯示出來，或是加入分類的連結部份，也可以用 javascript 加入即可，各位可以看下面這個範例

http://tripwriter.blogspot.com/2005/05/blog-post_13.html

標題底下小字很淺色的分類標籤就是包在 H6 這個 tag 裡面，但是看一下IE的標題列，其實是有H6這個標籤的，我想就留在那邊給搜尋引擎去找關鍵字也不錯。

分類欄位解決了，用javascript 的指令去找字串就不是一件難事了，但是，另外一個問題又來了，我其實並不想讓這個範本需要有這些額外的字眼是隨不同網站而立定的分類標籤，也就是說Ａ網站有這個範本的分類標籤是國家、城市名稱，Ｂ網站的分類標籤是以系統、寫程式、職場等標籤來分類，這樣這個範本就缺乏通用性，對我這個龜毛的程式設計師來說，就是不夠符合元件化的原則。

所以我把分類的方法放在部落格設定的說明項目裡面，在範本的標籤是<$BlogDescription$>這個裡面，然後在這邊打入執行 javascript 的 function，把合乎條件的分類標籤給找出來即可。結果，問題又來了，blogger.com 硬生生就是不想給你放 javascript 的字眼，可能怕有人搞鬼吧！本來想放棄這種作法的，結果我又想到一個妙招，雖然浪費一點頻寬，但這個妙招同時解決了無論在首頁內頁都可以快速的找到你要的分類，不只是在首頁可以做到的缺點，我把要搜尋分類標籤放在URL網址的後方，加入＂?t=關鍵字＂的作法，這樣javascript 就可以取得這個字串，進而做到隨時連結就可以看到正確結果的好處。試試看點下面的連結，應該就是顯示紐約的分類了

http://tripwriter.blogspot.com/?t=紐約&

額外的外掛：

上面這些都做完的時候，其實已經不想在加什麼功能了，後來發現我以前用的 furl.net 的外掛雖然可以廢除，可是少了這幾篇又有點不捨，畢竟還要有分類的說明，例如下面這個網址的範例：

http://tripwriter.blogspot.com/2005/05/blog-post_04.html

這是內頁(ItemPage)，作法是把首頁給載入，然後把跟咖啡館相關的分類表列出來。這個的達成剛好跟首頁載入內頁的內文資料相反，所以要做好一點都不難，本來滿心歡喜的想說也可以把這個外掛給別人的部落格網站內，但是後來發現不成功，原因是 javascript 的 DHTML 資訊要交換必須在同一個網址才可以，可能是基於安全性的裡由吧！萬一我可以去改別人的網頁內容，不是天下大亂了。這點我就不繼續研究方法了，留待突發奇想的時候來解決。當然，可以有作法是把首頁寫成 HTML/javascript 的語法共用，這就是另外的想法了，這點我自己實驗過可行，不過已經是偏方了。

另外，還可以用 IFRAME 的作法然後把不並要的資訊不顯示，但是缺點是會有scrollbar 在右方，不符合畫面美觀的要求。

我想這篇就說明到這裡，若有說明不清的請在下面留言，我盡量回答，要這個版型範本的請留下您的email，我會用附件方式傳送，請大家要貼上範本的時候記得要把原來的範本備份起來，本人恕不幫人修改範本及debug，要自行修改的歡迎修改，也請告知您應用的網站在哪裡。記得改上之後要在 blogger.com 主控台的設定→格式→顯示文章數目的地方填上999篇文章即可，因為首頁要所有文章的標題資訊。

本文暫時中止回覆，請到新的這篇可以下載範本的文章去留言
http://nextservices.blogspot.com/2006/04/blogger.html