2012年7月1日 星期日

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

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

Wayne Fu 0 A+

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


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

1. 「不連續x思考斷x面解構」、「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/AVvXsEjmwmcXeS9YOp9Z0d_jxME4c5K3R09KH-O1Y9GC4YAv98YxwUuqwi3pClT0_jGVUkMzoptgmybp7ZBzeaK9FgYt9__0C91bEa07m7IK18oaaGSYn1uAUA7DtqLjT1m_Yx6leZzH-4HRBFvr/s220/wfu-2s.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-W2pGpR3JY5c/UA99IsJnUkI/AAAAAAAADfE/IzADoe2Kbyk/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含以下看不到此效果),可自行更改此效果的參數。必需要自訂的參數為藍字 110108,其中 108 請改為自訂的圖片寬度;而 110 為整個圖片區的寬度,因為圖片的左右各加了 1px 的框線,總寬度成了 110。原本 110 這參數算是畫蛇添足根本不需要設定,但發現在 IE 下沒設 110 的話圖片會被擠成一根棒子,為了 IE 只好多此一舉;如果圖片需要加框線的話,請將 110 改為自訂的圖片寬度 + 2


四、Json 縮圖資料其他應用

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


更多實用工具:


最新文章模組「終極版」
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP