Dedecms当前栏目高亮完美处理办法…

本文详细介绍了如何利用Dedecms模板代码优化网页导航,通过使用currentstyle属性实现在不同层级栏目间应用不同CSS样式,简化了传统手动修改代码的方式,提升了网站用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码先行:

/templets/default/head.htm
PHP
0
1
2
3
4
5
6
7
<</span>div id="navMenu">
     <</span>ul>
       <</span>li><</span>a href='{dede:global.cfg_cmsurl/}/'><</span>span>主页<</span>/span><</span>/a><</span>/li>
       { dede : channel type = 'top' row = '10' currentstyle = "
       <</span>li><</span>a href='[field:typeurl/]' [field:rel/]><</span>span>[field:typename/]<</span>/span><</span>/a><</span>/li>
       { / dede : channel }
     <</span>/ul>
<</span>/div>

上面的这段代码,如果熟悉Dedecms的童鞋应该知道,这其实是Dedecms 5.7里面默认模版导航部分的代码片段。仔细学习下官方的这一段代码就足以解决今天这篇文章的这个问题,这也是笔者苦经周折才恍然大悟的,下面我们还是从头说起:

边栏

用Dedecms做站的时,很多时候会在内页里嵌入边栏作为局部的快捷导航,如果是单纯的边栏,那用{dede:channel}可以很轻松的实现对栏目标题的调用。但是往往我们对边栏的样式要求会更多一些,比如这里,当前栏目的标题在边栏里和其它同级栏目标题显示的要不一样,表现在CSS上就是应用的class不同,看图:

边栏解析

这里就是,当前栏目下在css上面多了一个on的类别。这一多不要紧,破坏了原有代码的可循环性,这就使得原来简单的{dede:channel}调用代码无法满足这样的要求。于是笔者在这里首先想到的是加判断,如果是当前所在的栏目,则引用on类,否则不应用。对于判断笔者试过[field:typename]也试过[field:array],是没法简单的通过判断实现,而为了这么个效果要一大段代码的话,牺牲的效率就很划不来,所以笔者放弃用这些标签去进行判断。笔者在网上看到有人用下面这种方式进行判断:

0
1
2
3
4
5
6
7
<</span>ul class="nav">  
     <</span>li class='nav0{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me!="1"&@me!="2"&@me!="3"&@me!="4"&@me!="5"&@me!="6")@me=" clock_on0"; else @me="";{/dede:field}'><</span>a href="/"><</span>/a><</span>/li>  
     <</span>li class='nav1{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="1")@me=" clock_on1"; else @me="";{/dede:field}'><</span>a href="/About_us"><</span>/a><</span>/li>       <</span>li class='nav2{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="2")@me=" clock_on2"; else @me="";{/dede:field}'><</span>a href="/News"><</span>/a><</span>/li>  
     <</span>li class='nav3{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="3")@me=" clock_on3"; else @me="";{/dede:field}'><</span>a href="/Service"><</span>/a><</span>/li>  
     <</span>li class='nav4{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="4")@me=" clock_on4"; else @me="";{/dede:field}'><</span>a href="/Works"><</span>/a><</span>/li>  
     <</span>li class='nav5{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="5")@me=" clock_on5"; else @me="";{/dede:field}'><</span>a href="/Join"><</span>/a><</span>/li>  
     <</span>li class='nav6{dede:field name="typeid" runphp="yes" function="GetTopid(@me)"} if(@me=="6")@me=" clock_on6"; else @me="";{/dede:field}'><</span>a href="/Contact"><</span>/a><</span>/li>  
<</span>/ul>  

 

 if(@me==”5″)部分是判断栏目的顶级ID,根据需要修改,A标签中的连接需手动添加,名称按需求添加。以上用的是图片,所以A标签中无内容。

抛开效率不谈,实现是可以实现的,但是笔者认为这种办法的弊端就如同上面引用的使用方法一样,那就是全手动。一来,笔者比较懒,不喜欢手动一个一个改,假使栏目成百上千个这么改还不要了笔者的小命;二来,笔者不喜欢一堆长而重复的代码解决一个小问题,总有点高射炮打蚊子的感觉;三来,对于做Dedecms的模版,笔者始终认为模版就是模版,模版做好后在日常使用中应最大可能避免再去修改模版中的代码;于是果断放弃了这种方法。一筹莫展之际,突然想到这么常用的一个东西,Dedecms官方团队怎么可能会不预制到代码里而需要我们这么大费周章呢,遂开始挖掘代码,这才挖出了本文开头引入的那段代码。发现果然有预制,根本不需要我们在做什么改动和开发,在{dede:channel}标签里还有一个”currentstyle“属性,其作用就是在循环输出的{dede:channel}中获得当前页面所属的”channel”,并为其应用上”currentstyle“属性里的内容。看代码说话:

currentstyle属性详解
PHP
0
1
2
3
4
5
6
7
8
9
<</span>div class="active" id="sidebar" data-csnow="7" data-class3="0" data-jsok="2">
     { dede : channel type = 'self' currentstyle = "
~typename~
" }
     <</span>dl class='list-none navnow'>
         <</span>dt id='part2_7'>
             <</span>a href='[field:typelink /]' title='[field:typename/]' class="zm"><</span>span>[field:typename/]<</span>/span><</span>/a>
         <</span>/dt>
     <</span>/dl>
     { / dede : channel }
<</span>div class="clear"><</span>/div>
<</span>/div>

这个”currentstyle”网上搜到最多的解释就是  currentstyle = ”应用样式”   而没有具体用法的说明,笔者也是参考最开始的那段官方代码才试明白用法,其实很简单,童鞋们的疑点主要来源于两个方面,一个是”currentstyle”本身的用法,而另一个就是”currentstyle”里面所含有的”class=’thisclass'”具体怎么用。

“currentstyle”本身用法解析:

就如同”currentstyle“属性作用既然,既然是在循环输出的{dede:channel}中获得当前页面所属的”channel”,并为其应用上”currentstyle“属性里的内容。那就是说”currentstyle”里面要包含的是完整的代码,而这段代码只有在满足是当前页面所属栏目的时候才会输出,因此,对于其他不属于当前页面的栏目的输出,我们还要在准备一段代码,这段代码通常结构和”currentstyle”里面的是一致的,只有在应用的css样式上有区别,而区别这个css的就是所谓的”class=‘thisclass’”这个具体见我上面贴出来的代码可以更好理解。另外,在这里还能看到’~typename~’这样的用法,而这里如果用[field:typename/]会被当作字符直接输出,这种’~XXX~’是标记属性中的特殊用法,多用于”channel”标记里的”currentstyle”属性中。

“class=’thisclass'”用法解析:

对这个网上有文章存在误导,所以有的童鞋会比较蒙。官方的代码里有的地方确实写了”class=’thisclass'”,但这个’thisclass’并不是变量也没有特别的含义,’thisclass’只是一个普通的CSS类,是我们用来区分当前栏目标题高亮时,加高亮的那个类,只不过官方给这个类命名成了’thisclass’,而我们在使用的时候,这个类名可以随意命的,只要符合CSS标准就可以了。比如笔者这里用的是”class=’on'”,所以这里的类名写成你自己需要的就好,不必非要是’thisclass’这个。

边栏效果

最后附张图,使用”currentstyle”完全可以达到我们想要的要求,不需要自己动手修改程序。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Longsir_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值