2017年6月1日 星期四

使用 CSS 語法就能讓 Blogger 自動產生留言編號

使用 CSS 語法就能讓 Blogger 自動產生留言編號

Wayne Fu 0 A+
blogger-comment-counter-css-使用 CSS 語法就能讓 Blogger 自動產生留言編號趁著網站改版,決定好好檢視所有程式碼,能優化的地方就處理,例如去除不必要的 javascript、或找替代方案,因為「優化網站效能該注意哪些事?」有提過,影響網頁載入速度最重要的第二大因素,就是 JS。

之前曾寫過「Blogger 串聯式留言__留言編號」,是利用 JS 處理。這次則研究一下能否用 CSS 處理,結果發現可行,那麼以下紀錄我的作法。


(圖片出處: pixabay.com)


一、CSS 計數器


1. IE 支援度

CSS2 支援了計數器語法 counter,剛好可用在本篇的主題,讓每則留言自動產生 "留言編號",不用另外寫 js 控制。

不過需要注意的是,IE8(含)以下不支援這個語法。

其實本站已對 IE10 以下的版本放生,且認為 IE 遲早被市場淘汰,所以 IE 支不支援覺得無所謂。


2. counter 使用方式

詳細的語法教學可參考這篇「讓 CSS 自動幫你數數」,不過使用留言編號的功能,只需要瞭解以下就好,附上範例語法:

li {counter-increment: no;}
li a:after {content: counter(no)}

  • 開始計數之前,設定 counter-increment 語法,並指定代號字串。上面的範例可看到,代號字串設定為 "no"。
  • 如果每次計數都是自動 +1,就不必額外設定參數(如上面的範例);如果要自動 +5、或 -2 等等,在代號字串後面就得空一格,加上數字,例如 no -2。
  • 接著在需要產生計數的元素,使用偽類來存放、顯示編號
  • 在偽類設定參數 content,代表存放的內容,語法為 counter 後面加上小括號 (),包覆前面設定的代號字串 "no"。

這麼做之後,每個 li 的後面(:after)就會自動產生編號,從 1 開始續編。



二、新增 Blogger 留言編號 + 樣式


有了基本概念後,接下來可以對 Blogger 範本進行 hack。

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


blogger-comment-counter-1-使用 CSS 語法就能讓 Blogger 自動產生留言編號

以上圖 DEMO 網頁的效果為例,進行 CSS 語法示範。

請到 Blogger 後台 → 主題 → 自訂 → 進階 → 新增 CSS

新增以下 CSS 內容:

.comment-thread > ol > li{counter-increment:count}
.comment-thread > ol > li:before{content:"#" counter(count); float:right; margin-right:10px; padding:2px 5px; color:#5e7380; border:1px dashed #d2d2d2;}


按「套用至網誌」即可看到效果。

如果熟悉 CSS 的話,可自行修改版面樣式,這個效果的設計構想如下:

  • 讓留言編號浮動在右側
  • 回覆的留言,雖然也有辦法產生獨立的編號,但因不想讓版面看起來過於雜亂,因此不讓回覆的留言產生編號
  • 因此只有每個討論串的第 1 則留言,會加上編號。




更多 Blogger 留言相關工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP