讓 Blogger 只顯示特定數量的標籤

協助架站時遇過幾個案例，為了版面美觀的緣故，案主不希望顯示所有的標籤。

仔細想想也是滿合理的，在首頁或標籤頁面，若某些文章設定了十多個標籤，全部顯示出來的確太過雜亂。那麼可以考慮只顯示 1 個或 2 個標籤就好，進入文章頁面時，再顯示全部的標籤。

不過這件事並沒有想像中簡單，需要對 Blogger 語法非常熟悉才行，弄不好可能會把網站改壞。建議有一定的 Blogger 修改實力再看本篇，初學者可能別自己來，交給專家處理比較好。

(圖片出處: stocksnap.io)

一、各種案例

1. 只顯示一行的寬度



上圖的版型，紅框處標籤太多時會超過一行的寬度，因此可採用這篇「讓標題過長的文字自動省略」的 CSS 語法技巧，讓標籤文字不會超過一行，並出現省略號。


2. 只顯示 1 個標籤



上圖的版型，紅框處刻意只顯示 1 個標籤，避免標籤太多時，會擠壓到右側的社群圖示，造成版面異常。


3. 只顯示 2 個標籤



上圖的版型，一行的寬度內要擠入作者、標籤、留言數量等資訊，那麼紅框處刻意只顯示 2 個標籤，可保持版面的美觀。

二、利用 CSS 隱藏標籤

1. 偽類語法

利用 CSS 的偽類 :nth-child可以只顯示前幾個標籤，將剩餘的標籤全部隱藏起來。

如果使用 Blogger 官方範本的話，標籤位於 .post-labels 的區塊之中。

.post-labels a:nth-child(n+3){display: none;}
在範本中增加以上 CSS 語法，可以只顯示前 2 個標籤，將第 3 個以後的標籤全部隱藏起來。


2. 逗號問題

但是 Blogger 預設會將每個標籤名稱，以小寫逗號 ","隔開，那麼使用 CSS 技巧來隱藏標籤的話，無法一併隱藏小寫逗號，會造成版面不美觀。


3. 去除逗號

如果熟悉 Blogger 語法的話，可以找到範本中小寫逗號的位置，去除這個小寫逗號，算是一個變通的方案。

經由這個處理方式呈現的效果，可參考「一、各種案例」→「2. 只顯示 1 個標籤」

三、修改 Blogger 語法

大部分的版面，標籤還是需要有分隔的符號，閱讀起來比較清楚易懂。為了解決逗號的問題，最好是從修改 Blogger 語法下手。

如果不熟悉 Blogger 範本的話，修改前請勿必先閱讀「備份範本的訣竅」系列文章。

同時最好具備一定的修改功力，因為標籤的語法在範本中可能會找到很多組，要確定你知道改的是哪一組。

標籤的相關語法，在範本中可找到類似以下：

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='not data:label.isLast'>,</b:if>
</b:loop>

把以上程式碼改成以下：

• 紅色數字 2 代表只顯示前 2 個標籤
• 藍色數字 1 代表第 1 個以後的小寫逗號都不顯示
• 想要顯示不同數量的標籤，將這兩個數字改為自訂數字即可。

經由這個處理方式呈現的效果，可參考「一、各種案例」→「3. 只顯示 2 個標籤」。