熱衷於blogger的人多半都帶有DIY改造的偏執，得了不把blog弄的很華麗就會死的病。畢竟這是自由度最高的BSP，不大改特改實在是對不起辜狗大神提供的免費午餐。這一路走來，從一開始看到什麼酷炫功能就胡亂加上，到後來越來越講究所謂的《讀者體驗》。我的改造之道漸漸趨向【不加不必要的東西】、【盡可能使用原生功能】，畢竟內容才是一個部落格的主軸，把邊欄妝點的花花綠綠實在有些譁眾取寵。
在NS近期的改造之道上，有幾個重點：就是追求載入極速、內容動態化、盡可能的強化讀者搜尋與閱讀的便利性。今天要教各位的這個小技巧，就是能把Blogger原生標籤與下方的Pager發揮淋漓盡致的動態載入功能。
如果有在碰blogger Hack的人一定有聽說過Hackosphere的Neo Template，這個可說是動態文章概念的始祖，它是透過讀取JSON的方式再用Javascript把內文格式給產生出來，誠如作者所說，這個模版超快、非常快、閃電霹靂快...
但是缺點也很明顯，作者捨棄了原有的部落格格式，透過JSON讀取所產生出來的內容會不完整（例如回應部份、還有後來blogger加入的評分、讀者觀感等新功能），再者全部透過Client端JS來作用，那麼只要碰到關閉JS的讀者，那整個blog就死掉了，因為種種原因而讓我覺得不是一個理想的呈現方式。
這當中NS也有試過hans的Table of content，還有Lvchen兄的標籤選台器2.0改造版，想讓讀者可以先快速瀏覽標題再決定要不要點選閱讀，不過成效普普通通，我想最主要是因為光看標題遠不如看文章摘要來的有吸引力。
這陣子因為blogger發佈了官方版的繼續閱讀功能，可以大幅縮減摘要文章的內容（以往的繼續閱讀只是用CSS把其他部份給隱藏，所以實際上在載入的時候還是會讀取這些html碼。官方版的則是直接在server端就把非摘要部份全部砍掉，Request回來的檔案會變清爽很多）；加上我最近裝的Lazyload功能可以大幅提升含大量圖片的網頁讀取速度；再加上我最近認真的玩了一些Jquery，有種任督二脈被打通的感覺（笑）
因此我腦中靈光一現，為什麼不用AJAX了方式來Load remote page，再把現有的某區塊給更新就好呢？這樣我也不用煩惱什麼JSON解析完還要重新Render頁面的鳥事啦。
嘖～講到這大概大家要一頭霧水了，各位不妨直接體驗一下吧。
首先可以試試內文標籤的部份，點下之後...
文章不見了，出現了loading的圖示...
ㄟ～原本點標籤會出現的頁面怎麼出現了？！而且網頁並沒有reload的閃動，只有在主欄位這邊有變動而已。
人客阿！這就是AJAX阿！AJAX不是只有搞CSS特效而已，非同步Request跟動態更新才是箇中精髓。
同樣的，最底下的PAGER部份也可以完美的做到動態換頁的效果，如此一來讀者就可以快速的瀏覽整個blog的文章摘要，或者是特定標籤的文章摘要了。
當然～標籤Widget也可以加上這樣的動態效果，附帶一題，blogger這邊已經有了原生的標籤雲了，而且還多了【選擇欲顯示標籤】的功能，NS強烈建議原本用第三方hack的人換回正版標籤雲阿 :P
拉拉雜雜說了一堆，大家一定迫不及待想知道這個hack是怎麼做的！
其實原理非常簡單，如果你仔細觀察的話就會發現點選標籤會到達的頁面，跟點選pager切換的頁面，有影響到的都只有主欄位這個區塊，而呼叫這些頁面跟PHP加上一些參數值去控制頁面的內容的方法有點相似。所以，我們可以利用Jquery的.load()功能，丟進特定URL，抓取該頁面特定名稱的區塊，再載入現有的區塊內，即可達到動態載入內容的效果。
以我的部落格來說，這些文章entry都是被一個.blog-posts的div給包起來的（這應該是內建模板的預設類別，如果你不曉得自己部落格是叫什麼，可以利用Firefox外掛Web developer的顯示元素資訊去找），所以步驟就是：
- 將欲使用動態載入效果的超連結先綁定click事件
- 當連結被點擊就會觸發寫好的function
- function第一步是先抓到連結的href，然後在後面加上".blog-posts"字串，以方便待會使用.load()
- 再來就是抓到現有頁面的.blog-posts div，然後使用.load()把內容灌進去
- （optional）如果想讓pager也能有動態載入效果，最好把底下的pager區塊也一併更新到新的連結
打完收工，流程就是這樣而已，沒幾行程式好寫，當然你要厚工一點像我還加入loading.gif來做讀取中間的緩衝也是可以，流程部份就加上先用.html()寫入圖片這樣...
程式碼部份，請先加入大家的好朋友jquery，我建議沒有空間的人可以直連google網路函式庫
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>再來就是在document ready之後加入click事件綁定
<script>
// AJAX link
$(".ajax-link").live("click",function(){
var url = $(this).attr('href');
var pagerUrl = url +" #blog-pager";
url += " .blog-posts";
$(".blog-posts").load(url);
$("#blog-pager").load(pagerUrl);
return false;
});
</script>這邊可以看出，NS是去找DOM裡面抓.ajax-link的連結，然後綁上這個事件function，所以只要連結有掛上這個類別都會觸發事件。至於.live()這是為了讓動態載入的pager，讓載入之後仍能有作用，如果單純用.click去綁事件的話，動態載入後就算叫.ajax-link的連結也會失效喔。
以上這些JS script請放在<head></head>裡，完成這步之後就來對template動點小手術吧！（對欲作用的連結掛上ajax-link的class）
請先打開小裝置範本：
- 首先是內文標籤部份，找到<b:loop values='data:post.labels' var='label'>，底下應該就是內文標籤的a tag了，加上class="ajax-link"。
- 再來是標籤Widget的部份，找到該widget的位置，裡面應該有兩個a tag，這取決於你是選原本的行列模式還是標籤雲模式，不過嫌麻煩的話就都加上class="ajax-link"吧
- 最後是Pager的部份，先找到<b:if cond='data:newerPageUrl'>，把底下的a tag掛上class，再下去沒幾行有<b:if cond='data:olderPageUrl'>，同樣的步驟。
NS只有針對這三種連結加入動態載入的功能，並沒有把全站的所有連結都掛上，原因是，在載入單篇文章含回應的時候，如果是使用內嵌式回應，則內嵌回應功能會喪失；另外，動態連結並不會更新網址列的網址，會造成讀者讀到某篇文章，上頭卻不是該篇網址的靈異事件，最後一點就是，其實我也想騙一點廣告刷新的閱覽數啦 XD 畢竟我的目的是要讓讀者可以快速瀏覽文章摘要，基本上這三種連結綁上動態載入就已達到我的要求了...
姆～教學大概就是這樣，請有興趣的各位自己試看看吧！有問題請各位同學自行發問～感恩
小提醒～記得一定要先備份template阿，免得改失敗了救不回來，壞了NS恕不負責 XD
18 回應:
我試了一下，真的很光速，有種更環保的感覺...大推
我只有一個問題，因為沒有換頁（AJAX），貌似無法使用瀏覽器的上一頁回到之前瀏覽的頁面。
還有，現在這個 hack 只有應用在標籤上嗎？如果文章連結也能應用，那真的就更順暢了。
LVCHEN
是的，因為AJAX的關係所以上一頁沒有作用...
另外這個hack當然可以應用在單篇文章上，只要把連結也掛上ajax-link這個class即可。但如同我在文末說的：載入單篇文章時底下的嵌入式回應會失效，變成一定要用另開視窗的回應模式。還有上面的網址列會跟當前的文章內容不符。
因為一開始的目的只是單純希望讀者在找文章的時候頁面不會重複refresh，所以才單純應用在摘要部份...
請問page的部份，我改成功後，按較舊的文章沒問題，但是換頁後最底下的較舊的文章和新文章還有home都消失了，沒辦法再按較舊的文章，請問怎麼會這樣？
就差這步了，其他改完使用上都很正常，
就page部分出問題○rz
kohaka，首先你要先確定你pager的div是不是跟我預設的一樣，如果不是的話可能要到模版去做設定或是更改一下我jquery的檔案，你把你blogger的位置給我我去幫你看一下好了...
http://kohaka.blogspot.com
這是我的blog，
雖然模版是套用別人的就是@@
http://www.templatesblock.com/2009/12/coabat.html#more
對了，我是套用這個模版
我發現問題了~ 是我自己在blog-pager裡多包了一個div tag，把js裡var pagerUrl = url +" #blog-pager div";改成var pagerUrl = url +" #blog-pager";即可 XD
你好，請問可以分享您的有話大聲說Widget製作方式嗎?感激不盡~
老吳你可以去看http://www.google.com/friendconnect
google friend connect，那個是其中一個留言版功能
感謝您的回覆，我昨天找到也裝了，可以是礙於他沒有暱稱欄位，常會造成匿名留言，最後還是放棄了...
關於您這篇文章，請問如果我已經將首頁圖片套用lightbox，有方法可以讓頁面載入時，圖片載入都套用這個loading效果嗎?
昨天上網找到這篇文章http://jqueryfordesigners.com/image-loading/，不過他的方式好像每張圖片都要套一次function，可以只修改lightbox裡面的程式，讓有套lightbox的圖片載入時也是同樣效果嗎?
我用的燈箱是http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
以上感謝您的回應~
您好，請問如何修改才能實現載入頁面之後自動回到頁面的頂端呢，感激不盡
在觸發ajaxlink的function裡加一行
document.getElementById('main').scrollIntoView(true);
其中main是你要跳至的div id，也可以設成header之類的，看你想定位到哪邊就設什麼囉
想請問你，這個可否應用到pixnet的blog
匿名:
這是Blogger專用的喔
請問像我部落格這種動態標籤雲是不是不適用？
因為我加了class後還是沒反應？
另外如果要加入loading.gif的話語法該怎麼寫呢？THX
動態標籤雲因為是別的js外掛~ 我要看了程式碼才會知道喔
loading gif的做法是在 .load()前用一個 .html把img tag寫進blogpost的div
我這有記載語法：
http://nebadd.blogspot.com/2009/02/flash.html
關於loading.gif，我參照你的語法但是出現錯誤？(因為標記 'div' 顯示在標記 'head' 內，所以您的範本無效。)
請問這問題在哪？您不也是寫在head內嗎？
張貼意見
非Blogger會員的朋友，請在"發表意見的身份"選單選用"名稱/網址"填入您的大名，這樣NS才知道該怎麼稱呼你喔 :)