逸·Ease

来源: BlogBus 原始链接: http://ease.blogbus.com:80/logs/2005/11/1601818.html 存档链接: https://web.archive.org/web/20060225112256id_/http://ease.blogbus.com:80/logs/2005/11/1601818.html 作者: Deng Peng

<< Ubuntu 5.10 到货！ Blogbus模板Hack（二） >> Blogbus模板Hack（一） 2005-11-16, by dngpng 字体大小: 小 | 中 | 大 O'Reilly的书中有一系列总命名为xxx Hack，讲的都是xxx这个东西不为人知，或着不能通过一般方法达到的功能、技巧。一直也不知道这里的Hack与中文中哪个词对应，也许用“秘技”可能稍微合适一点吧。本篇的题目灵感来源于O'Reilly，本来想把题目简练的起成“Blogbus Hack”，但是因为担心最近Blogbus攻击产生什么误会，因为加入“模板”二字——本来要写的东西也只与模板设计有关——不过内容的深度当然不能和那些大师的作品相比。本次Blog模板的调整是这样的…… 上周中，忽然手痒，在调查了实时切换页面样式的可行性后开工。是时正是本Blog满两个月前后，满一个月时就做了一次调整，时隔一月，又不自觉要修理Blog，我真怀疑自己是不是也形成个什么生理周期，每个月都要“来”一次，不过我一男的，“来”的当然是“心血”，心血来潮嘛……:b 上周四、五已经完成的模板标准化、脚本体系也完成了一半，并已经完成了Simple Blue的初步设计。上周日、这周一，基本上是以一个晚上一个样式的速度进行设计，又搞完了Vista和Book。Vista其实是从Feeling Breath( http://www.poplat.com/blog/ )搬过来的，而Book的灵感是一张壁纸。在完成Vista的同时，被Feeling Breath中切换侧边栏的显示/隐藏功能吸引，于是将一个类似的功能加入。周二晚：用DOM脚本完成了外部样式及样式选择器的生成，从而达到加入新的样式而不用修改模板本身进而不必重新发布Blog的目的。今天又完成了Cookie的读写和整个脚本的整理，最终的达到对浏览者所选择的样式和文章字体加以记忆的功能。模板的一些特点…… 完全基于XHTML 1.0和CSS以及W3C DOM，除Blogbus自动嵌入的内容及Blog本身的内容外，标签是可以通过W3C有效性检测的，但是…… 一套模板，多套CSS样式，类似于CSS Zen Garden，通过不断加入新的样式，使Blog样式多样化。样式和JS脚本外置，对其修改不用重新发布，且加入新的样式后也无需重新发布页面。 Blog正文的字体（在单独文章页面）可以修改大小字体大小和页面风格的选择通过Cookie记忆充分发挥CSS的灵活性和无限潜力。如Simple Blue样式中将“分类”（或称“标签”）列表以导航菜单形式置于页面顶部；Book和Vista样式可以将侧边栏收起（隐藏），这些都是通过小小的CSS和W3C DOM来实现的。在IE6/Firefox/Opera上都进行了测试，除Opera在脚本运行效果方面有一点小小的不正常（目前还没搞明白为什么……请高人指教），在IE和Firefox均可正常工作。（似乎还需要在Safari和IE5上试试看……）进入正题关于Blogbus的模板设计技巧，其实有些是被Blogbus的一些不正规、不标准的代码逼出来的，按常理有些目的的达到其实没必要那么费劲儿，像那个列表的Bullet，如果Bus本身就是以LI标签来处理，自然也没那么麻烦。首先，把我要写的东西列个表：自定义列表图标 “分类变菜单”及突出显示当前分类多页面样式及其实时切换为IE扩展:hover的使用范围脚本嵌入外部样式及生成样式切换选单利用Cookie保存和读取浏览者的选择关于字体大小的实时调整和记忆隐藏广告 Hack No.1: 自定义列表图标这部分我以前写过一篇模板设计：修饰列表，其中详细叙述了这部分内容，就不在这瞎白话了…… Hack No.2: “分类变菜单”及突出显示当前分类首先，我在模板设计：在分类页面中高亮当前分类中已经写了一部分关于用脚本和CSS控制分类列表，使当外于某一分类的日志首页（即点击分类后进入的日志列表页面）时，该分类可以以不同的样式突出显示。但是，由于当时有些匆忙，一些小的问题仍然没有得到合适的解决。主要的缺陷包括二个方面：1.当日志增多使日志首页出现分页后，其分页中，突出显示分类名称的功能失效。2.在IE中隐藏“>>more”不正常工作。先说第一个问题。简单的观察就可以得知，由于分页后，页面是以index_x.html方式命名的，其中“x”为一数字，按分页依次递增。这样就导致在判断哪个分类条目的链接属性href值与浏览器当前路径 location.pathname 相等时无法找到匹配的条目因而不会为任何一个分类加入active属性。我的解决方案是引导一正则表达式： var regExp = /[0-9]+/; 代表以下划线开头接1至多位数字的字符串，并将 location.pathname 中的对应字符串删除（替换为“空”），即对 location.pathname 进行修剪从而使其在同一分类不同分页时能以相同的形式参与到后面的判断中去。对于第二个毛病，我通过IE Develop Toobar发现，在Mozilla浏览器中“>>more”显示为UL的直接子节点，而在IE中却存在与最后一个分类的LI标签内——真是怪事。那么在遍历UL的后有子结点时，我们在最后一个结点外要为IE增加一个处理：在该子结点的第三个子结点（即>>more所有结点），并将其 Class 设为 more ，同时在CSS中增加一句 #menu .more {display: none} 这样就达到了灵活的隐藏这个小东西的目的。同时，因为有了专门对付IE的办法，在为Mozilla浏览器隐藏>>more时，CSS中可以使用IE无法识别的 li>a {display: none;} （不过IE7认了，但认出了也没什么用）此部分的完整代码如下： function initMenu() { var mypath = location.pathname; var regExp = /[0-9]+/; mypath = mypath.replace(regExp,""); if (document.getElementById) { menuRoot = document.getElementById("catlist"); for (i=0; i<menuroot.childnodes.length; i++){ node = menuRoot.childNodes[i]; if (node.nodeName=="LI"){ if (i==( menuroot.childnodes.length-1 ) && document.all){ node.childNodes[2].className="more"; } if ((node.firstChild.getAttribute("href") == mypath)||(node.firstChild.getAttribute("href") == ("http://ease.blogbus.com"+mypath))) { node.className+=" active"; } else if(document.all){ node.onmouseover=function(){this.className+=" over";} node.onmouseout=function(){this.className=this.className.replace(" over","");} } } } } } 这里面有一部分是为了处理IE不会解释li:hover的Bug，在后面会提到。 Technorati Tags: XHTML , CSS , DOM , Script , Blogbus , Hack , 模板 , 秘技发布于: 22:28:00 | 分类: WEB设计 | 引用(0) | 编辑将本文加入在线书签: del.icio.us | Furl | 365key 2 条评论: iugo , 2006-01-23 00:45:35 很高兴接受您的指点，但由于我资质不够，不能完全领会。刚才用ff浏览了一下to9.org/iugo，发现顶部“分类”的高度有些开，而且悬停的时候背景色改变。不知道这点我到底错在哪里，麻烦您看看：） Ls , 2005-11-17 19:10:39 偶然从xuexin的blog看到你的地址，我们新版的Blog刚好采用xhtml标准做模板，看到你对这个挺有研究，邀请测试测试看，地址：http://blog.chinaui.com。如果有兴趣测试，请到我blog上给我留个言，在空间权限上可以大力支持。添加评论