Blogger功能再加強(III):如果看 blog 像在用檔案總管分類：網路、部落格

當我看了zeelot 的版型，有點驚訝，是不是被轉址到google 的搜尋頁面，結果原來只是版型的修改， zeelot 跟我講了一個網址，有很多 blogger 的版型。

基本上，現今各大網站的部落格都提供很多以 CSS 為主修改版型的辦法，也有很多人自己修改分享給大家使用，但是，我似乎找不到以修改Javascript程式為主的版型設計網站。

目前，完成了兩個版型範本，一個是《討論區》，另一個是做出《分類標籤》及《最新回覆》的功能，都有實際在運作，這兩天，我又想到了一個應用，比較結合復古設計與實用性的考量，先把概念寫下來，希望我有時間完成。

我的概念是左方用 TreeList 來做分類表，TreeList用分類標籤及時間排列，加上一個 inputbox 讓使用者可以作全文檢索(跟Windows內建的搜尋功能相仿)，右方用 ListView 來顯示每篇文章的標題、時間、迴響、最新迴響時間等等，可以按下 ListView 的 Header 來做排序的功能，而右下方的位置就留給顯示HTML內頁來用了。

其實目前網站瀏覽最大的問題是每按一個連結就要到網站去拉一下資料，我上面這個概念大部分的動作不需要到網站去拉資料，而是資料已經拉到 Client 端，只是作好排序及搜尋顯示的工作，當然只有全文檢索這個功能需要去網站下載所有的資料。

昨晚實驗了一下 Javascript 應用 ActiveX 的元件，技術上是可以達成的目標。

1. 部落格的討論區應用：
http://newsfamily.blogspot.com

2. 部落格有分類標籤及最新回覆應用：
http://tripwriter.blogspot.com

3. 部落格就是一個檔案總管：
還在規劃中......

Blogger功能再加強(II)分類：網路、部落格

最近半個月用 Javascript 把一般部落客想要作的功能做出來後，很高興有些網友有興趣，老實講這個版型範本不是很容易了解，尤其是有含了HTML/CSS/Javascript/Blogger 的這些指令混合在一起，會搞得七暈八素，頭昏腦脹。所以我再寫點很雜的說明，同樣地，有興趣的人仍然可以留言在下方來索取這個範本。

1. blogger 的版型標籤的指令

blogger 這個平台的版型設計的指令很簡單，有兩種：＜＄.....＄＞及＜.....＞＜/.....＞，前者就是把必要的字串從你輸入文章的資料表各欄位取出來就是，或者是提供一些你在主控台設定的一些參數；後者的作用是提供一個＂迴圈＂或者是設定＂條件式＂

條件式常用的有三個，就是＜MainPage＞＜/MainPage＞ ＜ArchivePage＞＜/ArchivePage＞ ＜ItemPage＞＜/ItemPage＞ 就是如果系統在組首頁的時候，在 ＜MainPage＞＜/MainPage＞ 中間的資料會被組出來，如果在組彙整頁(ArchivePage)的時候，這些資料就會被忽略掉。

迴圈其實只有兩個指令＜Blogger＞＜BlogItemComments＞＜/BlogItemComments＞＜/Blogger＞。＜Blogger＞這個迴圈如果是在首頁(MainPage)組版就是全部的文章，如果在內頁(ItemPage)組版的時候，就是那篇文章而已。而＜BlogItemComments＞這個迴圈就是該篇文章所有的留言的迴圈。

這個其實我都是看 http://help.blogger.com 這個網站的說明學得的，只要有點程式基礎應該很容易看的懂。

2. 版型範本的分區

所以要看懂我寫的混亂版型，大概就要分區了，我稍微加了點註解，但不是很多，我分了 CSS/Javascript/Blogger/Sidebar 這幾區。

CSS區，如果只是要調整字型大小、顏色，或者主要顯示區的大小，甚至是要把 sidebar放到左邊去，這個只要調整 CSS 即可。

Javascript 區主要是把 Function 全部都集中在這區，當然大部分是 MainPage 內有這些 function，ItemPage 內也有一個 function是要通知 parent 用的。

Blogger 區就是剛剛上面提的要組版的時候的主迴圈，而這個區域仔細看，我又分了三區 MainPage/ArchivePage/ItemPage。

SideBar 區就比較簡單了，只有首頁會多幾個功能，統計文章數目、分類標籤及最新迴響的顯示，其他的無論在哪一頁就都差不多了。

3. 目前還可以加強的部份

其實我試了很多種方法，試圖讓這個部落格的首頁可以讓別的網站外掛資訊，類似 furl.net 這種方式，這樣的話在推廣部落格有很大的誘因，但是 Javascript 以及 DHTML 的安全性問題似乎無解，這個我想我就不要再玩了。除了用 IFRAME 的方式應該別無他法、不然也可以用 BASE HREF= 來騙騙瀏覽器，可是這樣似乎沒有什麼意義！

功能做的越多，你會發現介面會越複雜，如果不想把介面搞的很亂的話，有一招是可以有設定值，要如何設定呢？當然就只有利用 cookies 啦！把設定參數的網頁放在其中一篇文章，然後存在 cookies 裡面，然後首頁顯示的時候再讀出 cookies 拿來用即可，這樣是不是很炫，例如最新迴響要顯示幾篇，你的網站分類標籤要顯示多少，或者預設開幾篇內文，依照什麼作為排序的依據，這些都可以放在設定值裡面，甚至版面的顏色等等要個人化設定，都可以做得到。

另外還有很多人希望可以把留言迴響的輸入介面放在同一篇文章內，這點在 http://bloggerhacks.blogspot.com/ 網站就有實作的方法，不過我個人覺得 blogger.com 的留言介面就已經做的不錯了。

還有，目前的分類連結其實在內頁會顯示出來在標題的下方，如何加上＂連結＂讓瀏覽者回到首頁，顯示出該分類，或者是點了連結把該分類的文章全部顯示出來，這個其實已經不難做了，用 javascript 都可以很容易做出來。

暫時先寫到這裡，其實還想到可以做到的一堆事情，就留待版本2.0了！我也沒有多大的動力寫這些加強功能，還是多寫文比較實際。

幫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

部落格有關最新留言的外掛程式設計分類：網路

一直在玩部落格，雖然每一篇文章的最新回覆在不同部落格系統都有提供依照日期排序的功能，放在部落格首頁上讓人比較好找，可是 http://www.blogger.com 提供的服務硬生生就是沒有這個服務。

所以有不少人想了不少偏方來做，比較著名的作法是用 Javascript 搜尋出首頁所有的回應，然後用在顯示出來，這個製作的網址在 http://bloggerhacks.blogspot.com 但是缺點是必須讓首頁組版的時候把所有文章都組出來，這樣才能搜尋到所有的留言回應時間，這個我自己做了一個留言板的部落格實做出來，因為首頁組版如果含入內文，首頁組出來的檔案變的很大，不方便網站瀏覽者，所以我只抓了標題，這個網址在 http://newsfamily.blogspot.com ，有興趣要這個版型的人可以跟我拿，我可以免費送大家使用。

另外就是用外掛的方式，比較好用的應該是 http://www.haloscan.com 的服務了，但是也是有堆缺點，我不喜歡讓人讀留言的時候還要再開另一頁視窗，或是還要多一個 click，這樣非常不人性化，如果要再同一個頁面能夠顯示，這樣又要靠 javascript 的含入功能啦！一含入又得要負擔頁面載入過慢以及被植入病毒的風險。

所以，我又想到一招爛招，何不利用 blogger 的組版功能，把 template 抽換掉，然後寫出一個適合的 javascript 之後，然後再貼到一篇固定的文章去，這樣這篇文章就是有最新回覆的訊息了，當然做好之後要把原來的 template 再換回來。

不過，這個 template 是蠻好寫的，可是要部落客每天做這個無聊的動作實在很煩，又不會很即時的組版更新，理想的狀況是程式能夠自動做最好，要怎樣自動作呢？ blogger 的 API 可是有提供的，詳細可以看這裡 http://www.blogger.com/developers/api/ 當然寫這個程式一點都不難，難的是寫出來要除錯並且要全自動化完成還需要不少時間！如果有人有興趣要寫的，可以在下面留言，我再描述清楚點。

有關RSS的定位分類：網路、部落格

最近用RSS實作了一下部落格的分類，也用了一些 RSS 轉成 Javascript include 的工具，發現大家對 RSS 這個規格的定位其實大不相同的。

RSS 是 XML 的格式，以發布 RSS 機制的設計者來說，認為既然是電腦看的格式，所以比較舊的資料部份就要取用的人自己來處理就好了，所以 del.icio.us 這個網站提供的 RSS 只提供 31 則最新的分類標籤，如果要取用的人，可以把舊的分類存在 local 端就好。

最近在搞自動的 weblogwriters.blogspot.com 這個 RSSFeed2JS 的 javascript 的時候，數位之牆的 RSS 只有最新的一篇，本來想測試看看這個 Feed2JS 有沒有幫我存舊資料的功能，測試過後顯然沒有，也找了不少網站，目前為止除了給使用者看的 bloglines.com 或是 RSS Reader 這種軟體有提供之外，如果在 RSS 轉成 JS 的這個角度來想，只是單純的轉資料而已。

那麼，到底誰要存舊資料，資料要存多久，要存多少在資料庫裡面？

或許這也是一個新生意的思考，也或許美國已經有這類的網站了，找到再來試試看。也或許上下游都會做掉也說不定。

另外提一個發現，就是由於 RSS 的格式太過自由，所以當有 Blog 文章更改日期的時候，有不少 RSS Reader 常會把同一篇文章變成兩篇文章，這個應該是缺乏 PK 的緣故，最近 bloglines 好像有點改善，不知道是用什麼方法?