Blogger 樹狀文章分類

有網友詢問如何在 Blogger 上建構樹狀文章分類。以下是設定教學。（範例演示。）

一、首先到後臺於側欄增加元件「標籤」（Labels），並按下圖設定：


其中「小測試」為我命名的大分類，並在「Selected Labels」選擇我想放於其下的眾小分類。

之後，重複如上步驟建置其他大分類。


二、在後臺編輯 HTML，勾選「展開小裝置」，在 </head> 之前貼上如下語碼：

<script type='text/javascript'>
function Toggling(id) {
  var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);
  for(i = 0; i &lt; element.length; i++) {
    attribute = element[i].getAttribute(&#39;id&#39;);
    if(attribute == &#39;toggle&#39;)
    {
      if (element[i].style.display == &#39;none&#39;)
        element[i].style.display = &#39;inline&#39;;
      else
        element[i].style.display = &#39;none&#39;;
    }
  }
}   
</script>


三、在語碼中找出你的第一個大分類如下：

<b:widget id='Label1' locked='false' title='小測試' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
  <h2><data:title/></h2>
 </b:if>
 <div expr:class='"widget-content " + data:display + "-label-widget-content"'>

將以下紅字部份加上：

<b:widget id='Label1' locked='false' title='小測試' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
  <h2><a href='javascript:void(0);' onclick='javascript:Toggling("Label1");'>[+/-]</a><data:title/></h2>
 </b:if>
 <div expr:class='"widget-content " + data:display + "-label-widget-content"' id='toggle' style='display:none;'>


四、再找到其它大分類，重複步驟三。其中 Label1 字眼須改成對應的 Label2、Label3……等等。

＊＊＊完畢＊＊＊


關於形式修改：

1. <h2> 是預設的 Widget 標題字型，可另外透過 CSS 語法更改之。例如將「<h2> ... <h2>」改成「<span style="font-size: 16px; color: #ff0000;"> ... <span>」。

2. 可在眾大分類之上另外加個 HTML/JavaScript 或 Text 元件標示「文章分類」。

3. 若想更改 Widget 之間的間隔形式，可在後臺 HTML 中找出「.sidebar .widget, .main .widget」語碼，修改其 CSS。


註：本文提供的展開收合語碼源自 Abin's Tech Note。


---
相關文章：樹狀分類土法煉鋼版（連結手動加入）。