2011年8月30日

Blogger「全文列表+讀者反應」(二)

A+
**** 2012.4.30 修訂:「全文列表+"讚"統計」的新版語法執行效率快上十倍,請使用新版語法Blogger「文章列表+快速顯示"讚"統計」__ 簡易安裝篇」 ****

一、準備動作

由於此系統架構在樹狀標籤之下,如果不需要樹狀標籤,可參考這篇文章「在Blogger上顯示文章列表及各個文章的facebook讚(like)數統計」,K大 的這個版本版面滿整齊漂亮的,適合文章按日期排列的方式;如果想用本文版本安裝樹狀標籤的話,可參考「讓Blogger的標籤能樹狀分類(一)(二)」,並請先執行以下動作:

1. 先將 Blogger 所有的標籤改為 "AAA-BBB" 的格式,AAA 代表大分類,BBB 代表真正的標籤名稱

2. 到 Blogger 後台 → 範本 → 編輯 HTML

3. 接著把下面的 Javascript 插入 </head> 的前面:

<script type='text/javascript'>
var Category_Name=new Array("休閒","理財","電腦")
</script>

(1) 以上紅色的字串請改為想要的大分類名稱(就是標籤格式 "AAA-BBB" 中的 AAA)。

(2) 要填入幾個大分類都可以,填入的順序就是在全文列表由上到下顯示出來的順序

(3) 字串必須放在雙引號內,每個字串用逗號隔開

如果不需要使用樹狀標籤的話,可不必執行以上動作,但須要修改部分程式碼。這部分就得參考「第一篇」的內容自行研究了。


二、主程式碼

以下程式碼請直接複製到一篇新的文章或網頁,貼上時請注意是在「修改 HTML」的欄位狀態(不是在「撰寫」狀態),張貼選項請選「按下 Enter 鍵以建立換行符號」、「解譯輸入的 HTML」,將最後一行 DR 的紅色部分改為自己 Blog 網址,按儲存即完成。


C~AE:收集原始資料

AG~AM:刪除重複字串

AQ~BL:分類原始資料

以上三段內容請參考「第一篇」的詳述,接下來要印出分類後的資料。


大分類標題:

BM:"Category_Name" 為自訂的大分類陣列,以此為第一層迴圈處理資料。

BO:印出大分類標題,此行的顏色、字體、分隔線等細項都可自行調整。


真正標籤標題:

BQ:"Main_Label" 陣列儲存了文章的 "AAA-BBB" 格式的標籤,之後把 "BBB" 字串抽出來,這是實際的標籤,以此為第二層迴圈處理資料。

BS~BU:將 "Main_Label" 拆解成大分類 "AAA" 存放在 "category" 變數;拆解成真正標籤 "BBB" 存放在 "label" 變數。

BW:當拆解後的大分類字串符合 "Category_Name" 時,這個 "Main_Label[b]" 才是需要的陣列,之後將這個陣列的所有資料全部印出。

BY:印出真正標籤當小標題,同樣,此行的顏色、字體等細項都可自行調整。

同時,此行讓小標題的所有文章有收合的功能,運用到 "hide" 以及 "swap" 函數。這兩個函數在「樹狀標籤(一)(二)」有介紹,可參考相關說明。

CA:設定收合功能時需要設定收合區域的起點,此行即是 <div> 區域的起點,且需要使用獨一無二的 id,剛好使用完整標籤名稱 "Main_Label[b]" 可為絕不重複的 id。


文章綜覽:

CD:設立第三層迴圈,準備將該標籤(小標題)之下的文章資料全部印出。

CF~CH:這幾行算是個人需求,將所有文章標題作處理,刪除不必要的字串避免標題過長。如果有需要刪除字串請自行置換字串內容,如果不需要刪除字串,請刪除這幾行

CJ:印出處理後的標題,當然文字、顏色、美化的符號等等可以自行調整。另外為了格式整齊加上 table 標籤,這標籤不一定要有。


讀者反應、「讚」、「+1」按鈕:

這三項工具能夠在單一網頁顯示不同文章的統計數據,最重要的關鍵是原始碼中必須有「單一文章網址」這個參數。因此,如果有其他的工具也想在全文列表系統中顯示,只要能找出原始碼是否有「文章網址」即可成功。

CL:印出「讀者反應」功能,"Url_Collect[b][c]" 取代了原本程式碼的文章網址。如不需要顯示此功能可刪除本行;如想顯示此功能,由於 "blog-post-reactions.g?options=" 後面跟著的一串亂碼,代表 WFU BLOG 「讀者反應」功能自訂的字串,這些字串得改成讀者自己 Blog 網頁「讀者反應」功能的字串才行。而這些亂碼如何更改,請參考「Blogger自訂讀者反應、「讚」、「+1」按鈕(一)」。

