[測試文]Blogger hack: AJAX LOADING 動態文章
James.L
熱衷於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的閃動，只有在主欄位這邊有變動而已。
同樣的，最底下的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網路函式庫
再來就是在document ready之後加入click事件綁定
這邊可以看出，NS是去找DOM裡面抓.ajax-link的連結，然後綁上這個事件function，所以只要連結有掛上這個類別都會觸發事件。至 於.live()這是為了讓動態載入的pager，讓載入之後仍能有作用，如果單純用.click去綁事件的話，動態載入後就算叫.ajax-link的 連結也會失效喔。
以上這些JS script請放在裡，完成這步之後就來對template動點小手術吧！（對欲作用的連結掛上ajax-link的class）
請先打開小裝置範本：
- 首先是內文標籤部份，找到
- 再來是標籤Widget的部份，找到該widget的位置，裡面應該有兩個a tag，這取決於你是選原本的行列模式還是標籤雲模式，不過嫌麻煩的話就都加上class="ajax-link"吧
- 最後是Pager的部份，先找到
NS只有針對這三種連結加入動態載入的功能，並沒有把全站的所有連結都掛上，原因是，在載入單篇文章含回應的時候，如果是使用內嵌式回應，則內嵌回應功能 會喪失；另外，動態連結並不會更新網址列的網址，會造成讀者讀到某篇文章，上頭卻不是該篇網址的靈異事件，最後一點就是，其實我也想騙一點廣告刷新的閱覽 數啦 XD 畢竟我的目的是要讓讀者可以快速瀏覽文章摘要，基本上這三種連結綁上動態載入就已達到我的要求了...
姆～教學大概就是這樣，請有興趣的各位自己試看看吧！有問題請各位同學自行發問～感恩
