Blogger 推文系統 V1.0 自訂安裝說明

2012.5.2 公告：

推文系統 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 試算表當資料庫，而既然放棄簡易安裝、選擇進階安裝方式，那麼找個網頁空間是必須的動作。

2011.11.25 增補

建議使用「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(推文內容)兩個變數， 把「<」、「>」這兩個符號轉換為「&lt;」、「&gt;」，封鎖推文內容的 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：處理完資料後，把推文內容清空。

以上為主要程式的流程，還有一些函數沒有提到，不過大多與版面配置、動態效果有關，想要做細部調整的站長們請再自行研究一下了。


2011.11.26 增補

六、改表格顏色

三咪一犬的窩 於【留言 #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 檔內容，所以改檔名是最保險的方法。