(Pic from: softicons.com,freepik.com,all-free-download.com)一方面「原版本」 發現了一些 bug,因此需要出更新版;一方面也是讀了「Javascript 設計模式」 之後,剛好來練習新的 Javascript 撰寫模式,例如只用一個全域變數、規律的空格與縮排、集中 var,以及後面章節會提到的 HTML、CSS、Javascript 分離。由於撰寫模式變動很多,本篇的程式碼可說是近乎重寫。
如果需要顯示最新留言的文章標題,請參考另一個版本「
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 及更新要點」所提,這個更新版要處理的問題、與狀況很多,其實程式碼有很多可以討論的地方,但一一討論又太佔篇幅,因此把所有重要的修改參數都提供出來,相信可以減少很多提問。而如果看了前面提供的原始檔連結,對於內容有什麼疑問的話,請再另外提出了,比起我寫得長篇大論,相信這是比較有效率的處理方式。
本更新版修正「含超連結之留言」產生的 bug,以及「改變留言頭像圖案的真實尺寸」,這兩點的原理記錄在「正規表示式線上自動產生器」這篇文章
下一篇要從這個最新回應小工具的基礎上,再加上每則留言顯示文章標題的功能。原本是想把這個功能一起寫進本篇,不過由於本篇的程式碼不短,而且不一定每個人都需要在最新回應看到文章標題,所以我想分開來寫也是不錯,蘿蔔青菜各有所好,可以各取所需。
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。