《備份》プラグインのツリー化

我是根據少爺B的世界裡的「樹狀分類說明 & 語法 (一)」、「樹狀分類說明 & 語法 (二)」這二篇教學來修改Blog。

１．將分類欄位（如：分類目錄、最新文章、最新回覆、最新引用、Link）的HTMLを編集完全改成以下語法：

(1).最新コメント（=最新回覆）
＜div class="plugin_data" id="commentlist"＞
＜ul＞
＜!--plugin_comment--＞
＜li＞
＜!--$plugin_comment_entry_title--＞＜br＞
＜span class="plugin_cm＜!--if_comment_res--＞_with_res＜!--/if_comment_res--＞"＞＜a href="＜!--$plugin_comment_link--＞"＞＜!--$plugin_comment_title--＞＜/a＞
＜!--if_comment_res--＞ +Re＜!--/if_comment_res--＞＜/span＞ (＜!--$plugin_comment_mon--＞/＜!--$plugin_comment_day--＞)
＜/li＞
＜!--/plugin_comment--＞
＜/ul＞
＜/div＞

(2).最新トラックバック（=最新引用）
＜div class="plugin_data" id="tblist"＞
＜ul＞
＜!--plugin_trackback--＞
＜li＞
＜!--$plugin_trackback_entry_title--＞＜br＞
＜a href="＜!--$plugin_trackback_link--＞"＞＜!--$plugin_trackback_blog_title--＞＜/a＞ (＜!--$plugin_trackback_mon--＞/＜!--$plugin_trackback_day--＞)
＜/li＞
＜!--/plugin_trackback--＞
＜/ul＞
＜/div＞

(3).最新記事（=最新文章）
＜div class="plugin_data" id="entrylist"＞
＜ul＞
＜!--plugin_entry--＞
＜li＞＜a href="＜!--$plugin_entry_link--＞"＞＜!--$plugin_entry_title--＞＜/a＞ (＜!--$plugin_entry_mon--＞月＜!--$plugin_entry_day--＞日)＜ /li＞
＜!--/plugin_entry--＞
＜/ul＞
＜/div＞

(4).アーカイブ（=文章彙集）
＜div class="plugin_data" id="archivelist"＞
＜ul＞
＜!--plugin_archive--＞
＜li＞＜a href="＜!--$plugin_archive_link--＞"＞[＜!--$plugin_archive_year- -＞年]＜!--$plugin_archive_mon--＞月＜/a＞ (＜!--$plugin_archive_num--＞)
＜/li＞
＜!--/plugin_archive--＞
＜/ul＞
＜/div＞

(5).カテゴリー（=分類目錄）
＜div class="plugin_data" id="categorylist"＞
＜ul＞
＜!--plugin_category--＞
＜li＞＜a href="＜!--$plugin_category_link--＞"＞＜!--$plugin_category_title--＞ (＜!--$plugin_category_num--＞)＜/a＞＜/li＞
＜!--/plugin_category--＞
＜/ul＞

(6).リンク（=Link）
＜div class="plugin_data" id="linklist"＞
＜ul＞
＜!--plugin_link--＞
＜!--if_not_link_img--＞
＜li＞＜a href="＜!--$plugin_link_link--＞" target="＜!--$plugin_link_target--＞"＞＜!--$plugin_link_title--＞＜/a＞＜/li＞
＜!--/if_not_link_img--＞
＜!--/plugin_link--＞
＜/ul＞
＜/div＞
＜br＞
＜!--plugin_link--＞
＜!--if_link_img--＞
＜div class="plugin_data"＞
＜a href="＜!--$plugin_link_link--＞" target="＜!--$plugin_link_target--＞"＞＜img src="＜!--$plugin_link_img_link--＞" width="＜!--$plugin_link_img_width--＞" height="＜!--$plugin_link_img_height--＞" alt="＜!--$plugin_link_title--＞"＞＜/a＞
＜/div＞
＜!--/if_link_img--＞
＜!--/plugin_link--＞
＜/div＞

２．再到「環境設定」→「カテゴリーの編集」，將分類名稱寫成[大分類]小分類。

