我想要，寫一個 Blogger 外掛

加強型最新回應（七）自訂版型與我跳

2009-10-13T09:00:00.000-07:00

學會了 Javascript 的動態載入與 JSON-in-Script，所謂的 Blogger Hack 其實也差不多學完了，差的只有一些設計上的概念與經驗。

有著前人的研究經驗當範本，第一個完全屬於我自己的最新回應程式終於出生了！

雖然那所謂的 1.0 版，在現在看起來還真是有點丟臉，因為那充其量只是把前人的程式稍微換個寫法，再把載入 Script 的方式利用 jQuery 加持一下，最後再利用 jQuery 強大的 DHTML 函式，加上可以開關的功能，稍微美化一下而已。

話雖如此，但在發表了第一個版本（第一個發表的版本是 v1.4）之後，有些不小心逛進來網友似乎很有興趣，留言鼓勵了 LVCHEN，我知道這個版本的效率其實很不好，但是網友的鼓勵的確讓 LVCHEN 信心大增，更加確信這條 Blogger Hack 修改之路絕對是正確的選擇。

一直到了 1.6 版，我終於在既有的最新回應外掛的架構上，有了重大的突破。

有文章標題。
直接觀看完整留言。
上下頁自由切換。
可自訂版型（搭配無腦安裝）。
強大的「我跳」按鈕可以讓你直接觀看陳年的舊留言。

有文章標題就不用說了，我使用的還是傳統的比較法，但是在我的修改之下，順利的突破了標題讀取的數量限制，也就是說不再限於最新的 99 組文章標題，無論你有多少篇文章，都可以順利的讀取。

方法其實不難，我稍後就會提到。

至於「觀看完整留言」與「切換上下頁」只是 jQuery 與動態載入Script 的進階實做，一點秘密也沒有，真正突破其實是「可完全自訂的版型」。

我的想法其實很簡單，我在「我理想中的最新回應模組」曾提過數點我設計這個外掛上的一些概念，其中有絕大部分都是在版型上做文章，既然現階段版型是我的設計重點，那不如就專注的在版型的設計上設法突破。

而經過一段時間的體會，我發現其實每位格主對於自家的部落格都有一套另類的想法，對於外觀上要求常常是因人而異，與其不自量力的設計出一種所有人都會喜愛的完美格式，那麼倒不如提供足夠的元素與物件，讓大家自由的去設定自己喜歡的最新回應的樣子！

不過呢，對於自訂格式的推廣倒是費了不少苦心，還特別開發了專門的安裝程式來幫助設計格式，花費的心血幾乎比得上開發外掛本身了，這倒是我始料未及的。

最後這個「我跳」功能，也是動態載入的應用而已，相較於「可自訂格式」的工程浩大，就顯得有些微不足道，而且後來我才慢慢體會到，其實這個號稱『強大』的跳頁功能，其實還挺雞肋的，畢竟有誰會有事沒事的一直回顧幾百年前的陳年留言啊…

動態載入 Script 與 JSON-in-Script

2009-05-15T10:47:00.001-07:00

載入 Script 的問題我用了差不多一個星期總算解決了，你一定會想，花了一整個星期才解決，真是太遜了！

好啦，我承認我當時就是很遜啦，而且我要唸書時間不多，為了貪圖方便快速，我查閱的都是中文的網站，結果果然查不到...最後一用英文的關鍵字就找到了。

這讓我有種感覺，那就是我看到大部分中文網站很喜歡用 document.write 去做輸出，國外網站則很多用我後面介紹的方法，說不定就是因為專業又詳盡的 Javascript 中文資料庫實在是太少，專門解析與收集程式技巧的更是幾乎沒有，反觀國外的網站與部落格，這方面的資訊真是要多少有多少啊！

回到動態載入 Script 的問題上，解決這個問題對我啟發最大的就是這篇文章：

「Dynamically Loading External JavaScript Files」

該篇文章的作者 Moshe Moskowitz 遇到了一個需要動態載入外部 JS 的問題，於是嘗試寫了一段程式解決，卻遇到了錯誤訊息：『Undetermined string constant』！

其實他的錯誤只是少打了一個「例外字元」（還有人稱作脫出字元、逃離字元、落跑字元…恩，最後一個是我自己亂加的，反正就是 escape character, 「\」），所以瀏覽器在讀取程式時，就誤以為 script 標籤裡的 src 屬性是空的，並且沒有正常關閉標籤。

Moshe Moskowitz 將這種使用 document.write 動態載入的方式，稱作「靜態法」（Static Way ）。

為什麼稱作「靜態法」，原因當然是跟後面的「動態法」（ DHTML Way）作對比，接下來讓我介紹所謂的動態載入 Script 之「動態法」。

以上是 Moshe Moskowitz 的原程式，這個方法是利用了較新一代瀏覽器支援 DHTML 可以動態載入 HTML 標籤的特性，來動態載入 Javascript。

原理很簡單，首先利用「document.createElement」建立一個叫做「script」的標籤物件，然後對該物件指定 src 屬性，屬性設定完成後利用 appendChild 的方法把這個新建立好的「script」標籤加到 HTML 文件的「Head」標籤裡面，如此一來因為 DHTML 的特性，瀏覽器就會依照載入這個標籤物件的時機，動態的執行裡面的程式。

使用 document.write 的問題很明顯，就是很容易損毀版面，再來就是對於程式的維護非常的不便，尤其是當你同時使用了很多 document.write 搭配一堆條件、迴圈函式做輸出時，一旦某處出了問題，或是需要修改某個功能時，花去的時間絕對比 DHTML 的方法要多上許多。

當然這個方法也是有缺點的，那就是難以控制載入 script 完成的時機，不過這對於開發最新回應外掛影響不大，如果有人對於其他的 JS 載入方式有興趣，可以參考下面的文章：「四種動態載入 Javascript 的方法」以及 Eucaly61 的實驗「用 jQuery 動態載入 json-in-script 的作法」。

所以如此這般地，動態載入的問題終於解決了，還順便還學到了 DHTM 的一項重要應用，而在我的最新回應外掛裡，則是使用了下面的寫法：

var y_script = document.createElement('script');
var callbacksrc = 'http://lvchen.blogspot.com/feeds/comments/default?alt=json-in-script&callback=JSONfeed&';
y_script.src = callbacksrc;
y_script.id = 'jsonCommnets';
y_script.type = 'text/javascript';
document.documentElement.firstChild.appendChild(y_script);

用「firstChild」則是為了避免有些 HTML 文件沒有 Head 標籤而發生錯誤喔！

最後跟著要提一下 json-in-script。

因為客戶端的瀏覽器是無法主動下載文件，而本地端的程式更是無法跨過不同的網域去執行（如果可以就天下大亂了），所以 Google 為了讓使用者自行開發的 JS 套件可以在本地端取得 API 的資訊饋送，進而達成跨網域執行的目的，所以開發了所謂的 json-in-scrip。

我並沒有找到太多 Google 對於這套技術運行方式的說明文件，只有這個：

「Using JSON with Google Data APIs」

所以我也不能肯定這項技術到底是如何運作，但是我的推測如下：

載入 script 的同時去找 callback 函式 –>
將 callback 的函式傳到遠端伺服器 –>
對遠端伺服器要求特定資訊 –>
將 JSON 字串塞進 callback 的函式 –>
把這個 callback 與 json 字串合成體一起傳回到使用者的瀏覽器。

因為可以避開一些 cross-domain 的安全性問題，這個 json-in-script 帶給了 Google 服務的外掛開發非常高的便利性，讓外掛開發者可以直接在自己的網頁上修改，就能取得相關的資訊，並利用 JS 做相應變化，不然我猜我們就得使用 Google Gadgets Editor (GGE) 在伺服器端做這些外掛了。

加強型最新回應（六）我理想中的最新回應模組

2009-04-29T13:13:00.001-07:00

其實什麼 AJAX、DHTML、jQuery 這些東西，我剛開始也是一竅不通，不過有了堯大、水瓶子、阿土伯，我心目中理想的「最新回應」模組也終於龜速地慢慢成型。

曾有段時間因為陷入了程式的瓶頸，發文求助高手得不到高手們的目光關注，到高手們的部落格留言也沒人鳥我，高手的世界真是高高在上難以觸及，讓我甚至一度沮喪到想要放棄，還好有許多熱心的網友們一直鼓勵 LVCHEN，而在某個契機下終於幸運地讓我自己琢磨出解決問題的方法，突破的瓶頸。

關於這些程式設計上遇到的問題，我後面會慢慢的提到，現在就先讓我從設計的整體角度從頭說起。

基本上我想要的功能有：

在側邊欄操作
有文章標題
自由切換上下頁
可以分頁、跳頁
可以直接看到全文

萬事起頭難，不過有了設計的方向，再搭配上從前輩們那兒得到的經驗，我很快的就想出了一個大致上的模型。

＋ LVCHEN 於我理想中的最新回應模組留了言 – 2009-04-29
－ LVCHEN 於我理想中的最新回應模組留言說：「加強型最新回應就是強啊！」 – 2009-04-29

乍看起來跟現在的最新版本沒有什麼不同，但那僅僅是外觀而已，內在可是完全不一樣。

雖然我從水瓶子那得到如何加上文章標題的方法，但基本上這個所謂「加強型」是針對堯大的最新回應模組而改進，所以我一開始使用的範本其實還是堯大的最新回應產生器，於是我開始東貼西補，第一步就是把沒有標題的「最新回應產生器」加上文章標題。

水瓶子用的就是比較法，這個方法我一直用到 1.7 版，至於 2.0 之後則使用了更新的方式，這點我後面會再提到。

比較法很簡單：

首先，從 Blogger API 取回回應的 JSON 字串，將必要的資訊解析，存成全域變數傳回。
接著馬上對 Blogger API 發出第二個請求，取回文章摘要的 JSON 字串。
將必要的資訊解析後，與之前取回回應時的資料對照，找出該留言屬於哪篇文章。
把這些處理好的資訊組合起來，依照既定的模型組成「最新回應」，顯示於側邊欄中。
最後再加上開關留言等附加功能，搞定。

差不多就是這樣，不過水瓶子使用這個方法時，連續用了兩個 document.write 的輸出來存取 JSON 的 object，這點我非常不喜歡。

因為在 javascript 中， document.write 會在載入的時候同時寫入資訊到網頁中，雖然很方便，但卻非常容易在載入多個 Javascript 都使用 document.write 的狀況下發生錯亂，而且使用 document.write 的內容很難控制輸出的時機，修改或優化也頗有困難，對於物件導向的 Javascript 其實是很不利的一種寫法。

但是以我當時破破爛爛的 Javascript 技術，我根本不知道有什麼方法可以不使用 document.write 來載入 script，不過幸好有大神幫忙，這個問題只花了我不到一星期的時間就解決了。

加強型最新回應（五）阿土伯

2009-04-27T14:44:00.001-07:00

在我正式進入「加強型最新回應 1.0」這個主題前，我必須要先介紹另一個對我啟發很多的部落格前輩，他就是阿土伯。

只要稍微接觸過 Blogger Hack，或是開發外掛的朋友們，大概沒有人不知道阿土伯開發的Blogger 外掛 -- Blogger_ext2。

一個小小的 Hack 中，居然包含了許多高達 17 種以上的小程式（詳細的內容請參考「輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!」這篇文章），而且各個小程式以 plug-in 的的方式加入，也就是說 Blogger_ext2 其實是個可以無限擴充的超級外掛！

對於嚮往 Blogger 能夠成為包山包海什麼都包的部落格的網友，Blogger_ext2 無疑提供了新手們一個頗為完美的解決方案，網友 Josh 還幫這個程式寫了個「超級無腦安裝Blogger外掛功能」，只要簡簡單單幾個按鈕，幾乎所有想要的功能都可以輕鬆的裝上，這對於當時剛入門 Blogger Hack 的我，無疑是顆超級震撼彈！

可以說跟專業的阿土伯比起來，業餘的 LVCHEN 根本不算個咖，而到現在即使阿土伯已經不更新 Blogger_ext2，但所有的功能現在還是可以使用，只要注意有些功能與新版的 jQuery 有不相容的情況，改用舊版的 jQuery 就可以解決了。

（請注意：我寫的「加強型最新回應 2.0」必須使用最新版的 jQuery，如果想要兩支程式都使用，則必須同時掛入兩個不同版本的 jQuery，然後利用 jQuery.noConflict 修改提示字元，並同時修改 Blogger_ext2 或最新回應 2.0 使用到 jQuery 的地方，當然你要修改 Blogger_ext2 成相容最新的 jQuery 也行，這樣當然會比較好囉！這段看不懂的就跳過吧，反正有時魚與熊掌本來就難以兼得。）

jQuery 我也是從阿土伯那兒學到的，在這之前，我都不知道原來還有這麼方便的 Javascript Library，以前需要十多行才能完成的任務，現在只要網頁裝了 jQuery，往往只需要一行就能搞定，神奇的不得了，這對於當時正苦惱不知道如何下手，修改「最新回應」成為心目中理想的模組的我，似乎看到了以前想都不敢想的一絲希望。

感謝這些聰明有智慧的 Blogger Hack 大師們，大家除了豎起大拇指之外，也記得要到他們的部落格留下感謝的留言喔！

幻聽版的成吉思汗！讓我們一起向偉大的 Blogger Hack 前輩們致上最高的敬意，God Bless You! 阿土伯～

加強型最新回應（四）其實還是可以有標題

2009-04-17T10:19:00.001-07:00

『是故意這樣設計還是有什麼地方我改錯了？』

於是我回到堯大的部落格仔細一看，並沒有發現任何錯誤啊！

瀏覽了一遍留言，許多人只是沈浸在發現外掛的喜悅之中，好像沒什麼人提出問題耶？

Blogger Help 依然只有沒有意義的喃喃自語，所以我有點賭氣的問大神。

『你做夢！』大神的回答很直接，也很殘忍。

『可是明明最新文章的 Hack 就可以有文章標題啊！』我不死心的質疑...

『那你就自己把兩個 Hacks 結合起來啊！』？？！！＆％＄＠＃...

然後大神突然丟出一個連結，於是我來到了水瓶子的部落格。

疑惑終於解開，原來所謂 Blogger API 的資訊簣送端傳出的資訊中，部落格文章與部落格回應是分開的，而包含回應的資訊中並沒有文章的標題，而文章的 JSON 字串中只有回應的連結，並沒有內容。

圖片來源：水瓶子的部落格：程式設計 NEXT SERVICES

水瓶子的那篇文章就是討論要如何讓留言也能顯示標題，除了點出了問題的原因，也提出了可能的解決方案，不過文章裡提到的方案都牽涉到一些 JS 程式碼的技術，當時的我其實是有看沒有懂，而一直到了我真的開始寫這個「最新回應外掛」的時候，我才認真的去搞清楚他到底在寫什麼。

說到這，真的是要好好的感謝水瓶子，如果沒有看到這篇文章，如果沒有他實做的外掛啟發，「最新回應」是不可能完成的。

水瓶子在網站中提供了一個檔案連結，只要 Blogger 的使用者在部落格中，將這個 js 檔案以掛入的方式加在部落格中，就會自動顯示出如左圖般的最新的回應。

安裝的難度大概跟我後來設計的無腦安裝差不多，只是因為我的外掛可以設定的地方很多，所以才另外設計了那個安裝程式，如果不需要設定有得沒有的網友，也是可以找到外掛的連結，用同樣的方式掛入就行。

不過水瓶子的這個外掛有一點比較特別，就是他是以文章作為顯示外掛的順序，而不是以留言本身的順序來顯示，這跟一般我認知中的「最新留言」模組有很大的不同，當時我為了看懂這個外掛到底在秀什麼，傷了好一會兒腦筋呢！

於是我就把這個外掛下載回來，仔細的好好研究了一番，然後用我破破爛爛的 Javascript 功力，並加入了開始漸漸發紅的 jQuery，把它修改成屬於 LVCHEN 自己的外掛。

於是糊…里糊塗的，「加強型最新回應 1.0」誕生了！

加強型最新回應（三）就是覺得哪裡怪怪的

2009-04-17T09:46:00.001-07:00

說到搬家，不諱言的是我當時也有想要重建舊無名部落格的衝動，無奈衝動與實踐的能力有著無限大的距離，看似理所當然的想法，實際上根本沒有那種一放就能打敗大魔王的大絕招，不管怎麼修改，新的部落格就是跟舊的完全不一樣。

看來砍掉重練已經勢在必行，於是我乾脆自暴自棄的裝了一大堆奇奇怪怪的 Blogger Hacks。

網路上愛東改西改胡改亂改的還真是不少，什麼分頁、縮文、相關文章、亂數文章、邊欄開關...實在是很熱鬧！而且這些 Hacks 一改下去就常常一整個改很大，不過連我當時草包一個的 Javascript 功力，也看得出來很多 Hacks 根本是作者自己改爽的，有的程式碼沒有 commends 不說，變數也亂亂下，更麻煩的模板是套哪裡的也沒說清楚。

有些如 Neo 更是極端，炫到不行的代價就是整個模板都要換掉，雖然換頁快速瀏覽方便，但跟眾家外掛有嚴重的相容性問題，功力不夠的根本玩不起。

不過也就是因為玩的大了點，慢慢的被我玩出了一些心得，除了知曉了許多 Blogger Hacks 界的老前輩，也漸漸的體認到這個部落格系統有多強大！

乾淨沒有廣告，不會自毀模板、不會無預警刪文、無限的留言數量，外掛隨便你裝，不需要有錢才能得到 VIP 服務，幾乎沒有任何限制，簡直是無所不能，當我真的體認到 Blogger 的好處，這時我對於 Google Blogger 才算是正式的入門了。

那麼，讓我們重來一次...

歡迎來到「什麼都做得到」的 Blogger ^^！

於是，2007 年 3 月，「LVCHEN 的美國生活指南」在 Blogger 正式開張啦。

搬家後我仍是採用兩地同步更新的方式發文，所以常常新家舊家兩邊跑，複製來貼上去的簡單愉快，只是我總覺得，好像哪裡看起來有些奇怪。

稍微比一比，我就發現問題在哪兒了...

原來是 Blogger 秀出來的「最新回應」模組沒有文章的標題！

加強型最新回應（二）用 RSS 訂閱自己的留言

2009-04-08T15:04:00.000-07:00

佩服之餘，我並沒有就此滿足，依舊在茫茫網海裡搜尋，期待有更令人驚喜的發現。

很可惜的是，除了訂閱自己留言 RSS 這個更爛的方法，似乎當時並沒有什麼高人提出更精闢的見解。

不過我說個真心話，訂閱自己留言的 RSS 雖然聽起來有點蠢，但其實這可是非常簡單的方法，只要知道原來這世界上還有 RSS 這東西，就絕對不會失敗。

Blogger 可是很貼心的提供了留言的 RSS 資訊，只要新增一個叫做「資訊提供」的網頁元素，然後填入留言的 RSS 網址，存檔後就搞定了。

圖片說明：用「資訊服務」這個網頁元素也可以訂閱自己的部落格留言。

留言的 RSS 網址是：http://xxxxx.blogspot.com/feeds/comments/summary
只要把 xxxxx 換成你的部落格名稱就可以了。

很方便的方法，效果也不難看，最大問題出在更新的速度。

因為 RSS 資訊服務與部落格的更新有一點點的時間差，也就是說，當某位網友在你的部落格留言後，大約要 3 ~ 5 分鐘後， RSS 才能得到最新的資訊，有時伺服器忙碌時，最新留言的 RSS 可能得要數小時候才能出現。

除了更新不即時，把「資訊提供」當「最新回應」用時還有個致命的問題，那就是顯示留言的數量最多只有 5 篇，如果在短時間內收到大量留言，就很容易錯失某些重要的留言，如果部落格的主人忘了開啟留言 e-mail 通知，更是不可能知道誰在何時在哪篇文章留了言。

圖片說明：無名部落格的最新留言模組，圖片來源為彎彎的部落格

這「資訊提供」的原意是訂閱其他部落格的資訊，讓網友可以隨時追蹤喜愛的部落格的最新動態，在一般部落格平均每天最多 1 ~ 3 篇的更新速度下，這樣的設定其實是綽綽有餘，但以某些部落格動輒一天數十篇留言的速度來看，「資訊提供」用來作為追蹤留言就顯得有些不足了。

很有趣的一點是，根據我的觀察，其實無論是有名大站，還是愈來愈熱門的痞客幫，幾乎所有 BSP 的最新留言展示模組都有類似問題，也許他們也是透過類似的方式來製作最新留言模組吧，但我似乎很少看到有網友討論或是抱怨找不到留言的問題，我就常常留了言幾天後，想要看一下格主是不是有回應，結果因為根本不記得自己的留言遺落在幾樓，而浪費了好多時間呢。

總而言之，訂閱自己的留言是個簡單的笨方法，不過堯大的「最新回應程式產生器」也不難裝，所以在多次詢問大神無果，而當時搬家（當時搬家更麻煩）才是首要任務的狀況下，這個問題也就被我暫時拋到腦後。

加強型最新回應（一）第一個「最新回應」

2009-04-02T10:35:00.001-07:00

當點開「新增網頁元素」的連結，卻找不到一個叫做「最新回應」，或是「最新迴響」的元素，肯定讓許多剛加入 Blogger 的新手們傻眼吧！

三年前我剛從無名搬家到 Blogger 時，Blogger 的預設網頁元素還沒有現在那麼多，不像現在剛加入 Blogger 的部落客，大概要花上十倍的時間才會意識到，其實他已經不在無名＼痞客幫。

哈哈，歡迎來到「什麼都沒有」的 Blogger ^^|||

遇到這種狀況，我猜大部分人的反應大概有兩種，其中一種剛從無名維修、掉樣式、圖片消失的恐懼中稍稍振作起來，急切地想要找一個好用穩定安全好搬家有名氣的部落格系統，最好是可以調整樣式到跟原來的一模一樣，而那個聽說國外很有名、Google 掛保證的的 Blogger，居然「什麼都沒有」！

喂...這會不會太超過了啊！

這種人的結局不用我說，也許你還能在痞客、天空、PCHome 看到他們（別忘了無名可是案發現場），Blogger 對他們來說只是個美麗的誤會。

另一種是會在履歷表上寫著「精擅網路資料搜尋」的人，雖然無法遏止心底深處對 Blogger 鼎鼎大名的不以為然，但仍然存有答案必在 Google Search 第 N 頁的深深信賴。

Google 總算沒有讓我失望，於是一個全新的世界展開在我的面前，那就是 Blogger Hack。

當時許多人習慣把這種利用 Javascript 或是其他程式技術美化部落格的技巧叫做 Hack，而針對 Blogger 開發出來的 Hack，也就順其自然的叫做 Blogger Hack。

當時 Google 利用了一種叫做 JSON 的小玩意兒，讓大部分提供服務的伺服器都可以饋送一組包含資訊內容的代碼，你可以想樣一下整個部落格濃縮成「一行」Javascript 的字串，你可以輕易的拆解它、玩弄它、組合它，最後在讓這些資訊呈現出你想要的樣子，大抵而言這就是所謂的 Blogger Hack。

最新回應就是我接觸到的第一個 Blogger Hack。

雖然到現在我還是不知道第一個幫 Blogger 寫出最新回應這個小程式的人是誰，但我用的第一個最新回應是2006 年底，堯大在部落格發表的「最新回應程式產生器」。

這個產生器神奇的地方在於，只要輸入幾個簡單的參數，就會自動產生一組程式碼，而且還不只如此，你還可以預覽程式碼貼在部落隔上的效果，當時我看到的第一個感覺，就是強...太強了！

別笑我好傻好天真，當時的我只會亂屁一些 HTML 語法，能設個超連結很自以為很懂網頁設計，Javascript 不過買了本訪間的入門書就當作瞭解了，這種還會自動寫程式的產生器實在是太新鮮啦！

不過什麼都半桶水的我也懂把程式碼放進「HTML/Javascript」的網頁元素裡，然後存檔...搭拉...咦...只有出現「Loading...」是什麼意思？

看了留言才知道，原來當年的堯大這個產生器有些 bug，生出來的程式因為瀏覽器版本的關係，有時會不小心忘記把「postshow」這個參數設成空白，幸好我還懂得看留言討論，問題不用兩分鐘就解決了。