[小工具]Blogger 最新文章＋任意尺寸縮圖﹍Json 縮圖資料解析

(Pic from: designdownloader.com)2015.10.21 公告：此工具目前已更新到 V2 版，請前往新版安裝頁面：「Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS」。


改完「熱門文章縮圖」功能後，下一個要動手的便是「最新文章」加任意尺寸的縮圖功能。找了一些資料後發現：

1. 「0 與 1 謎詭世界」 介紹的 hack 需要「網誌文章資訊提供」設定為 "完整"：我個人的考量是，如此一來訂閱者不需上我們的網站就能看到全文內容，且文章內容很輕易地就被複製走，無法設防盜機制。(這個設定位於後台 → 設定 → 其他 → 允許網誌資訊提供)

2. Blogger 提供的最新文章小工具有縮圖功能：但這個小工具在「Blogger 轉址事件」後會受到影響，有的部落格可能會失效，且其縮圖雖能改變尺寸，但實為假象，只是按比例放大縮小而已。

所以花了點時間研究，是否一定要「網誌文章資訊提供」設定為 "完整"，才能讓最新文章有縮圖功能？以下為找答案的經過，想直接安裝本文的 hack 請跳「二、修改 Abin 最新文章模組」。


一、從 Json 資料找縮圖

根據「ABIN'S TECH NOTE」，Blogger 的後台資料可以使用以下的網址轉換成 json 格式(更多 json 知識：「Blogger 知識 (筆記)」 → JSON 相關)：

http://你的Blog網址/feeds/posts/類型?alt=json-in-script
當「網誌文章資訊提供」設定為 "完整"時，代表以上網址的 "類型" 參數使用 full 可讀取完整文章資料；當未提供完整文章資訊時，讀出來的資料最多到「繼續閱讀」的地方為止。於是我便測試了 summary 參數(只讀取文章摘要)能讀出什麼資料，拿 WFU BLOG 為例，在瀏覽器網址列輸入了以下網址後──

http://wayne-fu.blogspot.com/feeds/posts/summary?alt=json-in-script
我讀到了以下資料(只擷取「熱門文章縮圖」這篇文章的部分)：

