2017年5月1日 星期一

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

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

Wayne Fu 0 A+
blogger-not-display-all-labels-讓 Blogger 只顯示特定數量的標籤協助架站時遇過幾個案例,為了版面美觀的緣故,案主不希望顯示所有的標籤。

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

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

(圖片出處: stocksnap.io)


一、各種案例


1. 只顯示一行的寬度

blogger-not-display-all-labels-1-讓 Blogger 只顯示特定數量的標籤

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


2. 只顯示 1 個標籤

blogger-not-display-all-labels-2-讓 Blogger 只顯示特定數量的標籤

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


3. 只顯示 2 個標籤

blogger-not-display-all-labels-3-讓 Blogger 只顯示特定數量的標籤

上圖的版型,一行的寬度內要擠入作者、標籤、留言數量等資訊,那麼紅框處刻意只顯示 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 個標籤」。


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

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP