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

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 留言相關工具:

11 則留言:

  1. 真是好技巧,原來CSS還能這樣用

    回覆刪除
  2. 我添加在“Blogger 後台 → 主題 → 自訂 → 進階 → 新增 CSS”的代码是在范本的什么地方,因为重新进入这个界面后,就找不到代码了。
    还有可不可以直接在范本中添加代码。

    回覆刪除
    回覆
    1. 打開 [編輯 HTML], 點開下面那個 skin
      ----
      最後兩句便是

      刪除
    2. @lawyer Fu, "重新进入这个界面后,就找不到代码了" → 會不會是漏了按「套用至網誌」?

      除了可按照樓上 FreeTong Leung 提供的方法來尋找,不然就是在範本 /head 之前新增一個 style 標籤,手動加入 CSS 語法了~

      刪除
  3. 是否有辦法格式化?
    像是 001、002 這樣

    回覆刪除
    回覆
    1. 可參考 Counter 使用說明書 https://www.w3.org/TR/CSS21/syndata.html#counter
      關鍵字為使用 "decimal-leading-zero"
      範例可看這個 codepen: https://codepen.io/ced-anamorphik/pen/WQgQBj

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP