版面 Script 更新‧Ⅴ

最近才發現 Blogger 有 GData 可以玩，而且還隱藏很多秘密。

像是搜尋功能、瀏覽舊文章、訂閱 RSS / Atom 等等可以看到都有專屬的方式 (例如 /search?q=Text, /feeds/posts/default?alt=rss)，Google Code 上也只有寫說 Blogger 的確有 Data API 可以用，不過那看起來比較像是 XML-RPC，我現在要講的是應用越來越廣的 GData 輸出 JSON / JSON in script。

其實從訂閱文章就可以發現 Blogger 已經有提供一點東西了，例如 /feeds/posts/default 為 Atom 格式，加上 alt=rss 就變成 RSS 格式。如果網址改成 /feeds/comments/default 就變成近期所有回應的 Atom，是不是很方便啊 (還可以偶然發現 max-results 屬性控制輸出數量)。再進一步找找資料，可以發現它提供了 alt=json/json-in-script 方式，這會回傳一個 JSON 物件。後者更進一步提供了 callback 屬性設定可以直接把物件丟給指定方法處理。

如果觀看 GData 的說明，可以發現它很有條理，如此一來我們便可以傳送一些要求給 Google，而傳回來的東西我們再利用工具來分析取出想要的。在 Blogger 上我們就能作更多事情，例如剛才的 /feeds/comments/default 如果改成 /feeds/comments/default?max-results=5&alt=json 這不就是最近5個回應的 JSON 嗎？或者你可以用 /feeds/comments/default?max-results=5&alt=json-in-script&callback=showLatestComments ，利用 showLatestComments() 來接受並處理 JSON。這樣可發揮的空間更大！

其中有一個是我目前拿來用的： /feeds/posts/default/-/(類別名稱)?alt=json-in-script&callback=XXX，這可以用來搜尋同類別標籤的其他文章，說穿了就是其他類似文章的設計。只需要隨機抓取資料並排版印出即可。當然隨機重複和可能抓到自己的問題都要先解決。其他應用可以參考各項提供的參數想出其他更有趣的東西。

以下為程式碼擷取，注意這本來是一個物件，我將其關鍵程式碼取出，故標示方式略有差異，實際上也不能直接套用在您的部落格。純供技術展示，挑戰這樣。如果想要使用的，建議您可以利用估狗尋找其他已代為完成可直接使用的程式碼。

<br /> /* 觸發顯示同標籤其他文章 */<br /> <br /> triggerMoreArticles : function(labels) {<br /> var rLabel = labels[Math.floor(Math.random() * labels.length)]; // Random Choose<br /> var maxResults = 25;<br /> var GDataFeed = document.createElement('SCRIPT');<br /> GDataFeed.src = '/feeds/posts/summary/-/' + rLabel + '?alt=json-in-script&callback=Tthread.showMoreArticles&max-results=' + maxResults;<br /> document.getElementById('MoreArticles').appendChild(GDataFeed);<br /> },<br /> <br /> /* 顯示同標籤其他文章 */<br /> <br /> showMoreArticles : function(JSON) {<br /> var arrayEntry = JSON.feed.entry, arrayChoose = [];<br /> var rID, moreArti = document.getElementById('MoreArticles');<br /> var tmpTxt = '', tmpHref = '', thisHref = location.href.replace( / \.html.* / , '.html');<br /> var displayCount = 5; // 最多顯示個數<br /> var _maxResults = arrayEntry.length; // 實際可顯示筆數<br /> <br /> if (_maxResults == = 0 || _maxResults == = 1) {<br /> return; // 0 : 條件有誤, 1 : 只有自己<br /> }<br /> <br /> for (var i = 0; i < _maxResults; arrayChoose[i] = i++); // 填滿 Array [0 .. _maxResults - 1] (function(a, i) { for (var t, r, p = 0; p < i - 1; r = parseInt(Math.random() * (i - p)) + p, t = a[p], a[p++] = a[r], a[r] = t); })(arrayChoose, _maxResults); // Fisher-Yates Shuffle Algorithm if (_maxResults < displayCount) { displayCount = _maxResults; // 數量不足 } tmpTxt += '<div class="reply" id="rMoreArti"><input type="checkbox" name="MoreArti" value="delete" /> <span class="name">其他相關文章</span> [系統自動產生] <div class="quote"><ul>'; for (var j = 0; j < _maxResults; j++) { rID = arrayChoose[j]; // 直接取就是亂數 if ((tmpHref = arrayEntry[rID].link[0].href) == thisHref) { continue; // 取到本文 } tmpTxt += '<li>' + arrayEntry[rID].title.$t.link(tmpHref) + '</li>'; if (--displayCount <= 0) { break; // 已取滿 } } tmpTxt += '</ul></div></div>'; moreArti.innerHTML += tmpTxt; } // 呼叫法 Tthread.triggerMoreArticles(["Blogger", "JavaScript"]); 05/03: 改了一下隨機取出文章的方法，先生成順序的 Array 再利用 Fisher-Yates Shuffle 演算法打散， 接著依序取就不會取到重複的，就不需要再判斷有的沒的，這方法不錯，較有效率。 05/04: 突然想幫 Blogger 圖檔連結使用 ThickBox 來顯示，應該較美觀。不過試了幾遍發現 Blogger 十分機車。擋直連不說 (它的唯一可用參照頁是它產生的那個頁面...連網誌本身都不行)，連用 iframe 引用都會強迫覆蓋視窗。 雖然有利用 PHP 偽造 Referer 的方式要求，不過那樣會增加使用 PHP 伺服器的負擔及流量，想想只好用原始方式，頁面載入後逐一檢查連結是否連圖，是的話更改開啟目標為新視窗。 用估狗找了一下也沒人有具體解決方法，看來目前真的是無解啦。但假使成功了，thickbox.css 會改動預設的 padding 和 margin，也是會讓我十分不爽啊。維持現況吧。