2012年5月3日

WPS 推文系統 V2.0 簡易安裝及使用說明

A+

(Pic from: Installation sous Linux : Autopackage, http://macin.wordpress.com)
簡易安裝》    《安裝最新推文》    《使用說明


一、簡介

有關功能部分的說明及版本的歷程,請見「WPS 部落格推文系統發佈網頁

安裝後,會在文末出現推文留言框,效果大致如下圖:




可前往展示網頁操作測試:




二、V2.1 版簡易安裝

0. 如果安裝過 V1.0 版的話,請先參考:「舊版網頁」,將舊的程式碼全部移除。

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

2. 一般而言推文應該緊接在文章後面,而文章後面通常有類似下面這一段程式碼:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

3. 找到類似上面的程式碼後,在後面貼上以下程式碼,或者想放在別的位置請找適當的地方放:

<b:if cond='data:blog.pageType == "item"'>
<script>
var WPS_main={
PushPostTitle: "<data:post.title/>",
PushPostUrl: "<data:post.canonicalUrl/>",
ListBgColor: "#f8f8f8",
NameColor: "#999999",
TextColor: "#777777",
HostEmail: "YourEmail@gmail.com",
PushCount: 0,
//<![CDATA[
PushJson:function(){document.write("<script type='text/javascript' src='https://spreadsheets.google.com/feeds/list/0AikclfTTti-0dHZ0YUhiZ19tdGtScGNpM3Q0TGxMclE/od6/public/values?hl=zh_TW&q="+WPS_main.PushPostUrl+"&alt=json-in-script&callback=WPS_main.main'><\/script>")},GetCookie:function(b){var e=document.cookie.split("; ");for(var d=0;d<e.length;d++){var a=e[d].split("=");if(a[0]==b){var c=a[1].split("~~");return c}}},WriteCookie:function(b,c){var a=new Date();a.setTime(a.getTime()+1*365*1440*60*1000);document.cookie=b+"="+c+";path=/;expires="+a.toGMTString()},SubmitPush:function(x){if(WPS_main.PushCount>1){alert("已連續推文兩次,請先離開本頁面重新進入,才能再推文!");return}var A=document.getElementById("push1").options[document.getElementById("push1").options.selectedIndex].text;var G,a,r,m;if(A=="推文"){G="#e69138";a="#e69138 1px solid";r="推";m=1}if(A=="箭頭"){G="#3d85c6";a="#3d85c6 1px solid";r="→";m=2}if(A=="噓文"){G="#6aa84f";a="#6aa84f 1px solid";r="噓";m=3}var z=document.getElementById("InputPushName").value;var y=document.getElementById("InputPushText").value;var v=document.getElementById("InputContact").value;if(z==""||z=="暱稱"||y==""||y=="留言內容"){alert("請完整輸入暱稱、推文內容");return}var p=z+y;var u=/[^\x00-\xff]/g;var j=/[\x00-\xff]/g;var o=0,h=0;var i=p.match(u);if(i){o=i.length}var i=p.match(j);if(i){h=i.length}if((o*2+h+2)>100){alert("推文內容過長,請分段推文,或改採留言方式!");return}var F=z.replace(/</g,"&lt;").replace(/>/g,"&gt;");var q=y.replace(/</g,"&lt;").replace(/>/g,"&gt;");var k=/(http|https|ftp|dict)(:\/\/\S+?)(\.?\s|\.?$)/gi;q=q.replace(k,"<a href='$1$2' target='_blank'>$1$2</a>$3");var n=v.replace(/</g,"&lt;").replace(/>/g,"&gt;");var s="";if(n.search("@")>0&&n.search(/\./)>0){s="mailto:"+n}if(n.search("http://")>=0&&n.search(/\./)>0){s=n}if(n.search("@")<0&&n.search("http://")<0&&n.search(/\./)>0){s="http://"+n}if(WPS_main.PushCount==0){var w=(x*1)+1;document.getElementById("NewPush1").style.display="block";document.getElementById("npp1").style.color=G;document.getElementById("npp1").style.border=a;document.getElementById("npp1").innerHTML=r;if(s){document.getElementById("npn1").innerHTML="<a href='"+s+"' target='_blank' style='font-weight: bold; cursor: pointer; text-decoration: none'>"+F+"</a>"}else{document.getElementById("npn1").innerHTML=F}document.getElementById("npt1").innerHTML=":"+q;document.getElementById("nf1").innerHTML=w+"F"}if(WPS_main.PushCount==1){document.getElementById("NewPush2").style.display="block";document.getElementById("npp2").style.color=document.getElementById("npp1").style.color;document.getElementById("npp2").style.border=document.getElementById("npp1").style.border;document.getElementById("npp2").innerHTML=document.getElementById("npp1").innerHTML;document.getElementById("npn2").innerHTML=document.getElementById("npn1").innerHTML;document.getElementById("npt2").innerHTML=document.getElementById("npt1").innerHTML;document.getElementById("nf2").innerHTML=document.getElementById("nf1").innerHTML;var w=(x*1)+2;document.getElementById("npp1").style.color=G;document.getElementById("npp1").style.border=a;document.getElementById("npp1").innerHTML=r;if(s){document.getElementById("npn1").innerHTML="<a href='"+s+"' target='_blank' style='font-weight: bold; cursor: pointer; text-decoration: none'>"+F+"</a>"}else{document.getElementById("npn1").innerHTML=F}document.getElementById("npt1").innerHTML=":"+q;document.getElementById("nf1").innerHTML=w+"F"}F=escape(F);q=escape(q);var E=escape(WPS_main.PushPostTitle);var B=escape(document.title);if(WPS_main.HostEmail=="YourEmail@gmail.com"){WPS_main.HostEmail=""}var l=escape(WPS_main.HostEmail);var C="https://docs.google.com/spreadsheet/formResponse?hl=zh_TW&formkey=dHZ0YUhiZ19tdGtScGNpM3Q0TGxMclE6MQ&ifq&entry.0.single="+WPS_main.PushPostUrl+"&entry.1.single="+m+"&entry.2.single="+F+"&entry.3.single="+q+"&entry.4.single="+E+"&entry.5.single="+s+"&entry.6.single="+B+"&entry.7.single="+l+"&submit=Submit";document.getElementById("SubmitUrl").src=C;WPS_main.PushCount=WPS_main.PushCount+1;document.getElementById("InputPushText").value="";if(v){var D=z+"~~"+v;WPS_main.WriteCookie("WPS_user",D)}else{WPS_main.WriteCookie("WPS_user",z)}},PushSwitch:function(f,d,b,a,c){function e(g){var h=document.getElementById(g);if(h.style.display=="block"){h.style.display="none"}else{h.style.display="block"}}e(d);e(f);b.innerHTML=(b.innerHTML==a)?c:a},PushTable:function(c,e,k,d,i,j){var b,g;if(c==1){b="style='color:#e69138; border:#e69138 1px solid; box-shadow: 1px 1px 1px #d6d6d6;'";g="推"}if(c==2){b="style='color:#3d85c6; border:#3d85c6 1px solid; box-shadow: 1px 1px 1px #d6d6d6;'";g="→"}if(c==3){b="style='color:#6aa84f; border:#6aa84f 1px solid; box-shadow: 1px 1px 1px #d6d6d6;'";g="噓"}var h="";if(j){if(j.search("@")>0&&j.search(/\./)>0){h=j}if(j.search("http://")>=0&&j.search(/\./)>0){h=j}if(j.search("@")<0&&j.search("http://")<0&&j.search(/\./)>0){h="http://"+j}}if(h){e="<a href='"+h+"' target='_blank' style='font-weight: bold; cursor: pointer; text-decoration: none;'>"+e+"</a>"}var a="<tr><td align='center' width='20' "+b+">"+g+"</td>";a+="<td width='70%' style='background-color:"+WPS_main.ListBgColor+"; border: #e8d6c1 1px solid; box-shadow: 1px 1px 1px #d6d6d6; word-wrap:break-word; word-break: break-all;'><span style='color: "+WPS_main.NameColor+"; font-weight: bold; padding-left:2px'>"+e+"</span><span style='color: "+WPS_main.TextColor+"'>:"+k+"</span></td>";a+="<td style='background-color:"+WPS_main.ListBgColor+"; color: "+WPS_main.TextColor+"; font-size:9pt; box-shadow: 1px 1px 1px #d6d6d6; border: #e8d6c1 1px solid;' width='20%'>"+d+"</td>";a+="<td width='30' style='color:"+WPS_main.TextColor+";'><i>"+i+"F</i></td></tr>";document.write(a)},main:function(v){if(!v.feed.entry){h()}var x=v.feed.entry.length;var c=new Array();var g=new Array();var A=new Array();var q=new Array();var k=new Array();for(var r=0;r<x;r++){var p=v.feed.entry[r].gsx$ipush.$t;var t=unescape(v.feed.entry[r].gsx$name.$t);var l=unescape(v.feed.entry[r].gsx$text.$t);var e=v.feed.entry[r].gsx$時間戳記.$t;var b=v.feed.entry[r].gsx$contact.$t;var j=e.lastIndexOf(":");var z=e.substring(0,j);if(z.indexOf("上午 ")>0){e=z.replace("上午 ","")}if(z.indexOf("下午 ")>0){var o=z.indexOf("下午");var y=z.substring(o+3,o+5);if(y==12){e=z.replace("下午 ","")}else{if(y==11||y==10){if(y==11){e=z.replace("下午 11","23")}if(y==10){e=z.replace("下午 10","22")}}else{y=z.substring(o+3,o+4)*1;nhr=y+12;var n=z.substring(o+4);var w=z.substring(0,o);e=w+nhr+n}}}c.push(p);g.push(t);A.push(l);q.push(e);k.push(b)}if(x>5){document.write("<span id='PushTop'></span><table id='OldPush' style='display:none; ' width='100%' valign='middle'>");for(var r=0;r<x;r++){var u=r+1;WPS_main.PushTable(c[r],g[r],A[r],q[r],u,k[r])}document.write("</table>");document.write("<table width='100%'><tr><td align='center'><a href='#PushTop' onclick='WPS_main.PushSwitch(\"OldPush\",\"NewPush\",this,\"按此顯示舊推文\",\"按此隱藏舊推文\")'>按此顯示舊推文</a></td><td width='30'><span style='float:right'><img height='20' width='20' onclick='WPS_main.PushInfo()' src='http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/s1600/info.png' style='cursor: pointer; ' title='關於推文系統、使用說明' /></span></td></tr></table>");document.write("<table id='NewPush' width='100%' style='display:block; ' valign='middle'>");for(var r=x-5;r<x;r++){var u=r+1;WPS_main.PushTable(c[r],g[r],A[r],q[r],u,k[r])}document.write("</table>")}if(x<=5){document.write("<table width='100%' style='' valign='middle'>");for(var r=0;r<x;r++){var u=r+1;WPS_main.PushTable(c[r],g[r],A[r],q[r],u,k[r])}document.write("</table>")}function h(f){if(!f){var f=0}var d="<table id='NewPush2' style='display:none; ' width='100%' valign='middle'><tr><td id='npp2' align='center' width='20' box-shadow: 1px 1px 1px #d6d6d6;'></td>";d+="<td width='70%' style='background-color:"+WPS_main.ListBgColor+"; border: #e8d6c1 1px solid; box-shadow: 1px 1px 1px #d6d6d6; word-wrap:break-word; word-break: break-all;'><span id='npn2' style='color: "+WPS_main.NameColor+"; font-weight: bold; padding-left:2px'></span><span id='npt2' style='color: "+WPS_main.TextColor+"'></span></td>";d+="<td width='20%' align='center' style='background-color: "+WPS_main.ListBgColor+"; box-shadow: 1px 1px 1px #d6d6d6; border: #e8d6c1 1px solid;'>不久前</td>";d+="<td id='nf2' width='30' style='color:"+WPS_main.TextColor+"; font-style: italic;'></td></tr></table>";document.write(d);var i="<table id='NewPush1' style='display:none; ' width='100%' valign='middle'><tr><td id='npp1' align='center' width='20' box-shadow: 1px 1px 1px #d6d6d6;'></td>";i+="<td width='70%' style='background-color:"+WPS_main.ListBgColor+"; border: #e8d6c1 1px solid; box-shadow: 1px 1px 1px #d6d6d6; word-wrap:break-word; word-break: break-all;'><span id='npn1' style='color: "+WPS_main.NameColor+"; font-weight: bold; padding-left:2px'></span><span id='npt1' style='color: "+WPS_main.TextColor+"'></span></td>";i+="<td width='20%' align='center' style='background-color: "+WPS_main.ListBgColor+"; box-shadow: 1px 1px 1px #d6d6d6; border: #e8d6c1 1px solid;'>1 秒前</td>";i+="<td id='nf1' width='30' style=' color:"+WPS_main.TextColor+"; font-style: italic;'></td></tr></table><p/>";document.write(i);var s=WPS_main.GetCookie("WPS_user"),C="暱稱",B="聯絡方式";if(s){if(s[0]){C=s[0];WPS_main.WriteCookie("WPS_user",s[0])}if(s[1]){B=s[1];WPS_main.WriteCookie("WPS_user",s[0]+"~~"+s[1])}}var m="<table valign='middle' style='width: 95%; padding:5px;'>";m+="<tr><td><select id='push1' style='color:#000000; background-color: #fff2cc;' onchange='if(this.value==\"推文\"){this.style.backgroundColor=\"#fff2cc\"}if(this.value==\"箭頭\"){this.style.backgroundColor=\"#d0e0e3\"}if(this.value==\"噓文\"){this.style.backgroundColor=\"#d9ead3\"}'><option selected style='background-color: #fff2cc;'>推文</option><option style='background-color: #d0e0e3;'>箭頭</option><option style='background-color: #d9ead3;'>噓文</option></select>";m+="<input style='width: 10%;' title='請輸入暱稱' size='4' maxlength='15' type='text' id='InputPushName' value='"+C+'\' onclick=\'if(this.value=="暱稱")this.value="";\'/>';m+="<input style='width: 40%;' size='31' id='InputPushText' title='請輸入留言內容' value='留言內容' onclick='if(this.value==\"留言內容\")this.value=\"\";'/>";m+="<input style='width: 17%;' size='8' maxlength='50' id='InputContact' title='(選填)聯絡方式:email 或網址' value='"+B+"' onclick='if(this.value==\"聯絡方式\")this.value=\"\";'/><input size='3' type='button' value='送出' onclick='WPS_main.SubmitPush(\""+f+"\")'/><iframe id='SubmitUrl' name='SubmitUrl' width='0' height='0' frameborder='0' scrolling='no' src=''></iframe></td></tr></table>";document.write(m)}h(x)},PushInfo:function(){var d=(screen.width-250)/2;var c=(screen.height-160)/2;var b=window.open("","PushInfo","toolbar=0, location=0, statusbar=yes, menubar=0, scrollbars=yes, resizable=yes, titlebar=0, width=250, height=160, top="+c+", left="+d+"");b.document.write('<div style="background: url(http://lh6.ggpht.com/_aBGIyeaH_hM/TQbqkfsmkjI/AAAAAAAAA8g/vqz3hYUma9I/bg_white.jpg);"><center>WPS 推文系統:V 2.1</p></p>程式設計:<a style="cursor: pointer; color: #3778cd;" href="http://wayne-fu.blogspot.com/" target="_blank">WFU BLOG</a></p></p><a style="cursor: pointer; color: #3778cd;" href="http://wayne-fu.blogspot.com/2012/05/push-system.html" target="_blank">發佈網頁</a> || <a style="cursor: pointer; color: #3778cd;" href="http://wayne-fu.blogspot.com/2012/05/wps-2-install.html#WPS20_manual" target="_blank">使用說明</a></p></p><input type="button" value="確定" onclick="self.close()"/></center></div>')}};WPS_main.PushJson();
//]]>
</script>
</b:if>

4. 可自訂參數:
  A. 推文列表背景色:改 ListBgColor 後面雙引號內的色碼代號,可參考「網頁色碼選擇器
  B. 推文列表留言者暱稱顏色:改 NameColor 後面雙引號內的色碼代號。
  c. 推文列表留言顏色:改 TextColor 後面雙引號內的色碼代號。
  D. 以上程式碼紅字的部分 "YourEmail@gmail.com" 請置換為自己的 email,如此網站有新推文時,通常一分鐘內就會自動寄出 email 通知(收到的時間視各家 email server 而定);但如果不想收到 email 通知也可以,請把紅字部分刪除,留下兩個雙引號「""」即可。

5. Blogger 以外的部落格應該也可以安裝,不過請自行在後台找適當的位置放安裝程式碼,並將第一行 <b:if... 以及最後一行 </b:if> 去掉。



三、安裝最新推文

2016.4.8 公告:因 Google Drive 外連失效,請勿使用 "最新推文" 的程式碼,"最新推文" 的功能暫不更新。


在側邊欄顯示最新推文是個實用的小工具,如果想安裝的話,請到後台在側邊欄新增一個小工具 → 選擇「HTML/JavaScript」→ 標題可填入「最新推文」→ 內容請複製以下程式碼後按儲存:

<div id="RecentPushesArea"><center><img src="https://lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif"/></center></div>

<script type='text/javascript'>
var ShowPushCount=5;

(function() {
  var url = "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/RecentPush-share-120830.js",
      script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
     document.documentElement.firstChild.appendChild(script);
} )();
</script>

藍字的圖片網址可改為自訂動畫圖案。

紅字的部分意思是預設顯示「最新的五個推文內容」,如果想要增減顯示的推文數目,請把 "5" 改成想要顯示的最新推文數量

展示效果:請見右邊的側邊欄。


四、推文列表的功能

最新推文的數量超過預設的數字時,會自動出現「按此看所有推文」的按鈕,此時按下去就會另開視窗顯示網站的所有推文,展示效果同樣請見右邊的側邊欄。

此外,推文系統 V2.0 在顯示「最新推文」以及「推文列表」時,支援顯示文章標題,所以安裝 2.0 版後的推文可顯示文章標題,而 1.0 版的推文無法顯示文章標題。如果想讓舊的推文也顯示文章標題,需要改一下資料庫的內容,請留下聯絡方式或 email 與我聯繫。


五、自訂資料庫

2014.3.15 公告:2.0 版加入 email 通知功能,不過不太好的消息,最近「Google 官方公告」表示,免費的 google apps 帳號一天寄出郵件的上限下修到 100 封(原本為 500 封),付費的 google apps 帳號,目前查到的資料是一天 1500 封。

這個留言通知功能,與本站發佈的「私密留言系統」及「WYBOARD 部落格即時留言板」共用 email 寄送系統,如果發現某些網站使用了上述工具,而每日平均寄信使用量達到 5 ~ 10 封時(將近 1/10 的額度),為了避免佔用其他使用者的額度,WFU 可能會要求該網站使用客製的試算表資料庫。

如果想要使用自訂的試算表資料庫存放推文,除了可管理、刪除、編修推文,並獲得獨立的寄信配額,請利用下面的表單與 WFU 聯繫

聯絡表單:




六、簡易使用說明

2012.11.5 補充

【留言 #02】CIUOO 回報某篇文章無法顯示推文框,檢查後發現 "文章標題" 若有雙引號「"」會導致程式當掉,因此請避免在文章標題使用雙引號。

1. 為了防止使用語法攻擊網頁漏洞,推文封鎖任何 HTML 標籤以及語法

2. 但推文內容含 "http://" 開頭的網址仍會自動轉為超連結

3. 新增「公開email/網址」選項,供留言者留下聯絡資訊;有聯絡資訊的留言者暱稱,使用不同顏色的超連結產生區隔。

4. 留言者的資訊自動寫入 cookie,節省下次重複輸入的時間。

5. 為了防止使用程式機器人大量留言,預設只能連續推文兩次,超過兩次後必須重新整理頁面才能再推文。

6. 為了避免推文過長造成版面不美觀,預設只能輸入約最長兩行的字數。


更多實用工具:


本網頁可測試推文效果,有使用、安裝的問題,或是任何功能上的建議,都歡迎留言提出。

12 則留言:

  1. <182609163863067869>(以上內容請勿刪除,從括號之後開始留言)
    hi 小彬, 我改好了,請見本文 「2012.8.29 修訂」下面的更新程式碼,請試試看應該 ok 了。未來所有的工具我都會逐步改成動態載入。

    回覆刪除
  2. 你好,經讀者回報發現,有一篇文章的推文系統無法顯示出來。

    我做過兩個動作:
    1. 還原成草稿重新發佈
    2. 更改文章網址重新發佈

    但仍然無效,檢查前後篇文章,及最新文章都有出現,因此不曉得是碰上甚麼問題了...
    附上網址: http://ppt.cc/R0qo

    謝謝!

    回覆刪除
  3. <6679895705576969793>(以上內容請勿刪除,從括號之後開始留言)
    謝謝回報,我猜是文章標題有雙引號 " 的關係,請你把那篇文章的兩個雙引號改用其他的表達方式看看,如果是這個問題的話,我會在本文加個提醒訊息。

    但這一點目前我覺得好像無解,因為 javascript 對於字串裡面含有雙引號一定會當掉,我在寫「最新文章」小工具時,若是文章摘要含雙引號也是必當...

    回覆刪除
  4. <4270788197796455288>(以上內容請勿刪除,從括號之後開始留言) 改成「」後可以了!謝謝,應該真的是因為"的關係

    回覆刪除
  5. 很受用的文章,讓我的Blog更加豐富,謝謝分享!!
    感激^^

    回覆刪除
  6. <8623318340195579503>(以上內容請勿刪除,從括號之後開始留言)
    不客氣 ^^

    回覆刪除
  7. 您好,請問推文系統有辦法裝在痞客邦(http://www.pixnet.net/)的部落格裡嗎?
    看痞客邦的後台只有CSS可以編輯...

    回覆刪除
  8. <7356334035425800581>(以上內容請勿刪除,從括號之後開始留言)我沒用過痞客邦,所以不清楚痞客邦有哪些地方可以裝 javascript,這你可能要問痞客邦的朋友了。總之,只要能裝 javascript 的地方,就能安裝推文系統。

    如果痞客邦在文章下方無法安裝推文系統的話,那麼看看你要不要裝在側邊欄,可參考這個「部落格即時留言板──WYBOARD」,同樣有推文的功能。

    回覆刪除
  9. 我有個疑問! 即時留言版跟推文系統差別在哪?

    像我的有裝即時留言版了再裝推文系統會不會有所衝突?

    回覆刪除
  10. <1577010453384303658>(以上內容請勿刪除,從括號之後開始留言)[quote]即時留言版跟推文系統差別在哪[/quote]
    推文可以將留言集中在同一篇文章,適合與文章相關的留言;wyboard適合與文章無關的留言,可參考「WYBOARD安裝及使用說明」→ 前言部分的詳細說明。
    [quote]有裝即時留言版了再裝推文系統會不會有所衝突[/quote]不會,但你已經有了自己的wyboard資料庫,而推文系統目前還沒有試算表資料庫的參數,所以只能將留言存在共用資料庫,這代表你的wyboard讀不到最新推文的資料,所以你只能另外安裝本文的「最新推文」小工具了。

    回覆刪除
  11. <2513331809462893824>(以上內容請勿刪除,從括號之後開始留言) 我想留言板應該就夠用了所以暫時就先不裝推文系統囉! 除非....之後他能帶來更實質的正向幫助對於部落格流量上就可能會裝吧! 呵呵

    回覆刪除

張貼留言注意事項:

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