CN:印出「讚」按鈕,"Url_Collect[b][c]" 取代了原本程式碼的文章網址。

CP:印出「+1」按鈕,"Url_Collect[b][c]" 取代了原本程式碼的文章網址。

以上幾行為了版面整齊,加入 table 標籤控制位置,如有想要針對細項做修改,請參考「Blogger自訂讀者反應、「讚」、「+1」按鈕(一)(二)」。

CS:真正標籤(小標題)的文章全部跑完之後,設定 </div> 區域終點。


其他工具:

DB~DO:刪除陣列中重複資料的函數。

DQ~DX:隱藏某區塊的函數。

DZ~EC:切換顯示字元的函數。

EF:將 Blogger 的後台資料轉為 Json 格式,紅色部分請改為自己的 Blogger 網址。這一行的參數可以做很多的應用,有興趣請參考 Abin大 的「Blogger 資料來源用法與整理」。


後記:

若 Blog 裡的文章多的不像話,導致全文列表太長,或許有人會考慮讓文章列表預設不要展開,那麼就得將 CA 行的 "display: block" 改成 "display: none",並將 BY 行的兩種圖案 "➥","➷" 全部對調。而如果只想把特定的小分類預設不要展開,那就比較麻煩一點,得多加一些判斷句,這部分就請自行研究了。

最後特別需要注意的一點,新開一篇文章插入大量的 javascript 後,以後若是編輯文章時,一些程式碼會亂掉,因此此類文章最好儲存後不要使用編輯功能,比較好的方法是原程式碼備份,直接在原程式碼編輯,編輯完再貼到文章裡,否則 javascript 的效果通常會失敗的!!


參考資料:
Blogger 資料來源用法與整理
同「讓Blogger的標籤能樹狀分類(一)
同「Blogger自訂讀者反應、「讚」、「+1」按鈕(一)

6 則留言:

  1. 謝謝分享,不過因為我不是階層式的標籤,所以似乎沒有用。目前正在研究如何讓這個分類列表在我blog生效。
    真得非常謝謝。

    2011/11/17更新
    總算弄好了,把你寫的facebook的讚及反應整合到之前在網路上看到的另一個blogger hack文章列表中,如此也能簡單的顯示(只是有點醜)。但放到我blog實在是太慢了,因為我有300多篇文章,這個效能真得是慢得很可怕,所以目前沒有放到blog上。仍是很謝謝分享喔,我會持續追蹤你的blog的。

    回覆刪除
  2. 再更新。
    我加了讚的按鈕了,效能的話。。。
    雖然慢但還可以接受,真的是謝謝你囉。
    至於我怎麼改的,可以直接連我的網頁檢視原始檔。
    http://kuangtc.blogspot.com/p/blog-page_16.html

    再次感謝 m(_ _)m

    回覆刪除
  3. Re: KuangTC <6689578592823258164>

    哪裡,辛苦弄的工程有人肯用我很高興的 ^ ^ 因為最近在研究推噓文系統,比較沒時間看要刪掉哪幾行,可以讓非樹狀標籤生效。

    分享一下經驗好了,「讚」顯示得最快,再來是讀者反應,最慢的是「+1」按鈕,可以參考一下。

    只是文章一多後,覺得只有「讚」的顯示速度可以讓我接受,等推文系統弄好,說不定以後弄個只顯示推文數的文章列表速度最快。

    回覆刪除
  4. Re: KuangTC <4645066042942690527>

    你太客氣了,這樣我就不用另外想非樹狀標籤的修改;我有看到你 PTT 的 PO文,晚點把相關內容補充到本文,如果有需要的人就可以去你那參考一下;如果你有空把程式碼整理成文的話記得通知一下,好放個連結過去 ^ ^

    回覆刪除
  5. 報告WFU大大:
    文章寫好了,請參考謝謝。
    http://kuangtc.blogspot.com/2011/11/bloggerfacebooklike.html
    只是簡單的寫,如果覺得需要補充的,請再告知,謝謝。

    回覆刪除
  6. Re: KuangTC <512604765271308908>

    你速度好快啊~其實重點都有標出來(是我的說明比較囉唆一些),大部分人都只是直接套用而已,而且這個 hack 真正需要改的只有網址,我猜會去改細部的不多~最主要是程式碼秀出來,要用的人就比較方便了~

    BTW,我的推文系統搞好了,在每篇文章結束的地方,可以隨意玩玩看 ^ ^ 說明文章沒辦法很快,這個工程不輸私密留言...

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。