2011年10月1日 星期六

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

Wayne Fu 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 檔內容,所以改檔名是最保險的方法。
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP