2012年10月1日 星期一

Blogger 最新回應+留言者頭像(更新版)__留言內容收合

Blogger 最新回應+留言者頭像(更新版)__留言內容收合

Wayne Fu 0 A+

(Pic from: softicons.com,freepik.com,all-free-download.com)
一方面「原版本」 發現了一些 bug,因此需要出更新版;一方面也是讀了「Javascript 設計模式」 之後,剛好來練習新的 Javascript 撰寫模式,例如只用一個全域變數、規律的空格與縮排、集中 var,以及後面章節會提到的 HTML、CSS、Javascript 分離。由於撰寫模式變動很多,本篇的程式碼可說是近乎重寫。

2012.11.26 補充

如果需要顯示最新留言的文章標題,請參考另一個版本「
Blogger 最新回應+留言者頭像+文章標題


一、修正 bug 及更新要點

1. 刪除內容之留言:前陣子發現在原版本之下,若 "留言內容" 被「留言者」或「站長」刪除,但該則留言尚未被站長永久刪除時,最新回應的某個變數讀不到資料會導致當掉;本更新版修正了此 bug。

2. 含超連結之留言:在原版本之下若留言內有超連結,且留言摘要結束處截斷了超連結語法,會造成最新回應的該則留言與下則留言顯示格式錯誤;更新版修正了此 bug,且顯示留言全文時,超連結仍可正常作用。

3. 處理無留言的狀態:若部落格一篇留言都沒有時,原版本會顯示 "讀取中" 的動畫圖案,且永遠不會停止;更新版修正了此 bug,並加上 "目前尚無留言" 字樣。

4. 新增留言全文開合功能:按下留言內容、或各處的提示開合圖案,均可方便迅速的開合留言內容。可看右邊側邊欄的「最新回應」小工具測試效果。

5. 改變留言頭像圖案的真實尺寸:前陣子使用 Google 的「PageSpeed」測試網頁讀取速度時發現某些留言者的頭像圖案檔案很大,雖然原版本有將頭像 img 圖案的 width 參數改小,但實際上網頁還是會去讀取原本尺寸的圖案,因此會拖慢載入速度;更新版可自動將頭像圖案的 "真實尺寸" 改小



二、安裝程式碼

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 如果裝過「原版本」的話,請用以下程式碼將原程式碼覆蓋;如果沒有安裝過的話,請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:


存檔後即可,想先看效果可參考右邊的側邊欄。

2. 以上紅字、藍字為重要的修改參數,請參考「三、修改參數」。

3. AH 行以後的 javascript 區,為了節省空間所以把程式碼壓縮了;如果有其他的客製需求、或想瞭解原始碼的話,請下載「這個原始檔」。雖然附檔名為 js,但內容包含 HTML、CSS、Javascript,所以是不能外連的。

4. 一般來說,D~S 行的 CSS 區通常放在 HTML 之前;測試之後忽然發現,在 Blogger 的 HTML/Javascript 小工具裡面,CSS 擺在 HTML 之前可能會讓整個區塊往下移個幾行;但如果把 CSS 擺在 HTML 之後,除了不影響執行之外,HTML 也會回到正常位置,所以這是比較奇怪的地方。

5. 聯想到之前的「讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能」 就是把 CSS 擺 HTML 之前,似乎就會造成區塊下移,因此如果有安裝這個分頁小工具的話,若區塊位置顯示不正常,請試試看更動 CSS 的位置到 HTML 後面。


三、修改參數

請參照上面的程式碼行號來修改以下參數──

E~I:這是日期區塊的 CSS,可自行修改顏色、字體大小、或其他 style 參數。

P~R:這是小工具下方換頁區塊的 CSS,可自行修改字體大小或其他 style 參數。

V:從第幾則留言開始顯示,通常設為 1。

W:一頁顯示幾則留言

X:留言摘要的字元數

Y:頭像圖案的寬度像素 px 值

Z:藍字可改為自訂的 Blogger Logo 圖案網址。

AA:藍字可改為自訂的 OpenID 圖案網址。

AB:藍字可改為自訂的匿名圖案網址。

AC~AD:請自行對照一下小工具就知道怎麼改了

AE:展開留言的字元圖案

AF:收合留言的字元圖案


四、小結

如同「一、修正 bug 及更新要點」所提,這個更新版要處理的問題、與狀況很多,其實程式碼有很多可以討論的地方,但一一討論又太佔篇幅,因此把所有重要的修改參數都提供出來,相信可以減少很多提問。而如果看了前面提供的原始檔連結,對於內容有什麼疑問的話,請再另外提出了,比起我寫得長篇大論,相信這是比較有效率的處理方式。

2012.10.31 補充

本更新版修正「含超連結之留言」產生的 bug,以及「改變留言頭像圖案的真實尺寸」,這兩點的原理記錄在「正規表示式線上自動產生器」這篇文章

下一篇要從這個最新回應小工具的基礎上,再加上每則留言顯示文章標題的功能。原本是想把這個功能一起寫進本篇,不過由於本篇的程式碼不短,而且不一定每個人都需要在最新回應看到文章標題,所以我想分開來寫也是不錯,蘿蔔青菜各有所好,可以各取所需。
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP