« [GMail]Import Contacts功能开发完成 | 首页 | [转译]自定义GMail界面样式 »

分类: 志中痣

2004年10月07日

[原创]MT的树形分类菜单(Categories Tree Menu for MT)

　　以Movable Type为代表的主流blog基本上都是采用直叙式的菜单结构，这样的结构非常适合信息查阅，但总有一天你会发现，你的日志多得足以让分类栏目菜单(Categories)占据你屏幕的一半，信息查阅越来越不是件容易的事情，你不得不借助Ctrl+F或者干脆只给出分类栏目页面的链接了事。我已经面临了这样的问题，所以上次升级到3.0D时就写了一个简单的树形菜单，可以展开收拢，为的就是“管管”那些Categories，虽然不是最好的，但是考虑了跨浏览器兼容，简单实用，抽闲整理了共享一下，目前只兼容MT3.01D以下版本，不支持3.1的“子分类”，但是如果你在3.1中不使用“子分类”也一样可以用这个菜单......

Well, you've got a Movable Type or WordPress or other popular weblog installed, and you must realize that these blog apps could display your categories' entries as a flat list menu, hmm, that's good for text reading, but, are you lucky then? One day you woke up and at last watching your categories list cluttering your homepage cauz you blogaholic just wrote too much. So, a simple expandable/collapsible list menu coming to save all these, it's quite simple, and MT3.01D- only, I havn't made it work with 3.1's "subcategories" feature just cauz I don't need it, sorry! But, if you don't use "subcategories" in 3.1, you still can use this menu......

首先，用如下代码替代Main Index模版中的Categories部分的代码:
First, replace the Categories related source code in Main Index template with below:


<ul>
<MTCategories>
　<li><a href="javascript:catSwitcher('<$MTCategoryID$>');" class="ext"><img id="catimg<$MTCategoryID$>" alt=" Expand " src="images/sidebar_li_ext.gif" width="9" height="9" /></a> <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryDescription$></a> <b>(<$MTCategoryCount$>)</b></li>
　<li id="cat<$MTCategoryID$>" class="listclose">
　<ul class="li_img">
　<MTEntries>
　　<li><$MTEntryTitle$></li>
　</MTEntries>
　</ul>
　</li>
</MTCategories>
</ul>


然后将以下代码保存为JavaScript文件，比如， list_switcher.js，然后上传到你的MT blog的根目录中，也就是index.html首页所在的位置
Second, save the JavaScript codes below as .js file, such as list_switcher.js, then upload it to the root directory of your MT blog, right in the same folder with your blog home page(usually index.html)


<!--
// This is the category list switcher by POPOEVER.COM
// Copyright (c) POPOEVER.COM
// PLEASE KEEP THESE LINES UNCHANGED!
var lastcat, lastcatimg;
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;

function catSwitcher (cid) {
　if(ns4) {
　　var catid = document.layers.eval("cat" + cid);
　　var catimg = document.layers.eval("catimg" + cid);
　}
　if(ns6) {
　　var catid = document.getElementById("cat" + cid);
　　var catimg = document.getElementById("catimg" + cid);
　}
　else {
　　var catid = eval("cat" + cid);
　　var catimg = eval("catimg" + cid);
　}
　if(catid.className == "listclose") {
　　catid.className = "listopen";
　　catimg.src = "images/sidebar_li_withdraw.gif";
　　catimg.alt = " Collapse ";
　　if(lastcat) {
　　　lastcat.className = "listclose";
　　　lastcatimg.src = "images/sidebar_li_ext.gif";
　　　lastcatimg.alt = " Expand ";
　　}
　　lastcat = catid;
　　lastcatimg = catimg;
　}
　else {
　　catid.className = "listclose";
　　catimg.src = "images/sidebar_li_ext.gif";
　　catimg.alt = " Expand ";
　　lastcat = null;
　　lastcatimg = null;
　}
}
//-->


接下来将这句代码插入到Main Index模版的<head></head>之间，位置不限
And then, insert the following code between <head></head> in Main Index template, that will quote the js file you just saved while loading the page:)


<script language="javascript" type="text/javascript" src="list_switcher.js"><!-- --></script>


最后，把以下代码加到你的样式表中去，注意，我是以MT3.01D的样式表为准的，2.6x的样式表中.sidebar的命名可能不同，请自行更正
Finally, add these codes into your main stylesheets(CSS). NOTE!These codes are based on MT3.01D, and there'are some difference in CSS file between 3.x and 2.6x, ".sidebar" maybe a differnet class name in 2.6x, just change the class name yourselves manually:)


.sidebar ul {
　　　　padding: 0px;
　　　　margin: 10px 15px 10px 15px;
　　　　text-align: left;
　　　　}

.sidebar li {
　　　　color: #333;
　　　　font-family: Verdana, Arial, Helvetica, sans-serif;
　　　　font-size: 9pt;
　　　　text-align: left;
　　　　line-height: 140%;
　　　　list-style-type: none;
　　　　list-style-position: outside;
　　}

.li_img li {
　　　　list-style-image: url(images/sidebar_li_ns.gif)!important;
　　　　list-style-image: url(images/sidebar_li.gif);
　　　　margin-left: 10px;
　　　　line-height: 120%!important;
　　}

.sidebar .listclose {
　　　　display: none;
　　}

.sidebar .listopen {
　　　　display: block;
　　}

.listopen ul {
　　　　margin-top: 5px!important;
　　　　margin-top: -5px;
　　}


所需的几个小图片打包下载，把图片上传到images目录即可
Download the little gif icons that you need, upload to "images" directory

最后的最后，重建Main Index模版看看效果吧:)
Rebuild your Main Index template to meet your tree menu and give yourself a big smile
^____________________^

注意: 文章中的红色文字表示你可以用自己的语言替换，但是要注意编码，否则会有乱码出现
CAUTION! The red source code texts in this tutorial indicate you can replace these words with your own language version, but please save with the right encoding, GOOD LUCK:)

--POPO原创教程，拒绝转载，敬请见谅
Original Tutorial, No Distribution Allowed, Sorry

Posted by POPOEVER at 2004年10月07日 00:55 | back to top
标签:
Featured

Trackback Pings

本篇日志的回溯引用地址:

http://plod.popoever.com/acp630/mt-tb.cgi/349

Comments


  1. #873

    要是有个预览就好了，嘿嘿。不容易一点来更新，呵呵。
    Posted by hehe at 2004年10月07日 00:58 | back to top

  2. #875

    什么预览？首页右面的categories不就是么~~~
    Posted by POPOEVER at 2004年10月07日 01:29 | back to top

  3. #931

    mt3.X不是收钱的吗？郁闷，没有美金也交不起...比wordpress这些如何呢？
    Posted by guoshuang at 2004年10月15日 23:22 | back to top

Post a comment

说老实话，做开心人，欢迎您留露箴言
即便如此，也请遵纪守法，勿放厥辞
汝国如汝母，辱国如辱母，吾辈当自强
您的观点仅代表个人，与本站无关，望请自尊

Thanks for signing in, . Now you can comment. (sign out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Remember me?