【轉錄】Blogger 最新回應＋留言者頭像＋文章標題

原文轉自：Blogger 最新回應＋留言者頭像＋文章標題

(Pic from: softicons.com,freepik.com,all-free-download.com)

這個版本的「最新回應」小工具，其基本架構仍是延用「上個版本」的程式庫，主要差別為每則留言多了文章標題。優點是一眼就能清楚瞭解哪篇文章有了新留言，不過每則留言的區塊面積也增加了，如果喜歡介面簡潔一點的話還是可以選擇「無文章標題的版本」。以下照例先說明撈後台資料的原理，想直接安裝可跳「三、安裝程式碼」。

一、從 Json 抓留言文章標題

「最新回應」小工具的 feed 基本知識可參考「Blogger 最新回應＋留言者各種身份頭像」。由於留言的 feed 資料不含文章標題，最早的 hack 必須從文章 feed 撈資料來比對標題，但當部落格文章數目達到數百篇或是更多時，這樣的 hack 執行速度就會是大悲劇了。

還好「Blogger API 官網」 說明了留言 feed 要如何與文章做連結，先找到 thr:in-reply-to 元素後，裡面可找到文章連結資料。

舉例說明，本站留言 feed 轉 Json 格式的網址為 http://wayne-fu.blogspot.com/feeds/comments/summary?alt=json-in-script，我們若搜尋「thr$in-reply-to」字串可找到該則留言的文章連結相關資料，裡面最重要的是 "source" 資料指向的 "單一文章 feed 網址"，從單一文章 feed 撈資料的速度很快，就可避免從 "網站文章 feed" 撈資料的冗長時間了。

舉其中的一個 "source" 資料當例子，把單一文章 feed 網址後面加上參數 "?alt=json-in-script" 成為這樣的字串 "http://www.blogger.com/feeds/1035379297949976554/posts/default/8856339391020730581?alt=json-in-script" 可轉成 json 格式，在瀏覽器畫面上可找到兩個重要資料：

1. 文章標題：位置在 json 資料 → entry 物件 → title 物件 → $t 字串，可看到標題字串為 "Blogger「留言欄訊息」自訂版面及樣式的方法__兼談留言字詞驗證"。

2. 文章網址：位置在 json 資料 → entry 物件 → link 陣列 → 網址資料在 "ref" 為 "alternate" 的那個物件裡，字串值為 "http://wayne-fu.blogspot.com/2012/10/comment-reminder.html"

有了以上資料就能印出標題，再將以上資料存入自設的陣列裡，若有其他則留言來自同一篇文章，就不必再重複查詢文章 feed，可減少重新送出請求(request)的次數與時間。


二、加強功能、特點

1. 既然改了版，還是多少增加了一些功能、調整了一下版面，例如：

  A：把原本展開收合的圖案 "︾"、"︽" 隱藏起來，滑鼠經過該則留言區時才顯示，讓版面簡潔、美觀許多。

  B：留言者暱稱字體加大、文章標題字體縮小。

  C：把所有區塊的 CSS 都開放出來讓使用者自訂版面。

2. 這個版本的特點為：過去的版本，若某篇文章有留言，而後來該篇文章被刪除，但該文章的留言仍會存在，照樣會出現在最新回應的小工具裏。現在這個版本既然能顯示文章標題，也順便寫了偵測文章是否被刪除的功能。若某則留言的文章被刪除，則會顯示「文章已刪除」字樣，這樣可以提醒站長到後台去把該則留言給刪了。

三、安裝程式碼

1. 這已經是第三個「最新回應」的版本，如果安裝過舊版本的話，先刪除原本的小工具，再按以下步驟重新新增一個「HTML/JavaScript」小工具即可；如果沒有安裝過的話，請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