３．再將以下語法貼在＜/body＞前，而我是放在「プラグインの設定」裡的最後一個分類欄位裡，這樣子就可以方便帶著走 XD
＜script type="text/javascript"＞
＜!--
// JavaScript based on : JUGEMカスタマイズ講座(http://nz.jugemers.net/log/eid31.html)
// customize by : まめの一言（JUGEM出張所）(http://mamejiro.jugem.cc/?eid=179)
// customize by : ニンブロラボ.(http://shinobibloglab.blog.shinobi.jp/Entry/2/)
// customize by : playground(http://mannequin.blog.shinobi.jp/Entry/45/)
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 tmplinkUrl = linkUrl.split("#");
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/＜BR/i));
this.base = Array('＜a href="',tmplinkUrl[0],'"＞',tmpText[0],'＜/a＞').join('');
this.elem = tmpText[1];
} else if (idName.indexOf('entry') ＞ -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d{2}.+)\)/);
this.base = RegExp.$1;
this.elem = Array('＜a href="',linkUrl,'"＞',objLink.innerHTML,'＜/a＞').join('');
} else if (idName.indexOf('link') ＞ -1) {
var tmpTarget = objLink.getAttribute('target');
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = RegExp.$1;
this.elem = Array('＜a href="',linkUrl,'" target="',tmpTarget,'"＞',RegExp.$2,'＜/a＞').join('');
}
} else if (idName.indexOf('category') ＞ -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = RegExp.$1;
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(/\[(.+)\](.+)/);
this.base = RegExp.$1;
this.elem = Array('＜a href="',linkUrl,'"＞',RegExp.$2,'＜/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; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '⇒ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '＜br＞\n'; /* 各枝の末尾 */
gTreeOption['top'] = '＜br＞\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
/* ツリーオプションここまで */
createTreeList('entrylist',gTreeOption); // 最新記事リストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリーリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
/* ツリーオプションここから 最新コメント、最新トラックバック以下方法顯示 */
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '┣'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '┗'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '＜br＞\n'; /* 各枝の末尾 */
gTreeOption['top'] = '＜br＞\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
/* ツリーオプションここまで */
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
// --＞
＜/script＞


再參考Ringo Juice」裡的「在群組化部分插入圖片的方法(FC2適用)」及JUGEMカスタマイズ講座」裡的「ツリー化スクリプト ver 2」、「ツリー化カスタマイズ応用編」這三篇教學，將樹狀以圖片的方法取代之前的├、└，使畫面變的更好看。不過這要用到css部份，css對我來說是謎樣的程式，有看沒懂啊～其實在這不懂沒關係，因為只要照著做就可以嘍！

１．先將虛線lst,end這二個檔案，存入網頁空間，並將網址記下。
２．把下列的語法加入css語法的最底下。
　　url(****)，請依照下面說明，把剛才記下的網址打上去。
/************************************/
/* list群組化 */
ul.tree {
margin: 0px!important;
padding: 0px!important;
list-style: none!important;
}
ul.tree li{
margin: 0px!important;
padding: 0px 0px 0px 16px!important;
background-image: url(輸入lst.gif網址);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(輸入end.gif網址);
}

３．在「HTMLの編集」找到最先的樹狀語法，如下：
/* ツリーオプションここから 最新記事、リンク、カテゴリー、アーカイブ以下方法顯示 */
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '＜br /＞\n'; /* 各枝の末尾 */
gTreeOption['top'] = '＜br /＞\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
/* ツリーオプションここまで */

　　將它們取代為：
/* ツリーオプションここから 最新記事、リンク、カテゴリー、アーカイブ以下方法顯示*/
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '＜li class="lst"＞'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '＜li class="end"＞'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '＜/li＞\n'; /* 各枝の末尾 */
gTreeOption['top'] = '＜ul class="tree"＞'; /* ツリー本体の最初 */
gTreeOption['btm'] = '＜/ul＞'; /* ツリー本体の最後 */
/* ツリーオプションここまで */

４．這樣子就全部完成囉！

這篇文章，有很多都是從上述連結的人的文章裡拷貝過來的，而我略修改成我自己的版本罷了，所以這不是教學唷！