2011年11月22日

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

A+
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 檔務必注意本文「四、修改程式碼」的紅字,否則會發生慘劇。色碼表請先參考此網址:「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 後面的色碼。

另外,js 檔放上網頁空間後,如果之後 js 檔內容有修改,要重新上傳,請改不同的檔名,如果相同的檔名瀏覽器內會有 cache ,可能會誤判,仍然採用舊的 js 檔內容,所以改檔名是最保險的方法。

5 則留言:

  1. Hi, 站長你好, 首先感謝你提供這個資訊讓我們使用, 我有幾個小問題要請教你

    1. 我現在目前想先使用你提供的簡易教學就好, 但是我構想的是, 我可以複製你的.js檔就好, 然後修改之後傳到我的空間去嗎? (會有資料庫寫不進去的問題嗎?)

    2. 上個問題所提到的修改就是想要修改推文內容的字體顏色, 如果第一個問題是可以解決的, 我想請問是不是可以教我怎麼改字體顏色呢?

    感謝你的教導唷!! 期待你的回覆!!

    回覆刪除
  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 檔內容,改檔名是最保險的方法。

    回覆刪除
  3. 好複雜啊!! (更讓我敬佩你的實力跟耐心!! 請接受小弟一拜!!)

    我去準備咖啡來好好研究一下好了!!
    成功了再來跟你報告!! 感恩!!

    回覆刪除
  4. 成功了成功了成功了!!

    我簡單改了一下~變得很清楚囉!!!!!!!!!


    超感謝的!! 感恩感恩!!

    我已經訂閱你的部落格~期待你發表新文章!! 感恩!!

    回覆刪除
  5. Re: 三咪一犬的窩 <6615617655485933470>

    恭喜成功了,我有看到變清楚了,效果不錯,那我就偷懶一下,先不更新字體顏色,有需要的人按照本文文末的增補自行修改配置顏色了~~

    回覆刪除

張貼留言注意事項:

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