最新文章模組「終極版」
好一陣子都沒有更新這裡的文章，不是因為我偷懶，實在是不知道有什麼技術文章可以寫，尤其是 Blogger Hack，版面改得差不多後其實也沒什麼好調整的了。尤其是我不喜歡像某些人改樣板總要外引他人的 .js 去做，用起來好像很方便，但根本不知其所以然，尤其是該檔案裡面有些作者自己用的 Code 或是 Function，引用者常看都不看直接下載就用了（更狠的就是根本不下載、直接引用作者的連結檔案），不小心改爛樣板或是與其他 Hack 衝突就哭天喊地了。當然我多少也會肯定一些「懶人包」的作用，它們的確幫助很多人簡易地調整 Blogger 外觀功能，但我自己仍偏好修改程式碼，一方面有效率、又不用塞一些不必要的程式碼，另一方面我很清楚這些 Hack 的作用和功能，樣板比較不會改爛掉。廢話那麼多，主要還是提醒參考我 Hack 的人，除非很清楚你在改什麼，不然還是參考人家寫的教學文章來做，不要完全不懂改壞了才一直來求救，還劈頭就說「我什麼都不懂」。
關於「最新文章」的模組，相關文章我已經有兩篇，第一篇最單純，就是使用 JSON 來做、把 Feed 抓來的內容挑幾篇出來、依照格式作成列表，除了「最新文章」，依照引用的 Feed 網址，你可以把這個模組改成「最新回應」、「Blog 聯播」或是「主題推薦文章」。第二篇「其他最近的文章」，根據首頁需求做了調整，因為首頁也會顯示最新文章，另外掛一個「最新文章」模組好像怪怪的，所以我就調整顯示的篇數和起始點，首頁如果有五篇文章，那麼模組裡就另外列第六篇到第十五篇總共十篇的標題。而這一篇是根據網友的建議再做延伸，既然另外顯示了十篇文章標題列表，能不能參考 Neo 一些 Template 和 Hack 的作法、做出上一頁下一頁的連結，透過 JSON 不用重新 Load 整個頁面的好處，在該模組裡就能瀏覽所有的文章標題？我花點時間看了一下 Neo 的作法，其實不難，用我前兩篇的基礎加幾個函數處理上下頁的問題就好了，我覺得興奮的是，這樣修改的應用、可以套用在任何文章或留言列表、只要加個連結，讀者不用 Reload 就可以直接切換上下頁觀看搜尋或列表結果，進而改善瀏覽的速度和效果，這才是這個模組背後帶來的好處（不是單純提供最新文章列表那麼簡單）。
開始修改！在範本、網頁元素裡，請加入一個新的網頁元素 (HTML/Javascript)、或是直接編輯原有模組，直接塞入以下程式碼：
<div id="newPosts">
<noscript>failed!<br/>Javascript not supported here!</noscript>
</div>
<script>
var nPostStartIndex = 6;
var nPostShow = 10;
function showRecentPosts(nIndex) {
if (!nIndex)
nIndex = nPostStartIndex;
var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
var script = document.createElement('script');
document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
function generatePosts(json) {
function compareentry(a,b) {
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
return 0-order;
}
var sHTML = '<ul>';
var sortentry = json.feed.entry.sort(compareentry);
var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
for (var i = 0, Post; Post = sortentry[i]; i++) {
if (i >= nPostShow)
break;
var title = Post.title.$t;
var j = 0;
while (j < Post.link.length && Post.link[j].rel != "alternate")
j++;
var link = Post.link[j].href;
var timestamp=Post.published.$t.substr(0,10);
sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
}
sHTML += '</ul>';
sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
document.getElementById('newPosts').innerHTML = sHTML;
}
function generatePostLink(nFetch, nIndex, nTotalPost) {
var bOld = (nFetch > nPostShow);
if (bOld) nFetch = nPostShow;
var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalPost+'. ';
if (nIndex > nPostStartIndex)
sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts"><<</a> ';
if (bOld)
sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">>></a>';
sResult += '</p>';
return sResult;
}
</script>
<script language="javascript">showRecentPosts();</script>
直接存檔就好了。啥？那樣不是比用誰的教學文章更簡單更快嗎？而且，還不用改樣板原始碼？那是因為我把人家外引的 .js 檔裡面的宣告函式和呼叫直接寫在上面，總共有六十幾行（好多，比我的上一版多了一倍），用的方法和 Neo 大同小異，但程式碼至少比 Neo 少了四五倍（因為人家還有其他自用函式，不一定用在這裡的），單就以上功能上面那些就夠了。要使用本 Hack 前，同樣地請注意以上標紅的那幾行，照個人需求修改。變數 nPostStartIndex 是此模組要顯示的文章是從「第幾篇」開始，像我首頁顯示五篇文章，起始文章就從 6 開始，要從頭開始請設成 1 （尤其你用來顯示最新回應或其他 Blog 聯播時）。而 nPostShow 是該模組一次顯示「幾篇文章」的數量變數，預設是十篇。另外，在等待讀取的過程，以上範例我是用文字 "Loading" 顯示，如果想和我一樣改成動畫（其實是一個動態的 GIF 圖檔，有興趣可以去這個網站取用，多是免費授權使用的），請把範例程式碼裡第十四行 'Loading ...' 改成你圖檔連結的 HTML 程式碼就行了。同樣的，切換上下頁的連結，範例中是用 << >> 箭頭，當然也可以改成你喜歡的圖片。
有了上下頁，我想最棒的是，可以讓使用者跳到「某一頁」是最好，同時也列出「總共有幾頁」、「全部有幾篇文章」，不過就現在用 JSON 去逐篇拉出 Feed 裡文章標題和數量的方法，沒辦法一次就知道「總數」，分頁和顯示的問題也不容易處理，我知道還是有 Hack 好像能做到，但我還是偏好簡單、有效率又獨立安全的辦法。如果有找到，本文會再改個第四版「最後終極版」好了，哈哈～
本文引自 http://abintech.twidv.com/2008/01/blog-post.html
沒有留言:
張貼留言