开blog几天,也研究了几天HTML语法,发现以往的教程多数是基于日语界面编写的,对于开始使用中文界面的亲们可能会有点苦手,同样苦手的我在日本鸟文里晕了N次后,稍微有点成果出来了,所以我就脸皮厚厚的上来发文了~
咳咳……那个,教学谈不上,纯粹只是经验分享吧~
【何谓树形目录?】
如亲们所见,以上图为例,平时我们在【管理类别】中只能设置出【日志】和【FC2中文研究社】等“树干”,诸如【日有所思】、【电玩万岁】、【败家记录】等“树枝”就是我们无能为力的范畴了,而“如何帮树干生出树枝”就是本文的主题…(表达无能,希望亲们能看懂就好啦……
笑~)
please READ MORE吧=V=
Step1.【管理界面】-【环境设定】-【设定外挂程式】-【添加FC2外挂程式(PC用)】-添加【类别】。
注:如果已经有了【类别】就不用再添加了,添加后在【管理外挂程式(PC用)】里找到【类别】-【详细情报】-【外挂程式类别1】(这一步很重要哦,关系到最后能不能成功显示)
Step2.【管理外挂程式】-【添加FC2外挂程式】-添加【自由区域】
(跟添加【类别】不同的是,添加【自由区域】后会自动弹出【自由区域】的【详细情报】设定,然后在【外挂程式类别】里选择【2】,记得一定要【2】啊
~理由下述……接着请亲们在空白的内容框里添加以下HTML代码:
<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> |
请无视代码里头的日本鸟文,实验证明以上代码在中文界面里同样适用~
)
添加好之后记得按一下下头的【添加】哦。
Step3.【管理外挂程式】-【类别】-【详细情报】-【编辑HTML】,把HTML内容框里的代码删掉,换上以下代码:
<div id="categorylist"> <ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div> |
替换好后按一下【设定】,ok~
Step4.【环境设定】-【管理类别】-在【类别名称】处按照“[树干]树枝”的格式添加你的树形目录,不懂的看图
:
注:“树干”部分当然不是真的输入“树干”两个字,而是你的大类别名称,“树枝”部分同理,输入的是你要的小类别名称……
再对照第一张图,应该了解了吧?
注:每一行都要按照“[树干]树枝”的格式改好,是每一个哦!书写要顶格,不能输入乱码,否则效果显示不出来~
全部改好后记得按一下【修改】,yeah!!!大功告成!!!然后…然后亲们就可以去你的BLOG看一下效果出来没有啦~
附录1:要设置【最新留言】的树形目录,请将其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> |
【连结】替换代码:
<div id="linklist"> <ul>
<!--link-->
<li><a href="<%link_url>"><%link_name></a></li>
<!--/link-->
</ul>
</div>
<a href="./?admin">管理者專用</a> |
设定【连结】树干和树枝的格式和【类别】一样,只是每改一个都要按一下后面的【修改】,不然等你改完全部再按就囧rz了……
注:无论是设置多少个树形目录,添加了总代码的【自由区域】只要添加一个就够了~当然啦,你用来贴其他外挂的【自由区域】不算……(MS说了句很废的话
笑~)
附录2:关于【外挂程式类别】的问题,太深奥的我也不会解释,我只知道当【类别】or【连结】or【最新留言】在【类别1】时,添加的那个【自由区域】就要在【类别2】,当【类别】or【连结】or【最新留言】在【类别2】时,添加的那个【自由区域】就要在【类别3】,反正【自由区域】一定要在你要设定树形目录的那个外挂程式的下一层就对了~(好啰嗦……汗个)
为什么只有链接是树形分层的
其他的日志分类和最新评论都是没有变
能帮忙看一下么?
http://wingjing.blog94.fc2.com/
拜托了~