推文系統 V2.0 已經發佈,請見「WPS 部落格推文系統發佈網頁」
一、替代方式
由於安裝的動作不少,如果想先快速體驗一下推文的功能,可參考「Blogger 推文系統簡易安裝及使用說明」進行簡易安裝。
二、準備動作
請先參照「利用 Google 問卷(試算表)當小型資料庫__(一)製作資料庫」、「利用 Google 問卷(試算表)當小型資料庫__(二)讀取、儲存資料庫」這兩篇文章,建立自己的 Google 試算表當資料庫,並記下文中提到的試算表相關亂數字串。
三、安裝程式碼
1. 請先下載「WPS-share-111126.js」這個檔案,放在自己的網頁空間。
2. 到 Blogger 後台 → 範本 → 編輯 HTML
3. 一般而言推文應該緊接在文章後面,而文章後面通常有下面這一段程式碼:
<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>
4. 找到類似上面的程式碼後,在後面貼上以下程式碼,或者想放在別的位置請找適當的地方放:
<b:if cond='data:blog.pageType == "item"'>
<script src='http://你的網頁空間/WPS-share-111126.js' type='text/javascript'/>
</b:if>
5. 如果暫時沒有網頁空間,可以先使用下面這個連結:
<b:if cond='data:blog.pageType == "item"'>
<script src='http://wayne-fu.googlecode.com/files/WPS-share-111126.js' type='text/javascript'></script>
</b:if>
但用以上這個連結,將無法使用自己的 Google 試算表當資料庫,而既然放棄簡易安裝、選擇進階安裝方式,那麼找個網頁空間是必須的動作。
建議使用「Google Code」空間,可外連 js 檔。(可參考此篇介紹「Google Code 簡易使用教學」)
如果沒有網頁空間,那麼可以把 js 檔的內容塞到範本裡面,例如把第 5 點的字串改成以下:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
WPS-share-111126.js 的內容全部複製到此區間
//]]>
</script>
</b:if>
四、修改程式碼
打開「WPS-share-111126.js」這個 js 檔(用文書編輯軟體,例如以 word 開啟,編碼務必請選 unicode 格式),內容很長,不過要改成自己的資料庫只需要更改兩~三個地方而已:
DG:紅字部分請置換為「利用 Google 問卷(試算表)當小型資料庫__(一)製作資料庫」→「三、製作資料庫」→ 第 2 個步驟所得到自己的試算表身份證
FL~FN:如果想要自訂問卷的問題標題的話,紅字部分請填入自訂標題,注意如有大寫的字母全部改為小寫。如果沒有要變動則這幾行不用變更。
JB:在「利用 Google 問卷(試算表)當小型資料庫__(一)製作資料庫」→「三、製作資料庫」→ 第 10 個步驟所得到自己試算表的字串,此行紅字部分請置換為對應的字串。
改完以上這幾行,存檔時以 word 為例,編碼務必請選 unicode 格式,上傳到自己的網頁空間即完成安裝。
五、程式碼說明
如果對 javascript 不熟,可以略過本章節;而如果想要自訂配置,可以參考一下這一段的內容。
其實這個 js 檔很難一行行說明,因此從執行順序來說明或許比較恰當。
JE:PushCount 變數儲存使用者連續推文的次數。
JF→IW、IW→IZ:找出目前文章網址,放到 PushPostUrl 這個變數。
JB:重點在於使用了「q=文章網址」這個參數,使得 Json 格式的資料不會太長;如果該文章尚無任何推文的話,那麼完全沒有資料會篩選出來,可節省許多傳輸資料的時間;最後篩出來的資料交給 WPSjson 這個函數處理。
A→C→IM→FB~FC:如果該文章目前無任何推文的話,執行 HT 行 PushForm 函數(直接印出輸入推文的表單)
FD~FI:替推文系統需要顯示的資料設陣列──推噓文種類、暱稱、推文內容、時間。
FK~GP:依序從 Json 讀入資料到以上設立的陣列,其中為了處理時間的格式多了好幾行的空間。
GR~GZ:預設推文最多顯示五筆,如果推文超過五筆,超過五筆的舊推文全部隱藏起來;印出推文的表格交給 PushTable 函數處理。
HB~HH:印出最後五筆推文。
HJ~HR:推文小於五筆時,全部印出。
IA→HT~HZ:把處理 Json 得到的推文筆數放到變數 a,傳送到 PushForm 函數,印出推文輸入表單。另外印出兩排表單並隱藏起來,當輸入新推文時,再逐一打開這兩排表單,由變數 a 決定這兩排表單是幾樓的推文。
AB:當填完表單送出推文時,會啟動 SubmitPush 函數處理資料。
AC:如字面上所述。
AE~AG:準備儲存文章網址到資料庫。
AI~BC:處理推文種類,準備儲存到資料庫。
BE~BF:讀取暱稱、推文內容。
BG~BJ:如字面上所述。
BK~BV:判斷輸入內容長短,控制不超過兩行的長度,超過就顯示 BT 行。
BX~BY:在 name(暱稱) 及 text(推文內容)兩個變數, 把「<」、「>」這兩個符號轉換為「<」、「>」,封鎖推文內容的 HTML 標籤及語法。
CA~DB:根據已推文次數,顯示之前隱藏的兩排表格並印出輸入內容。
DD~DE:這次 name(暱稱) 及 text(推文內容)兩個變數要存到試算表,用 escape 函數轉換所以無法正常顯示的字元。
DG:設定要存到資料庫的網址內容,分別存入 url(文章網址)、Ipush(推文種類)、name(暱稱)、text(推文內容)。
DI→HY:當初在 HY 行設了一個 Iframe,這個 Iframe 很特別,長、寬設為零所以看不到,src(網址)也設為空字串(""),所以這個 Iframe 不會執行。現在我們已經有了推文資料,使用 DI 行的指令動態給予 Iframe 網址,如此 Iframe 就悄悄地幫我們送出資料,而不會影響螢幕上的輸出畫面,這一行是非常重要的一個技巧,也是推文功能最終能實現的關鍵。
DK:處理完資料後,推文次數加一。
DL:處理完資料後,把推文內容清空。
以上為主要程式的流程,還有一些函數沒有提到,不過大多與版面配置、動態效果有關,想要做細部調整的站長們請再自行研究一下了。
六、改表格顏色
三咪一犬的窩 於【留言 #01】詢問表格顏色,為便於閱讀,將部分內容增補到此:
自訂表格顏色需修改 js 檔,而修改 js 檔務必注意本文「四、修改程式碼」的紅字,否則會發生慘劇。
修改舊推文表格的顏色要改 EY 行:
A:「span style='color: #45818e;」 這裡是暱稱的顏色,把 #45818e 換成需要的顏色即可
B:「<span>:"+pt+」這裡是推文內容,改成「<span style='color: #xxxxxx;'>:"+pt+」,把 #xxxxxx 換成需要的推文內容顏色
C:「<td style='font-size:9pt;」這裡是時間,改成「<td style='color: #xxxxxx; font-size:9pt;」把 #xxxxxx 換成你要的時間顏色
D:「style='color:#bbbbbb'」這是樓層的顏色
修改 新推文x2 的表格(就是 1 秒前、不久前那兩個),要改 HV、HW 這兩行:
E:「span id='npn2'」以及「span id='npn1'」這兩個地方後面的 color 是暱稱的色碼
F:HV行「span id='npt2'」這裡是推文內容,改成「span id='npt2' style='color: #xxxxxx;'」,HW行「span id='npt1'」也是一樣改法
G:HV行「style='background-color: #eeeeee;」改成「style='background-color: #eeeeee; color: #xxxxxx;」可增加時間字體顏色;HW行也是一樣。
H:HV行「td id='nf2'」後面的 color 可改樓層顏色;HW行「td id='nf1'」後面一樣的改法。
如果要改背景色,可改 background-color 後面的色碼。
另外,js 檔放上網頁空間後,如果之後 js 檔內容有修改,要重新上傳,請改不同的檔名,如果相同的檔名瀏覽器內會有 cache ,可能會誤判,仍然採用舊的 js 檔內容,所以改檔名是最保險的方法。
Hi, 站長你好, 首先感謝你提供這個資訊讓我們使用, 我有幾個小問題要請教你
回覆刪除1. 我現在目前想先使用你提供的簡易教學就好, 但是我構想的是, 我可以複製你的.js檔就好, 然後修改之後傳到我的空間去嗎? (會有資料庫寫不進去的問題嗎?)
2. 上個問題所提到的修改就是想要修改推文內容的字體顏色, 如果第一個問題是可以解決的, 我想請問是不是可以教我怎麼改字體顏色呢?
感謝你的教導唷!! 期待你的回覆!!
Re: 三咪一犬的窩 <1000338987785964>
回覆刪除1. 沒問題的,只要你的網頁空間能外連 js 檔(而不是變成下載)就行,另一個使用者表示用 hinet 空間無法外連。
你可以先試試你的網頁空間外連 js 檔能不能成功,如果不行的話建議使用「Google Code」、「Blogger 放檔的好選擇 - Google Code」,有另外一個使用者用 google site 放 js 檔。
2. 修改 js 檔務必注意本文「四、修改程式碼」的紅字喔,否則會發生慘劇。色碼表請先參考此網址:「HTML 色碼表」。
修改舊推文表格的顏色要改 EY 行:
A:「span style='color: #45818e;」 這裡是暱稱的顏色,把 #45818e 換成你要的顏色即可
B:「<span>:"+pt+」這裡是推文內容,改成「<span style='color: #xxxxxx;'>:"+pt+」,把 #xxxxxx 換成你要的推文內容顏色
C:「<td style='font-size:9pt;」這裡是時間,改成「<td style='color: #xxxxxx; font-size:9pt;」把 #xxxxxx 換成你要的時間顏色
D:「style='color:#bbbbbb'」這是樓層的顏色
修改 新推文x2 的表格(就是 1 秒前、不久前那兩個),要改 HV、HW 這兩行:
E:「span id='npn2'」以及「span id='npn1'」這兩個地方後面的 color 是暱稱的色碼
F:HV行「span id='npt2'」這裡是推文內容,改成「span id='npt2' style='color: #xxxxxx;'」,HW行「span id='npt1'」也是一樣改法
G:HV行「style='background-color: #eeeeee;」改成「style='background-color: #eeeeee; color: #xxxxxx;」可增加時間字體顏色;HW行也是一樣。
H:HV行「td id='nf2'」後面的 color 可改樓層顏色;HW行「td id='nf1'」後面一樣的改法。
如果要改背景色,可改 background-color 後面的色碼。以上是先簡單講,如果你熟悉 javascript,那就知道整個表格各部分的顏色怎麼改、背景色怎麼改。
另外,js 檔放上網頁空間後,如果之後 js 檔內容有修改,要重新上傳,請改不同的檔名,如果相同的檔名瀏覽器內會有 cache ,可能會誤判,仍然採用舊的 js 檔內容,改檔名是最保險的方法。
好複雜啊!! (更讓我敬佩你的實力跟耐心!! 請接受小弟一拜!!)
回覆刪除我去準備咖啡來好好研究一下好了!!
成功了再來跟你報告!! 感恩!!
成功了成功了成功了!!
回覆刪除我簡單改了一下~變得很清楚囉!!!!!!!!!
超感謝的!! 感恩感恩!!
我已經訂閱你的部落格~期待你發表新文章!! 感恩!!
Re: 三咪一犬的窩 <6615617655485933470>
回覆刪除恭喜成功了,我有看到變清楚了,效果不錯,那我就偷懶一下,先不更新字體顏色,有需要的人按照本文文末的增補自行修改配置顏色了~~