1. <div id="RecentCommentsArea"></div>
2. <div id="RecentCommentsInfo"><a href='http://wayne-fu.blogspot.com/2012/11/recent-comment-avatar-title.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUW8Bcz42RgWemzwXoq4jo-LCBLFvLcPf4as1ylL-yiQWuEa6TXrGM-tz9Bg3GNrEr5jp-LCOfK3QSipBsql7WVqsm3FBCN_7xPhDXgifOYVUCu4rzZs00QyQX-rLhoMIyJmJQYciFqAwN/s1600/info.png' width='20'/></a></div>
3.  
4. <style>
5. #RecentCommentsArea a, #RecentCommentsInfo a {
6.   text-decoration: none;
7. }
8. #RecentCommentsInfo {
9.   font-size: 85%;
10. }
11. .rcDate {
12.   color: #aaaaaa; 
13.   font-size: 80%; 
14.   float: right;
15. }
16. .rcAuthor {
17.   font-size: 110%;
18. }
19. .rcText {
20.   cursor: pointer;
21.   margin: 5px 0px;
22. }
23. .rcPostTitle {
24.   font-size: 85%;
25.   font-weight: bold;
26.   line-height: 110%;
27. }
28. </style>
29. <script>
30. var rComment_prog = {
31.   startIndex : 1,  
32.   showComment : 5,
33.   summaryLength : 25,
34.   headWidth : 35,
35.   blogger : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DLvcz4TStMr81cDiLe-vvJwkzFhZSsYSXDdoPlVGoLaH6OoRioV0-pAvtav_nEgSyzpSVfV4B8BOzx7JVE6JzfuG9gWQBT2t1_czOhubz5CR2wD-nJU9W8fnunnjXvaTKumYMEEs1LRp/s70/blogger.png",
36.   openID : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafIk4mvU8SKP8nOBsLGYRq4Lpz6QeKSKmaqvH7ZikPxw5QVZrXLo1b807ZeatTZ39aWNusiwysh9JX1ZXLn0X2ARbHu9UWfpczRDgfXe-7B0vm54gIO12oEIOVmpPVNGjLQYIJoWR2sHx/s70/openid.png",
37.   anonymous : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUAHxprcPWeAzrFVv4KT19lFFTGuT-BDJL07cHRnl-hU-uvxaCrBTbRHEhsWvHDqS1nHjzUvjiI8gdI38ZA8UF00yO7ReHERlrsrWigWFNQEZCM5Vd2-25rEi3Ehu70SNsJ9Hy1Ls_bdM/s70/noname.jpg",
38.   serialText : "編號",
39.   totalText : "總共:",
40.   openLogo : "︾",
41.   closeLogo : "︽"
42. };
43.  
44. rComment_prog.fetch=0;rComment_prog.total=0;rComment_prog.postUrl=[];rComment_prog.postTitle=[];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.getPostTitle=function(q){var h=q.entry.link,p=q.entry.title.$t,g=rComment_prog.dg,m=rComment_prog.showComment,f,e,a,o,d,b,c=0;if(!Array.indexOf){Array.prototype.indexOf=function(k){for(var j=0;j<this.length;j++){if(this[j]==k){return j}}return -1}}while(c<h.length&&h[c].rel!="alternate"){c++}a=h[c].href;if(rComment_prog.postUrl.indexOf(a)<0){rComment_prog.postUrl.push(a);rComment_prog.postTitle.push(p)}for(f=0;f<m;f++){b="rc_postTitle"+f;o=g(b).href;d=o.indexOf("?");o=(d!=-1)?o.substring(0,d):o;e=rComment_prog.postUrl.indexOf(o);if(e>-1){g(b).innerHTML=rComment_prog.postTitle[e]}}};rComment_prog.getJson=function(b){var a=document.createElement("script");a.setAttribute("src",b);document.documentElement.firstChild.appendChild(a)};rComment_prog.event=function(a){var h=rComment_prog.total,g=rComment_prog.dg,b=rComment_prog.linkColor,f=b(1),k=b(0),e;for(e=0;e<h;e++){var c=a+e,d=g(c),j=d.parentNode.parentNode.parentNode;content=d.previousSibling,summary=content.previousSibling,click=function(m){return(function(){rComment_prog.toggle(m)})}(c),mOver=function(){this.style.color=f},mOut=function(){this.style.color=k};j.onmouseover=function(m){return(function(){m.style.display="inline"})}(d);j.onmouseout=function(m){return(function(){m.style.display="none"})}(d);content.style.display="none";d.style.display="none";d.onclick=click;content.onclick=click;summary.onclick=click;content.onmouseover=mOver;content.onmouseout=mOut;summary.onmouseover=mOver;summary.onmouseout=mOut}};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 b=rComment_prog.dg,c;if(!a){a=rComment_prog.startIndex}b("RecentCommentsArea").innerHTML="<div style='text-align: center;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhidUeJx8ztONRsktTlXTGKxAkLDKcIzBE7Fj59s7IKM1SdXb3onkMTo8nMIvXQSUJzWIp5pAnHExJSS1mULeOmSj_KyFDxuzQKimoZXX-aNr6uEN39WnduijrS3IbPsh-krtZiSbUNkb0K/s512/indicator-light.gif'/></div>";c="/feeds/comments/default?orderby=published&start-index="+a+"&max-results="+(rComment_prog.showComment+1)+"&alt=json-in-script&callback=rComment_prog.main";rComment_prog.getJson(c)};rComment_prog.switchPage=function(b,a,f){var d=rComment_prog.showComment,e=(b>d),c="";b=e?d:b;c+="<p><a href='http://wayne-fu.blogspot.com/2012/11/recent-comment-avatar-title.html' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUW8Bcz42RgWemzwXoq4jo-LCBLFvLcPf4as1ylL-yiQWuEa6TXrGM-tz9Bg3GNrEr5jp-LCOfK3QSipBsql7WVqsm3FBCN_7xPhDXgifOYVUCu4rzZs00QyQX-rLhoMIyJmJQYciFqAwN/s1600/info.png' title='最新回應＋留言者頭像＋文章標題\n程式設計：WFU BLOG' style='float: left; width: 20px;'/></a>";c+="<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+="</div></p>";rComment_prog.dg("RecentCommentsInfo").innerHTML=c};rComment_prog.main=function(B){var C=rComment_prog.dg,f=B.feed;if(!f.entry){C("RecentCommentsArea").innerHTML="<div style='text-align: center;'>目前尚無留言</div>"}function k(w){var J,j=w.length,I=[],K={};for(J=0;J<j;J++){K[w[J]]=0}for(J in K){I.push(J)}return I}var h=f.entry.length,a=parseInt(f.openSearch$startIndex.$t),p=parseInt(f.openSearch$totalResults.$t),x="",H=(rComment_prog.showComment>h)?h:rComment_prog.showComment,o=[],d=[],y="",v,u=0;rComment_prog.fetch=h;rComment_prog.total=H;x+="<ul style='list-style: none; padding: 0px;'>";for(v=0;v<H;v++){var b=f.entry[v],r=b.author[0].name.$t,t=b.content.$t,D=/<.*?>/g,e=t.replace(D,"").substr(0,rComment_prog.summaryLength),E=b.published.$t.substr(0,10),A=b.author[0].gd$image.src,z=/\/s\d{2}.*?\//ig,m=rComment_prog.headWidth,q="/s"+m*2+"/",s=(b.author[0].uri)?b.author[0].uri.$t:"",c="關於"+r,F="",G="",g;if(b.title.$t){while(u<b.link.length&&b.link[u].rel!="alternate"){u++}g=b.link[u].href}else{g=(b["thr$in-reply-to"])?b["thr$in-reply-to"].href:"http://wayne-fu.blogspot.com/2012/11/recent-comment-avatar-title.html"}if(b["thr$in-reply-to"]){o[v]=b["thr$in-reply-to"].source}else{G="文章已刪除"}if(A.search("blank.gif")>0){if(s){A=rComment_prog.openID}else{A=rComment_prog.anonymous;s=g;c=""}}if(A.search("openid16-rounded.gif")>0){A=rComment_prog.openID}if(A.search("b16-rounded.gif")>0){A=rComment_prog.blogger}F=A.replace(z,q);x+="<li><i class='rcDate'>"+E+"</i>";x+="<span style='float:left; width:"+m+"px;'><a href='"+s+"' target='_blank'><img src='"+F+"' onerror='this.src=\""+A+"\"' style='width:"+m+"px; padding: 0px; border: 1px solid #ccc;' title='"+c+"'/></a></span>";x+="<div style='margin-left:"+(m+10)+"px; word-wrap: break-word;'><b class='rcAuthor'>"+r+"：</b>";x+="<div class='rcText'><span title='展開留言'>"+e+"... </span><span title='收起留言'>"+t+" </span><a id='rc_swap"+v+"' href='javascript:void(0)' title='展開留言'>"+rComment_prog.openLogo+"</a></div>";x+="<div class='rcPostTitle'>-- <a id='rc_postTitle"+v+"' href='"+g+"' target='_blank'>"+G+"</a></div>";x+="</div><div style='clear: both;'/></li>"}x+="</ul>";C("RecentCommentsArea").innerHTML=x;rComment_prog.switchPage(parseInt(h),a,p);rComment_prog.event("rc_swap");d=k(o);l=d.length;for(v=0;v<l;v++){y=d[v].replace("default","summary")+"?alt=json-in-script&callback=rComment_prog.getPostTitle";rComment_prog.getJson(y)}};rComment_prog.init();
45. </script>

存檔後即可，想先看效果可參考右邊的側邊欄。

2. 以上紅字、藍字為重要的修改參數，請參考「四、修改參數」。

3. AR 行以後的 javascript 區，為了節省空間所以把程式碼壓縮了；如果有其他的客製需求、或想瞭解原始碼的話，請下載「這個原始檔」。雖然附檔名為 js，但內容包含 HTML、CSS、Javascript，所以是不能外連的。


四、修改參數

請參照上面的程式碼行號來修改以下參數──

H～J：這是小工具下方換頁區塊的 CSS，可自行修改字體大小或其他 style 參數。

K～O：這是日期區塊的 CSS，可自行修改顏色、字體大小、或其他 style 參數。

P～R：這是留言者暱稱區塊的 CSS，可自行修改字體大小、或其他 style 參數。

S～V：這是留言內容區塊的 CSS，可自行修改上下邊界值、或其他 style 參數。

W～AA：這是文章標題區塊的 CSS，可自行修改字體大小、行高、或其他 style 參數。

AE：從第幾則留言開始顯示，通常設為 1。

AF：一頁顯示幾則留言

AG：留言摘要的字元數

AH：頭像圖案的寬度像素 px 值

AI：藍字可改為自訂的 Blogger Logo 圖案網址。

AJ：藍字可改為自訂的 OpenID 圖案網址。

AK：藍字可改為自訂的匿名圖案網址。

AL～AM：請自行對照一下小工具就知道怎麼改了

AN：展開留言的字元圖案

AO：收合留言的字元圖案


五、小結

最新回應這個小工具不知不覺寫了三個版本，已發現的 bug 也都清得差不多了，這一版應該算最完整的版本了，看起來這個小工具也該告一段落了。但我其實還有一個 idea 尚未實現，就是把留言的內容灌進文章區塊，因為這個區塊很大，實現的話效果應該滿有趣的，而目前我已經成功地把隨機文章灌到首頁的文章區塊，相信留言也是可以，等將來如果弄出成果時就可結束這個系列了。