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

(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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWyB1MXzEo95PgGb2vSJUI6v-8YYPYn_OuCJOiutez2Ui1QwyDdyf5qXb5uhuR_EwDRDNULEsYngppEjZeQEgB_ql-sO0YCHzrGOEQFl_SJ6vpREuwbxf2tG4DBDEpVunJOYs7-Ueicw1m/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqA9zZVf5iUdz40OecbyJGWHsXuig96SHyWZxoO2YmApQPmbIwlsvL09an2GdIMSFjD-TyNUsE1D4sskfmVqpCZL0WiLHayqG0k9poMEgd1MrLEj-W0jvYCoSjdJU65jHWdXpD1ErupYds/);"><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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATuJvkpy3TyBQtXW_JJ59fpiTcu6m9jkBoXtHXpCwpiiOqDdLSLIP2VkH56AQHEg_JubYb6aueZcHrVC-1muR1XwNF3Fxkt_fbNxdMtl6TiakzPHvqPlXefdZMOu2u9IzU6-a-X8So4ok/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 可能會要求該網站使用客製的試算表資料庫。

而如果想要使用自訂的試算表資料庫存放推文，除了可管理、刪除、編修推文，並獲得獨立的寄信配額，請使用本站側邊欄的表單與我聯繫(需要資料庫製作費用)：

六、簡易使用說明

2012.11.5 補充

【留言 #02】CIUOO 回報某篇文章無法顯示推文框，檢查後發現 "文章標題" 若有雙引號「"」會導致程式當掉，因此請避免在文章標題使用雙引號。
1. 為了防止使用語法攻擊網頁漏洞，推文封鎖任何 HTML 標籤以及語法。

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

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

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

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

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


更多實用工具：

• 本站使用的 Blogger hack 及工具整理

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