Blogger 小工具Hack - 樹狀標籤系統

紀錄一下從官方RWD範本修改的歷程，安裝樹狀標籤系統 v2.0

樹狀標籤系統 v2.0

Note: v2.1目前無法適用blogger新版RWD範本，暫時只能用v2.0
From WFUBlog: v2.0, v2.1

確認引用JQuery，Label1字樣請更換為您範本中標籤工具的id.
在</head>前加入

<style>
/*樹狀標籤 V2*/

#Label1 {
 display: none;
 overflow: auto;
}
#tl2_main, #tl2_nav {
 font-size: 13px;
 font-weight: bold;
}
#tl2_nav {
 background-color: #d2bfa4;
 margin-bottom: 10px;
 padding: 3px;
}
#tl2_nav a {
 display: inline-block;
 box-sizing: border-box;
 width: 50%;
 text-align: center;
 border-left: 1px dashed #aaa;
}
#tl2_nav a:first-child {
 border-left: 0;
}
#tl2_nav a, #tl2_main a {
 text-decoration: none;
}
#tl2_main img {
 vertical-align: middle;
}
.tl2_category {
 margin-top: 2px;
}
a.tl2_catText {}
.tl2_subArea {
 margin: 0 0 5px 10px;
}
.tl2_label {
 margin-left: 5px;
}
</style>

在</body>前加入

<!-- 樹狀標籤 V2 start -->
<script>
 //<![CDATA[
 var tl2 = {
  target: "Label1", // 標籤小工具的 ID
  category: ["電腦", "數位生活", "休閒", "閱讀"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序
  showLevel: 2, // 預設打開的標籤層數, 填入 1 為全部收起的狀態
  showCategoryCount: "Y", // 大分類若不顯示文章數, 請填入 "N"
  //預設使用的開合圖示、標籤圖示，如使用圖檔,雙引號內請填入 http 開頭的網址
  openLogo: "▼",
  closeLogo: "►",
  listLogo: "⇢",
  //導航欄使用的各種提示圖示及文字，如使用圖檔,雙引號內請填入 http 開頭的網址
  openNav: "▼ 展開",
  closeNav: "► 收合"
 };
$.getScript("https://drive.google.com/open?id=1__ogCDyFir_jX4WGtzRAvVUlnoCTmgob");
$(function () {$("#Label1 .collapsible-title").click()}); //讓新版RWD標籤工具直接展開，不需要可刪除或註解本行
//]]>
</script>
<!-- Designed by WFU BLOG -->

其中google drive的連結無法外連，請自行下載後上傳至您可外連的空間並修改位址。

顯示真實標籤(多層次標籤結構)

確認引用JQuery.
在</body>前加入

<!-- 樹狀標籤只顯示真實標籤 start -->
<script>
 //<![CDATA[
 $(".post-labels a").each(function() {
  var $this = $(this),
   label = $this.html(),
   l;
  if (label.indexOf("-") > 0) {
   l = label.split("-").length;
   label = label.split("-")[l - 1];
  }
  $this.html(label);
 });
//]]>
</script>
<!-- Designed by WFU BLOG -->

相關系列文章：