使用 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。

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




以上圖 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 則留言，會加上編號。