20050124_01.jpg

FC2 BLOG分類樹狀顯示的語法(中文教學)

在逛其他FC2的BLOG時發現怎麼有人的分類也弄了樹狀來顯示,查了老半天後,終於找到新版的語法,以下語法適用於FC2的BLOG,引用自:初心者歓迎!ブログdeアフィリエイト裡的カテゴリをツリー化する方法。

步驟一:放上轉換語法

進入プラグインの設定,追加一個外掛欄位(將它排在最下方)在HTML編輯裡貼入以下語法,或是將此語法加入目前已經有的外掛欄位裡(建議為顯示順序中的最下面的一個),如計數器或水滴中的HTML編輯裡,原語法的下方,如果你先前已經有使用樹狀回應的語法,直接替換成這版即可

如原本為這樣:

<p class="plugin-freearea" &align>
&freearea
</p>

在底下多加入這段語法

<script type="text/javascript">
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("∟");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
<!-- ▼ツリー化スクリプトのカテゴリ・アーカイブ対応(ここから) -->
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('',RegExp.$1,'').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('[',RegExp.$2,']').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
<!-- ▼ツリー化スクリプトのカテゴリ・アーカイブ対応(ここまで挿入 -->
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false;
gTreeOption['list'] = '├ ';
gTreeOption['end'] = '└ ';
gTreeOption['leef'] = '<br />\n';
gTreeOption['top'] = '<br />\n';
gTreeOption['btm'] = '';
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
</script>

步驟二:修正外掛設定裡的分類目錄顯示格式

進入プラグインの設定,カテゴリー(分類目錄)這項,點HTML編輯,將原本的語法取代成這樣:

<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>

步驟三:分類名稱的修正

進入カテゴリーの編集 ,將你的分類名稱全部改成以下格式,[ ]內是大分類的名稱,也就是目錄的名稱,請留意中括號是半型,請留意,預設分類裡有個未分類,那個也要改成這樣的格式

格式:[目錄名]分類名稱
範例1:[鳥兒]我的鳥
範例2:[未分類]未分類

補充說明:最新回應的樹狀顯示

進入プラグインの設定,最近のコメント(最新回應),點HTML編輯,將裡頭原本的語法取代成這樣:

<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment"><%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li>
<!--/rcomment-->
</ul>
</div>

大功告成,預覽看看吧!如果你用的樣版不支援外掛的話,以上程式需自行修正樣版的HTML.

本文參考引用自:

[ブログdeアフィリエイト] カテゴリをツリー化する方法。

延申閱讀:
FC2中文教學-連結集及引用的群組化
[Ringo Juice]在群組化部分插入圖片的方法(FC2適用)

創作者介紹

白文MIMI與小鸚KIKI的生活記事_PIXNET分店

petlife5 發表在 痞客邦 留言(4) 人氣()


留言列表 (4)

發表留言
  • 柳
  • 不好意思,我想請問一下這個語法
    因為我文章分類不管怎麼弄都失敗(淚)
    可是連結的部份是很正常
    我是照步驟去做,但是不知道為什麼就是失敗.....

    我也不知道問題是出在哪裡.....
    可以告訴我還有哪些地方是要注意的嘛?
    真是抱歉ˊˋ
  • Rin Mizuki
  • 那個小倩你好,因為你的這篇說明令我很成功的弄出分層來,我也想讓去我過部落格的人知道,所以就打上這篇的連結網址,這樣你不會介意吧?
     
    謝謝你的解說。(鞠躬)
     
     
    Rin Mizuki
  • 逆影
  • 感謝教學~

    修改成功>ˇ<
    大大的教學非常仔細!

    倒是,要記得將原本的分類欄位改為"不顯示",
    否則上面會出現一個樹狀分類,後面又出現一個原分類XD

    剛申請FC2空間,還不太適應管理介面,繼續摸索~~

    只是,不曉得是否有修改欄位寬度的語法??剛剛翻了但沒找到結論bb(希望文章欄位能指定寬度XD)
  • 薩迦
  • 感謝教學!!
    但我想請問一下~
    不知道為什麼我一直都失敗呢,是不是第一步驟的語法不能全貼,有部分要改?
    還有我是用BLOG128的部落格,樣版是共享的,這些會影響到這個分層語法嗎?