2011年9月1日 星期四

[教學]將 Blogger「標籤」小工具放在導覽列實作

Wayne Fu 0 A+
一、前言

Blogger 的留言系統不彰,功能陽春到無以復加,要擁有心目中的理想功能至少得安裝 DISQUS。不過,比起炫麗花俏但吃資源的外掛功能,WFU 更在意系統的執行效能,因為對讀者而言,相信擁有簡潔友善且載入迅速的閱讀環境比較實際一些。因此,一些 Blogger 的雜七雜八外掛安裝一陣子之後就被卸載了,但是想要擁有想像中的功能就得自己動手 hack 了。

對於一個 Blog 開張時連 javascript 都不懂的人來說,這可是十分艱鉅的任務,還好有多位巨人的鉅作可供引領,長期下來從各個小地方東駭西駭竟也摸索出個雛形,慢慢也能站在他們的肩膀上架構出一個留言系統。以下預計分四篇來回顧自己的建構歷史,也算是當作一個記錄,因為沒寫下來的話,當初很多語法、構思其實自己回過頭看常常都看不懂。


二、作者回應功能

一個能夠在眾多留言中插隊的「作者回應」是十分必須的,對於曾在 Blogger 的陽春架構之下留言的人,相信能夠快速找到回應自己的留言,是非常感動的。而 Sean 大的「讓 Blogger 的意見回應可以有作者回覆」是目前看到「作者回應」功能中最經典的一個,對於想有此需求的人可說是必裝之功能。

請按照 Sean 大的網頁安裝,且建議使用「ar.js」外連檔案來安裝(免費的程式碼存放空間可參考「Google Code 簡易使用教學」),不要將一大串程式碼全部複製到範本裡,因為壓縮過的程式碼不利閱讀且日後不易修改,另外第二篇還需要 hack 作者頭像功能;而「ar.js」其他相關的 hack 為了閱讀便利,也一起放在下一篇。


三、留言編號

留言編號的重要性在 Abin 大的「增加文章留言回應的編號」已經闡述過,讓留言有個索引,除了利於讓作者以外的留言者互相回覆,而且還有很棒的應用:日後引用資料方便。有時某些留言很有價值,但是沒有留言編號時,不但這些有價值的留言不易引用,日後更是查找困難。

WFU 的應用是在「2011 BLOG 更新紀要索引」這樣的一篇索引文,每當有價值的留言出現便記錄在這篇文章。由於在 Blogger 的搜尋系統無法搜尋留言內容,但是將留言索引記錄在文章內,Blogger 就搜尋得到了

言歸正傳,要有留言編號其實不難,參照 Abin大 的教學,只要在留言的迴圈之內插入 javascript 就可以辦到。但我沒有用這個 hack,因為沒有這個 hack 的某些需求,而我的需求正是該文 "回應 # 27" 老吳 提到的「將作者回應」跟「留言編號」結合的 hack。可惜 Abin大 可能有將近兩年沒有回文了,所以這個小 case 就 WFU 自己來想了。

請參考 Abin大 的原文概念,到 Blogger 後台 → 範本 → 編輯 HTML。接著確定好自己要放留言編號的位置後,安裝以下程式碼:


B~D:這段程式碼請放在 </head> 之前。

C:"comment_index" 是留言編號的變數;"plus_zero" 變數是為了美觀,是幫個位數補個零,如果不需要可以省略這個變數。

G:以下程式碼請參考 Abin大 原文,置放的位置必須在 <b:loop values='data:post.comments' var='comment'> 的迴圈之內

******** 2011.10.15 增補 ********
k哩於【留言 #02】表示 Abin 大的作者回覆功能失效。經 check 後發現,Abin大 的作者回覆在判斷 "留言者" 時,會去抓取 "留言者暱稱" 的前後字串,因此若把「留言編號」程式碼的位置放在 "留言者暱稱" 前後,會導致作者回覆功能在 "判斷留言者" 時,把 "留言編號" 的字串一併當成 "留言者暱稱" 了,所以只要是新的留言,作者回覆的功能就會當掉了,而舊的留言不會。

結論:H~S 行的程式碼請勿放在 "留言者暱稱" 的程式碼前後,以避免作者回覆功能判斷錯誤。
*************************************

H:這行程式碼解釋起來,都可以開一篇文了,因此下個大標題再解釋。目前請先理解這一行隱含的意思為:「如果發這篇留言的人不是文章作者」,就執行之後的程式碼(印出留言編號)。這一行的紅字部分,請參考下一節「四、判斷留言者是否為文章作者」的方法,置換為自己的個人簡介網址。

不過,如果沒有安裝「作者回應」功能的話,想讓每篇留言都有留言編號,請將 H 行與 S 行刪除

I:設定留言編號的字體、顏色、位置等,可自行調整。

L:留言編號加一。

M~N:"&lt;" 代表 "<" 符號;的如果留言編號小於 10,個位數前面就補個 "0" 比較美觀。

如不需要補 "0",M~N 行請刪除、O 行的「plus_zero」改成「comment_index」。

O:印出留言編號的樣式,可自行調整樣式。

以上「作者回應」+「留言編號」的效果可參考「三國志11 留言板」。


四、判斷留言者是否為文章作者

這個章節的內容是用來解釋上一段程式碼中的 H 行判斷式。關於「判斷留言者是否為文章作者」這個難題,Abin大 在「作者和一般回應的標示區別」這篇文章中尋求過解答,可先參考過這篇文章好先有個基本概念。他在該文與眾多留言者討論之後的結論是:「關閉留言者頭像」可以避免和他的判斷式衝突,如果想要不衝突得等他有空研究。

從他們討論的判斷式看來,尚未找到精準判斷留言者是否為文章作者的條件句,因為有可能留言者跟文章作者都有 Blogger 帳號,且是同一個暱稱,而「關閉留言者頭像」對版面美觀可是扣不少分。既然 Abin大 沒空,那麼這個 case 還是自己想吧。拿出 Blogger 的官方說明書來翻一翻,看看有什麼點子可用。從「版面配置資料標記」這個網頁,看到 "Blog Posts" → "posts" → "comments" → 「"authorUrl": 如果不是匿名意見,則為意見作者個人資料的 URL。」由於 "authorUrl" 存放文章作者獨一無二的參數──個人簡介(profile)的網址,把它拿來當判斷句應該就可解決問題了。

首先我們要找到自己 Blogger 帳號個人簡介的網址,最簡單的方法就是以 Blogger 帳號登入後,發一篇測試留言,接著該篇留言應該會顯示自己的「頭像」及「暱稱」,滑鼠對著「頭像」或「暱稱」點下去後網頁就會跳到自己的個人簡介網址了

因此,H 行紅色的部分是 WFU 的個人簡介網址,請置換為自己的個人簡介網址,沒改的話這個判斷句可是一點作用都沒有喔!


Ok, 第一篇的問題已經解決了,由於 Sean 大的「作者回覆」功能沒有頭像的語法,下一篇除了要加入頭像,還要讓各種身份的留言者頭像都可以顯示。

Blogger 各種身份頭像顯示+尺寸變更


參考資料: 
讓 Blogger 的意見回應可以有作者回覆
增加文章留言回應的編號
作者和一般回應的標示區別
版面配置資料標記
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP