樹形日志分類、評論、鏈接、最新日志 shinobi BLOG Ver.
按照这个步骤成功的同学也请留言告诉我吧^O^
开始前的扫盲：（能人请跳过）
所谓template的html/css代码：
按照这个步骤打开口的窗口，在右上方的框框里的就是template的html代码；右下方的框框里是template的css代码。其中html代码对应的是整个面板的布局；而css代码用于整个面板的字体背景等等的美化。
所谓plugin的html代码：
按这个步骤打开看到的就是plugin的html代码。作用部分是页面边栏，写在这个位置的代码，即使换了面板也不会受影响。
-----------------------------正文-------------------------------
第一步，把下面的代码复制到template的html中，<body>和</body>这两个标签之间，建议直接找</body>（一般都在倒数第二行），然后复制到它上面。
<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 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 = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('[',RegExp.$1,']').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('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2,'</a>').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'] = '<li>'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>\n'; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linkslist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>
第二步，保存下面的两个图片。上传后获取地址。
tree_list.gif
tree_end.gif
然后复制下面的代码，贴入template的css部分。
红色的地方填上上面两张图片的url地址。
.plugin_data ul{
list-style: none;
margin: 0px;
padding: 0px;
}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(http://file.*****.blog.shinobi.jp/tree_lst.gif);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(http://file.*****.blog.shinobi.jp/tree_end.gif);
background-repeat: no-repeat;
}
第三步，选择下面的相应代码，贴入对应プラグイン（plugin、侧边栏）的html部分。替换原本的内容。
コメント（comment、评论）的树形代码：
<div class="plugin_data" id="commentlist">
<ul>
<!--plugin_comment-->
<li><!--$plugin_comment_entry_title--><br />⇒<a href="<!--$plugin_comment_link-->"><!--$plugin_comment_title-->(<!--$plugin_comment_mon-->/<!--$plugin_comment_day-->)</a></li>
<!--/plugin_comment-->
</ul>
</div>
カテゴリ（category、日志分类）的树形代码：
<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>
</div>
然后将所有的日志分类改成：[兴趣]音乐 这样的格式。
以下部分的原文：リンクのツリー化
リンク（link、链接）的树形代码：
<div class="plugin_data" id="linkslist">
<ul>
<!--plugin_link-->
<li><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--if_link_img--><img src="<!--$plugin_link_img_link-->" width="<!--$plugin_link_img_width-->" height="<!--$plugin_link_img_height-->" border="0"><br><!--/if_link_img--><!--$plugin_link_title--></a></li>
<!--/plugin_link-->
</ul>
</div>
一样也需要把所有的链接文本设置成：[好友]shinobi 这样的格式
注意：只有文本形式的链接会树形显示，图片Bannar无法表示成树形。
如果想在一个侧边栏里同时实现文本链接的树形和图片链接的非树形（如下图），建议使用フリーエリア(Free area)，代码如下：
<div class="plugin_data" id="linkslist">
<ul>
<li><a href="http://www.shinobi.jp/" target="_blank">[Official]shinobi.jp</a></li>
<li><a href="http://blog2.community.shinobi.jp/" target="_blank">[Official]カスタマイズBBS</a></li>
<li><a href="http://blog.community.shinobi.jp/" target="_blank">[Official]ユーザーサポートBBS</a></li>
<li><a href="http://blog.shinobi.jp/Tag/" target="_blank">[Official]独自タグ解説書</a></li>
<li><a href="http://start.blog.shinobi.jp/" target="_blank">[BLOG]カスタマイズin忍者ブログ</a></li>
<li><a href="http://torajirobellepuu.blog.shinobi.jp/" target="_blank">[BLOG]★ ぼやき。 ★</a></li>
<li><a href="http://playground.blog.shinobi.jp/" target="_blank">[BLOG]The Preparation Room</a></li>
<li><a href="http://kisato.blog.shinobi.jp/" target="_blank">[BLOG]kisatonomori blog</a></li>
<li><a href="http://torin717.blog.shinobi.jp/" target="_blank">[BLOG]ゆっくりと(^-^)しっかりと</a></li>
</ul>
</div>
<div class="plugin_data">
<ul>
<li><a href="http://shinobibloglab.blog.shinobi.jp/"><img src="http://file.shinobibloglab.blog.shinobi.jp/shinobibloglab_s.png" border="0" alt="ニンブロラボ." width=88 height=31></a></li>
</ul>
其中这部分是文本链接的代码，这部分是图片链接的代码，也就是说链接必须自己在html中通过代码添加，而无法使用后台的链接编辑（リンクの編集）。
最新日志（最新記事）的树形代码：
<div class="plugin_data" id="newentrylist">
<ul>
<!--plugin_entry-->
<li><a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</li>
<!--/plugin_entry-->
</ul>
</div>
以上。
COMMENT
setsunayu: 無題
- 2012/06/12 17:53 EDIT
謝謝姑娘><
Backlinks: backlinks
- 2012/05/14 01:54 EDIT
Hey kirara.syoyu.net admin
I wanted to tell you about this website I used with great results, that drives thousands of targeted visitors to your site who are dying to spend money!
You’ve probably already know that creating great content is only half the battle when it comes to running a successful website. The second half of the equation is DRIVING TRAFFIC!
With this service, you can forget about the tedious process of posting backlinks because they do everything for you so you can focus on more important things, like dealing with the flood of traffic to your site!
And that’s not all! this service is SUPER AFFORDABLE and will direct thousands of new visitors to your site in just hours, GUARANTEED!
This is the only service that can skyrocket your page to the top of the search engines!
You can check it out here:
<a href=http://xrumerservice.org>backlink service</a>
Best,
Jason
ntk: 無題 URL
- 2011/09/07 23:38 EDIT
各種感謝原POwww
kolo: 球、球助TUT URL
- 2011/05/11 19:31 EDIT
影落音。: 成功~
- 2011/04/02 11:40 EDIT
尤其是link方面的（個人很喜歡分類
但最近發現一個link方面的小bug（不知算不算bug
如果將link部份分part，那第二或往後的part都會沒有了樹形效果
做的link已經超出了字節範圍……
想問下這個有辦法解決么？
KIRARA
- 2011/04/03 18:54
dainchyin: 成功！！
- 2011/03/25 23:21 EDIT
page: 已成功~
- 2011/02/20 18:13 EDIT
另外还有一个小问题，树形上的小图案如何添加？
野生妖精: 教程很好用= 3= URL
- 2010/11/05 04:36 EDIT
终于调教好了link部分> <
壹: 無題
- 2010/10/07 21:46 EDIT
伯夜酱: 你好~ URL
- 2010/10/06 22:57 EDIT
贪心的问下，像亲的COMMENT的树形里那种前面有个爱心符号的是怎么弄的捏？
KIRARA
- 2010/10/07 03:36
爱心的话是在第三段代码那里改的，在适当的位置加上♥就好
黒沢みつよ: 無題 URL
- 2010/08/21 13:30 EDIT
時代: 無題 URL
- 2010/06/13 14:35 EDIT
philia: 無題 URL
- 2010/06/11 22:58 EDIT
我果然很蠢啊
imino: 無題 URL
- 2010/05/24 16:15 EDIT
再次感謝你的分享
imino: 無題 URL
- 2010/05/24 16:09 EDIT
非常感谢你的分享，帮了很大的忙，非常感谢！
我的问题跟前几位一样……分类的树形显示出不来囧……
Utopia: 無題
- 2010/05/18 23:46 EDIT
Utopia: 無題
- 2010/05/18 23:31 EDIT
我我我我……我还是邮件吧Orz
麻烦亲了Orz
小雨: 無題
- 2010/05/13 04:44 EDIT
KIRARA
- 2010/05/13 08:33
歪: 無題 URL
- 2010/05/12 12:35 EDIT
KIRARA
- 2010/05/12 14:00
sa: 無題
- 2010/05/07 13:54 EDIT
sa: 無題
- 2010/05/06 17:00 EDIT
不知道表达清楚没
KIRARA
- 2010/05/06 20:47
亲说的那个功能用javascript应该能编出来。那得找学过这个的人了（js程序我只会读没编过）
sa: 無題
- 2010/05/06 16:53 EDIT
kumiv: 無題 URL
- 2010/05/02 16:52 EDIT
但还有问题啊。
就是最新记事上弄了树形就无法显示“new”了。link上也是。
另外还有个问题，但是说不清楚，我已经发你邮箱了。
KIRARA
- 2010/05/09 21:24
littlevan: 無題
- 2010/04/30 15:33 EDIT
KIRARA
- 2010/04/30 16:24
之前无法树形是因为“管理画面”没有更改成“[XX]管理画面”的形式。
littlevan: 無題
- 2010/04/30 01:22 EDIT
KIRARA
- 2010/04/30 08:59
line: 無題 URL
- 2010/04/24 02:31 EDIT
KIRARA
- 2010/04/24 09:56
葉乙: 無題
- 2010/04/22 11:25 EDIT
团团: 無題
- 2010/04/18 19:46 EDIT
Else: 無題
- 2010/04/18 18:45 EDIT
KIRARA
- 2010/04/18 19:45
具体问题我用邮件回复给亲了
Else: 無題
- 2010/04/18 18:29 EDIT
让后再在プラグインの設定链接啊评论啊什么不都是一个一个插件么，然后那里面的代码我也分别替换了但是还是没有变化啊=。=
我能同求大大进后台帮我改一下么。。。大大邮箱是什么？
KIRARA
- 2010/04/18 18:33
团团: 無題
- 2010/04/18 14:55 EDIT
KIRARA
- 2010/04/18 17:57
亲的那个在div#plugin{ 下面直接加上一句 font-size: 10px; 就ok了
或者亲把树形的第一部分代码放在某一个plugin里面看看（新建一个free area的plugin也可以）
我换成亲的template也可以树形成功呢
再失败的话亲可以把用户名密码发到我邮箱，我进后台看一下
（真的很好奇为什么会不行？！）
Else: 無題
- 2010/04/18 13:22 EDIT
KIRARA
- 2010/04/18 18:00
是说没能成功修改plugin的代码？
团团: 無題
- 2010/04/17 17:43 EDIT
紧贴</body>的上面 是</body>的上面！！！！還想問下怎麼把側欄的字改小~~~~
KIRARA
- 2010/04/17 18:31
以前在FC2貌似听说过代码必须在目标栏的下方才有效。
改侧栏字体大小的方法：
进入template的css代码，找.PluginContents {
把里面的font-size: 12px;的数字改掉就行了，我这里是10px
注意不要弄丢;什么的
团团: 無題 URL
- 2010/04/17 17:39 EDIT
renka: 無題
- 2010/04/16 21:37 EDIT
已经都OK了~~XD
紋: http://mowen.3rin.net/
- 2010/04/12 16:48 EDIT
紋: http://mowen.3rin.net/
- 2010/04/12 12:08 EDIT
構造上のエラー:<!--plugin_entry-->タグの終了タグが 1 足りません。
<!--plugin_entry-->に対応する終了タグが見つかりません。[開始タグ位置：4行目付近]
還有贴入template的css部分這個是隨便放在CSS的哪部分都可以？
話說我現在改著改著就只能進后臺主頁進不了OTL
KIRARA
- 2010/04/12 14:41
<!--plugin_entry-->
<!--/plugin_entry-->
标签必须成对出现，就像html的<font></font>一样。我之前试过不加这两个标签，中间的代码会无法运行，所以确保它们出现在entry相关代码的一头一尾。
css代码是放在哪里都行的～
我去亲家里看了，现在显示“当前使用的template或者plugin的代码有问题，无法显示页面”
EIIN: 無題
- 2010/04/11 14:24 EDIT
KIRARA
- 2010/04/11 16:13
❉小 雪❉: 無題 URL
- 2010/04/09 16:13 EDIT
❉小 雪❉: 無題 URL
- 2010/04/09 14:13 EDIT
link..和评论都可以树形...
就是分类不行啦..~囧
不知道是什么问题,想不通的说...
KIRARA
- 2010/04/09 15:52
路人甲: 無題
- 2010/04/08 17:40 EDIT
liao7428: 無題
- 2010/04/08 17:31 EDIT
博主能不能把鏈接的代碼也放出來~~~~
aoi: 無題
- 2010/04/07 17:36 EDIT
xiuxiu: 無題
- 2010/04/07 12:02 EDIT
aoi: 無題
- 2010/04/07 03:28 EDIT
KIRARA
- 2010/04/07 10:32
后面两步应该不会有问题啊，注意最后的代码是要整个替换的。
xiuxiu: 無題
- 2010/04/06 14:55 EDIT
你看的那个shinobi的blog我也有在看，不过日文看不太懂，自己摸索了一下午囧
KIRARA
- 2010/04/06 15:26
以后不换template直接改代码得了orz
TRACKBACK
- TRACKBACK
CATEGORY
ABOUT ME
Kirara 留言簿
0型血狮子座
80后女青年
一个人在伦敦
怎么就学了金融
为了开小店奋斗
要养虎斑猫
水彩纸上画丙烯
单反大光圈
恋声癖耳朵生物
最爱薄荷绿
搜罗陶瓷杯
→kiraramai@126.com←
----------------------
涂鸦日志导航 new→old
COMMENT
- 这憋不住的倾诉欲
阿尔特密斯(06/30) - 樹形日志分類、評論、鏈接、最新日志 shinobi BLOG Ver.
setsunayu(06/12) - 留言簿
三火(06/05) - 樹形日志分類、評論、鏈接、最新日志 shinobi BLOG Ver.
Backlinks(05/14) - 留言簿
Jyane(03/20) - 留言簿
Jyane(03/16)
ALBUM