{"$t":"141"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-1035379297949976554.post-4683953127496686390"},"published":{"$t":"2012-07-25T12:00:00.000+08:00"},"updated":{"$t":"2012-07-25T15:59:49.326+08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"電腦- Blogger Hack-小技巧"},{"scheme":"http://www.blogger.com/atom/ns#","term":"電腦- 部落格相關-網頁技巧"}],"title":{"type":"text","$t":"隨心所欲更改 Blogger 熱門文章縮圖的尺寸──兼談圖示製作技巧"},"summary":{"type":"text","$t":"\n(Pic from: psdgraphics.com, dreamstime.com, tubaba.com)Blogger 內建的熱門文章小工具，附帶了一個美觀的顯示縮圖功能，只要文章中有插入任何圖片的話，Blogger 會抓取第一張圖片轉換為縮圖。不過這個小工具的縮圖功能還是有一些限制，例如──\n\n1. 從 Blogger 上傳或是 Picasa 圖床的縮圖可以正常顯示，以外的圖床則無法 100% 保證全部顯示。\n2. 縮圖的尺寸固定為寬 72px，長方形的圖通常會被裁切成正方形，導致圖案不完整。\n3. 文章中沒有任何圖片時就無法顯示縮圖，且無法使用替代圖片當成預設縮圖。\n\n關於第 1 點，自家產品的相容性當然較佳，想避免意外只能盡量不外連其他圖床；而本文的內容就是針對第 2、3 點來 hack。想直接修改程式碼可跳到「三、修改有縮圖、無文章摘要的程式碼」，"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://wayne-fu.blogspot.com/feeds/4683953127496686390/comments/default","title":"張貼意見"},{"rel":"replies","type":"text/html","href":"http://wayne-fu.blogspot.com/2012/07/popular-post-thumbnail.html#comment-form","title":"0 個意見"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1035379297949976554/posts/default/4683953127496686390"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1035379297949976554/posts/default/4683953127496686390"},{"rel":"alternate","type":"text/html","href":"http://wayne-fu.blogspot.com/2012/07/popular-post-thumbnail.html","title":"隨心所欲更改 Blogger 熱門文章縮圖的尺寸──兼談圖示製作技巧"}],"author":[{"name":{"$t":"WFU"},"uri":{"$t":"http://www.blogger.com/profile/12708224105348267539"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FNrmhgh5zdXVwn4y8M88COg4AvQWOSIsi9JcJujpKmmyQxnFpTh4A_vuGBb8OHd_-0sGMOvF2ris6wChpTV_DBmzgwa2kjZu3mmjaC9SmAYN1cdgOrlm6U_qE1OprTmJg7dCDmgX6PBG/s220/wfu-2s.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSUtQxNKKILaABpTrnxFBdpIRHYnu_Oad4O_jsbzAC-pr6JV0prkrtagZ8BtMjXNeDK2oR-lVbAPRomzMm6hsPzWwzNTczNFCJGaa4aNb4_NcGFdb9pI9DCjV3vl3vu7EF_AGSx_Gjmy5q/s72-c/popular-post.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1035379297949976554.post-7088028120120333461"},"published":{"$t":"2012-
簡單說明一下，json 資料裡面紅字的 entry 陣列，裡面儲存了所有文章資料，每篇文章的第一筆資料都是以綠字的 id 為開頭。

我想找看看在 summary 參數之下，json 會不會儲存文章裏的圖檔，於是搜尋 popular-post.jpg 這張圖檔，結果發現了藍字的部分正是該篇文章的縮圖網址──網址內有 s72-c 這個參數，如果有看過「熱門文章縮圖」的話應該對這個參數不陌生，這正是 Blogger 儲存縮圖的參數；但在以上的資料區段無法找到該篇文章的正常圖片網址。所以答案出來了──

1.「不連續x思考斷x面解構」的原理是利用 full 的模式 json 能讀取全文的圖片資料，當抓不到縮圖資料時，依序搜尋文章中的第一張圖片網址，自行轉換成縮圖。

2. 雖然在 summary 的模式之下，json 不會儲存任何文章內的圖片資料，但會儲存縮圖資料，只要我們依照「熱門文章縮圖」的開頭所提，文章內的圖片是從 Blogger 上傳、或是連結 Picasa 的圖床，那麼 Blogger 便會自動將文章內第一張圖轉為 72px 的正方形縮圖，就算我們沒有將「網誌文章資訊提供」設定為 "完整"，也能在 json 資料裡面讀取縮圖資料。

3. 從以上的 json 資料可以看出，縮圖網址儲存的位置為：json 資料 → entry 陣列 → media$thumbnail 物件 → url 字串，瞭解這一點後就可以使用 javascript 來讀取資料了。



二、修改 Abin 最新文章模組

我的最新文章模組是使用「Abin 版本」，雖然介面陽春但程式碼簡潔、執行效率高，要自行擴充功能很容易，「不連續x思考斷x面解構」便是從 Abin 版修改的，不過他是針對自己的圖床 flickr 來優化、且要求「網誌文章資訊提供」設定為 "完整"，所以我就自己來改 Abin 版本，結果發現這個修改還滿簡單的，其實並沒增加多少程式碼，只要你文章內的圖片也是從 Blogger 上傳或是 Picasa 圖床，就能用這個 hack 來更改實際的縮圖尺寸，其他圖床只能依比例放大縮小而已。請依以下步驟──

1. 如果已經安裝過 Abin 版最新文章，請用以下程式碼將原程式碼覆蓋；如果沒有安裝過的話，請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：


存檔後即可，想先看效果可參考右邊的側邊欄，選擇熱門文章旁的最新文章。


三、程式碼及參數說明

以上程式碼黑字及綠字部分為原本 Abin 版本，紅字及藍字部分為新增縮圖功能的程式碼。

F：設定最新文章起始的編號，Abin 預設為 6，代表從第 6 篇文章開始顯示；而我是設定為 1，從第 1 篇最新的文章開始顯示。

G：設定一次顯示的文章篇數，Abin 預設為 10，代表每跳一頁讀取 10 篇文章；而我自己是設定為 5，每頁顯示 5 篇文章。

N：Abin 原文有提到，Loading <blink>...</blink> 是資料載入前的讀取緩衝畫面，可改為自己想要的動畫。

AI～AN：這裡就是讀取縮圖資料的位置了，如果瞭解「一、從 Json 資料找縮圖」第 3 點的話，這裡就看得懂了。

AL：這裏的概念跟「熱門文章縮圖」一模一樣，把縮圖的 72px 寬度改成自己想要的圖片尺寸，並且乘上兩倍(讓圖片放大後不失真)，由於我想要的縮圖寬度是 108px，因此藍字部分的參數我填入 s216，請把 s216 改成你要的圖片寬度的兩倍。

AN：本行讓文章沒有縮圖時，仍然能顯示預設圖片的網址，請把藍字的圖片網址改成自己的預設圖片網址。

AU：本行為 Abin 預設的文章顯示格式，裡面有顯示文章日期的參數，但為了不影響美觀我沒有使用日期的參數。由於本行我標示為註解以供參考，如不需要可刪除此行。

AW：我把文章顯示格式改為此行，左半部為圖片、加上虛線框及陰影(IE8含以下看不到此效果)，可自行更改此效果的參數。必需要自訂的參數為藍字 110 及 108，其中 108 請改為自訂的圖片寬度；而 110 為整個圖片區的寬度，因為圖片的左右各加了 1px 的框線，總寬度成了 110。原本 110 這參數算是畫蛇添足根本不需要設定，但發現在 IE 下沒設 110 的話圖片會被擠成一根棒子，為了 IE 只好多此一舉；如果圖片需要加框線的話，請將 110 改為自訂的圖片寬度 + 2。


四、Json 縮圖資料其他應用

瞭解 Json 的縮圖資料讀取方式後其實非常的好用，因為文章縮圖能做的應用很多，諸如首頁文章輪播、相關文章、隨機文章等等。因此，下一篇的主題將介紹如何進行「相關文章縮圖」功能的 hack，而不必求助於 LinkWithin 等外掛程式。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理

最新文章模組「終極版」