(Pic from: softicons.com,freepik.com,all-free-download.com)一方面「原版本」 發現了一些 bug,因此需要出更新版;一方面也是讀了「Javascript 設計模式」 之後,剛好來練習新的 Javascript 撰寫模式,例如只用一個全域變數、規律的空格與縮排、集中 var,以及後面章節會提到的 HTML、CSS、Javascript 分離。由於撰寫模式變動很多,本篇的程式碼可說是近乎重寫。
如果需要顯示最新留言的文章標題,請參考另一個版本「
Blogger 最新回應+留言者頭像+文章標題」
一、修正 bug 及更新要點
1. 刪除內容之留言:前陣子發現在原版本之下,若 "留言內容" 被「留言者」或「站長」刪除,但該則留言尚未被站長永久刪除時,最新回應的某個變數讀不到資料會導致當掉;本更新版修正了此 bug。
2. 含超連結之留言:在原版本之下若留言內有超連結,且留言摘要結束處截斷了超連結語法,會造成最新回應的該則留言與下則留言顯示格式錯誤;更新版修正了此 bug,且顯示留言全文時,超連結仍可正常作用。
3. 處理無留言的狀態:若部落格一篇留言都沒有時,原版本會顯示 "讀取中" 的動畫圖案,且永遠不會停止;更新版修正了此 bug,並加上 "目前尚無留言" 字樣。
4. 新增留言全文開合功能:按下留言內容、或各處的提示開合圖案,均可方便迅速的開合留言內容。可看右邊側邊欄的「最新回應」小工具測試效果。
5. 改變留言頭像圖案的真實尺寸:前陣子使用 Google 的「PageSpeed」測試網頁讀取速度時發現某些留言者的頭像圖案檔案很大,雖然原版本有將頭像 img 圖案的 width 參數改小,但實際上網頁還是會去讀取原本尺寸的圖案,因此會拖慢載入速度;更新版可自動將頭像圖案的 "真實尺寸" 改小。
二、安裝程式碼
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
1. 如果裝過「原版本」的話,請用以下程式碼將原程式碼覆蓋;如果沒有安裝過的話,請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:
- <div id="RecentCommentsArea"></div>
- <div id="RecentCommentsInfo"><a href="http://wayne-fu.blogspot.com/2012/10/recent-comment-avatar-update.html" rel="nofollow"><img src="http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/s1600/info.png" width="20"/></a></div>
-
- <style>
- #RecentCommentsArea i {
- color: #aaaaaa;
- font-size: 80%;
- float: right;
- }
- #RecentCommentsArea a, #RecentCommentsInfo a {
- text-decoration: none;
- }
- #RecentCommentsArea span {
- cursor: pointer;
- }
- #RecentCommentsInfo {
- font-size: 85%;
- }
- </style>
- <script>
- var rComment_prog = {
- startIndex : 1,
- showComment : 5,
- summaryLength : 25,
- headWidth : 35,
- blogger : "http://4.bp.blogspot.com/-81dIbOmU9O4/UB_ufwAvb0I/AAAAAAAADj8/1Y4HFMVzx4Q/s70/blogger.png",
- openID : "http://1.bp.blogspot.com/-sI74_lyKtUE/UB__t_YIVMI/AAAAAAAADms/X_25WXcYZhk/s70/openid.png",
- anonymous : "http://lh6.ggpht.com/-8b_QSmcAiz8/TmWrENJMzqI/AAAAAAAABt0/GAO_bFrH-iA/s70/noname.jpg",
- serialText : "編號",
- totalText : "總共",
- openLogo : "︾",
- closeLogo : "︽"
- };
- rComment_prog.fetch=0;rComment_prog.total=0;rComment_prog.dg=function(a){return document.getElementById(a)};rComment_prog.linkColor=function(b){var e=rComment_prog.dg,c=(b==1)?e("rc_swap0"):e("RecentCommentsArea"),d;if(c.currentStyle){d=c.currentStyle.color}else{d=window.getComputedStyle(c).color}return d};rComment_prog.event=function(a){var l=rComment_prog.total,k=rComment_prog.dg,b=rComment_prog.linkColor,g=b(1),m=b(0),e;for(e=0;e<l;e++){var c=a+e,d=k(c),h=d.previousSibling,j=h.previousSibling,o=function(q){return(function(){rComment_prog.toggle(q)})}(c),f=function(){this.style.color=g},p=function(){this.style.color=m};h.style.cssText="display: none;";d.onclick=o;h.onclick=o;j.onclick=o;h.onmouseover=f;h.onmouseout=p;j.onmouseover=f;j.onmouseout=p}};rComment_prog.toggle=function(a){if(typeof a!="number"){var e=rComment_prog.dg(a),d=e.previousSibling,b=d.previousSibling;if(d.style.display=="none"){rComment_prog.swap(1,e,d,b)}else{rComment_prog.swap(0,e,d,b)}}else{var c=rComment_prog.total,f=rComment_prog.dg,e;for(i=0;i<c;i++){n="rc_swap"+i;e=f(n);d=e.previousSibling,b=d.previousSibling;if(a==1){rComment_prog.swap(1,e,d,b)}else{rComment_prog.swap(0,e,d,b)}}}};rComment_prog.swap=function(a,d,c,b){if(a==1){b.style.display="none";c.style.display="inline";d.innerHTML=rComment_prog.closeLogo;d.title="收起留言"}else{c.style.display="none";b.style.display="inline";d.innerHTML=rComment_prog.openLogo;d.title="展開留言"}};rComment_prog.init=function(a){var c=rComment_prog.dg,d,b;if(!a){a=rComment_prog.startIndex}c("RecentCommentsArea").innerHTML='<div style="text-align: center;"><img src="https://lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif"/></div>';d="/feeds/comments/default?orderby=published&start-index="+a+"&max-results="+(rComment_prog.showComment+1)+"&alt=json-in-script&callback=rComment_prog.main";b=document.createElement("script");b.setAttribute("src",d);b.setAttribute("type","text/javascript");document.documentElement.firstChild.appendChild(b)};rComment_prog.switchPage=function(b,a,f){var d=rComment_prog.showComment,e=(b>d),c="";b=e?d:b;c+='<p><div style="text-align: right;"><a href="javascript:rComment_prog.toggle(1)" title="留言全部展開">'+rComment_prog.openLogo+'</a> <a href="javascript:rComment_prog.toggle(0)" title="留言全部收起">'+rComment_prog.closeLogo+"</a> ";c+=rComment_prog.serialText+" "+a+"-"+(a+b-1)+", "+rComment_prog.totalText+": "+f+". ";if(a>rComment_prog.startIndex){c+='<a href="javascript:rComment_prog.init('+(a-d)+');" title="上一頁"><<</a> '}if(e){c+='<a href="javascript:rComment_prog.init('+(a+d)+');" title="下一頁">>></a>'}c+='<a href="http://wayne-fu.blogspot.com/2012/10/recent-comment-avatar-update.html" rel="nofollow" target="_blank"><img src="http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/s1600/info.png" title="最新回應+留言者頭像\n程式設計:WFU BLOG" style="float: left; width: 20px;"/></a></div></p>';rComment_prog.dg("RecentCommentsInfo").innerHTML=c};rComment_prog.main=function(s){var t=rComment_prog.dg,c=s.feed;if(!c.entry){t("RecentCommentsArea").innerHTML='<div style="text-align: center;">目前尚無留言</div>'}var f=c.entry.length,a=parseInt(c.openSearch$startIndex.$t),h=parseInt(c.openSearch$totalResults.$t),q="",A=(rComment_prog.showComment>f)?f:rComment_prog.showComment,p,o=0;rComment_prog.fetch=f;rComment_prog.total=A;q+='<ul style="list-style: none;">';for(p=0;p<A;p++){var b=c.entry[p],k=b.author[0].name.$t,m=b.content.$t,v=/<.*?>/g,d=m.replace(v,"").substr(0,rComment_prog.summaryLength),x=b.published.$t.substr(0,10),u=b.author[0].gd$image.src,r=/\/s\d{2}.*?\//ig,g=rComment_prog.headWidth,z="/s"+g*2+"/",l=(b.author[0].uri)?b.author[0].uri.$t:"",y="",e;if(b.title.$t){while(o<b.link.length&&b.link[o].rel!="alternate"){o++}e=b.link[o].href}else{e=b["thr$in-reply-to"].href}if(u.search("blank.gif")>0){if(l){u=rComment_prog.openID}else{u=rComment_prog.anonymous;l=e}}if(u.search("openid16-rounded.gif")>0){u=rComment_prog.openID}if(u.search("b16-rounded.gif")>0){u=rComment_prog.blogger}y=u.replace(r,z);q+="<li><i>"+x+"</i>";q+='<span style="float:left; width:'+g+'px;"><a href="'+l+'" target="_blank"><img src="'+y+'" onerror="this.src=\''+u+'\'" style="width:'+g+'px; padding: 0px; border: 1px solid #ccc;" title="關於'+k+'"/></a></span>';q+='<div style="margin-left:'+(g+10)+'px; word-wrap: break-word;"><a href="'+e+'" title="跳到留言網址"><b>'+k+":</b></a>";q+='<div><span title="展開留言">'+d+'... </span><span title="收起留言">'+m+' </span><a id="rc_swap'+p+'" href="javascript:void(0)" title="展開留言">'+rComment_prog.openLogo+"</a></div>";q+='</div><div style="clear: both;"/></li>'}q+="</ul>";t("RecentCommentsArea").innerHTML=q;rComment_prog.switchPage(parseInt(f),a,h);rComment_prog.event("rc_swap")};rComment_prog.init();
- </script>
存檔後即可,想先看效果可參考右邊的側邊欄。
2. 以上紅字、藍字為重要的修改參數,請參考「三、修改參數」。
3. AH 行以後的 javascript 區,為了節省空間所以把程式碼壓縮了;如果有其他的客製需求、或想瞭解原始碼的話,請下載「這個原始檔」。雖然附檔名為 js,但內容包含 HTML、CSS、Javascript,所以是不能外連的。
4. 一般來說,D~S 行的 CSS 區通常放在 HTML 之前;測試之後忽然發現,在 Blogger 的 HTML/Javascript 小工具裡面,CSS 擺在 HTML 之前可能會讓整個區塊往下移個幾行;但如果把 CSS 擺在 HTML 之後,除了不影響執行之外,HTML 也會回到正常位置,所以這是比較奇怪的地方。
5. 聯想到之前的「讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能」 就是把 CSS 擺 HTML 之前,似乎就會造成區塊下移,因此如果有安裝這個分頁小工具的話,若區塊位置顯示不正常,請試試看更動 CSS 的位置到 HTML 後面。
三、修改參數
請參照上面的程式碼行號來修改以下參數──
E~I:這是日期區塊的 CSS,可自行修改顏色、字體大小、或其他 style 參數。
P~R:這是小工具下方換頁區塊的 CSS,可自行修改字體大小或其他 style 參數。
V:從第幾則留言開始顯示,通常設為 1。
W:一頁顯示幾則留言
X:留言摘要的字元數
Y:頭像圖案的寬度像素 px 值
Z:藍字可改為自訂的 Blogger Logo 圖案網址。
AA:藍字可改為自訂的 OpenID 圖案網址。
AB:藍字可改為自訂的匿名圖案網址。
AC~AD:請自行對照一下小工具就知道怎麼改了
AE:展開留言的字元圖案
AF:收合留言的字元圖案
四、小結
如同「一、修正 bug 及更新要點」所提,這個更新版要處理的問題、與狀況很多,其實程式碼有很多可以討論的地方,但一一討論又太佔篇幅,因此把所有重要的修改參數都提供出來,相信可以減少很多提問。而如果看了前面提供的原始檔連結,對於內容有什麼疑問的話,請再另外提出了,比起我寫得長篇大論,相信這是比較有效率的處理方式。
本更新版修正「含超連結之留言」產生的 bug,以及「改變留言頭像圖案的真實尺寸」,這兩點的原理記錄在「正規表示式線上自動產生器」這篇文章
下一篇要從這個最新回應小工具的基礎上,再加上每則留言顯示文章標題的功能。原本是想把這個功能一起寫進本篇,不過由於本篇的程式碼不短,而且不一定每個人都需要在最新回應看到文章標題,所以我想分開來寫也是不錯,蘿蔔青菜各有所好,可以各取所需。
comment test
回覆刪除請嘗試以新名片身分回覆. :)
<1025261552960321502>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除哈! 我看到您現在的留言頭照就知道沒作用. 有連結至google帳號的話, 會跟G+上面的頭照同步.
給您連結的舊文裡有附上可切換回來的連結, 他寫30天內都可切換回來. 不過使用原ID回覆的留言頭像不會變, 新的才會同步.(profile跟plus的ID號碼是不同的)
你好,之前的事情抱歉。
回覆刪除關於你的插件的版權宣告,我是否可以把它放在側邊攔的關於本站的位置以及網頁底的版權說明兩個地方。 這樣我的版面會看起來比較統一...
如果可以,還要請教你那個點了會跑出小框框的語法要怎麼放。感恩。
<2483565043644130800>(以上內容請勿刪除,以下引言請自行刪減) [quote]另開小視窗的語法是window.open,可以google一下看用法,也可以在WYBOARD的原始碼看到用法。[/quote]
回覆刪除感謝,我原本想試試看直接從你那裏面抓語法出來,結果放上去失敗了。
恩... 另外有沒有貴站的 logo 的圖片,還是我放 WYBoard 那張就好?
請問您如何可以點選連結到原始留言的網頁?
回覆刪除感謝!
http://mykomorebi.blogspot.com
!
回覆刪除