下面我将为你提供几种最常用和最有效的方法,从最经典的typeid判断到更灵活的typeid2判断,并附上详细的代码示例。

(图片来源网络,侵删)
使用 typeid 判断(最常用,适用于顶级栏目)
这是最核心、最基础的方法,织梦的模板引擎通过 {dede:global name='typeid'/} 这个全局变量来获取当前栏目的ID。
原理:
在导航循环中,通过判断循环出来的栏目的 id 是否与当前页面的 typeid 相等,如果相等,就给这个 <a> 标签添加一个高亮样式类(class="active")。
代码示例:
假设你的导航菜单HTML结构如下:

(图片来源网络,侵删)
<ul class="nav">
<li><a href="{dede:global.cfg_cmsurl/}/">网站首页</a></li>
<li><a href="/company/">关于我们</a></li>
<li><a href="/news/">新闻资讯</a></li>
<li><a href="/product/">产品展示</a></li>
<li><a href="/contact/">联系我们</a></li>
</ul>
你需要修改它,使其支持高亮,正确的织梦写法是:
<ul class="nav">
<!-- 首页高亮逻辑 -->
<li>
<a href="{dede:global.cfg_cmsurl/}/" {dede:field name='typeid' runphp='yes'}if(@me==''){@me='class="active"';}{/dede:field}>网站首页</a>
</li>
<!-- 调用顶级栏目列表 -->
{dede:channel type='top' row='8'}
<li>
<a href="[field:typelink/]" [field:id runphp='yes']if(@me==intval($typeid)){@me='class="active"';}{else{@me='';}{/dede:field}>[field:typename/]</a>
</li>
{/dede:channel}
</ul>
代码解析:
-
首页高亮:
{dede:field name='typeid' runphp='yes'}...{/dede:field}:这是一个PHP判断语句。if(@me==''):@me在这里代表{dede:field name='typeid'}的值,也就是当前栏目的ID,首页没有栏目ID,所以它的值是空字符串 。@me='class="active"':如果条件成立(即在首页),就输出class="active"。- 如果不在首页,
else{@me=''}会输出空字符串,就不会添加active类。
-
顶级栏目高亮:
{dede:channel type='top' row='8'}:这是一个循环标签,用于获取所有顶级栏目,最多显示8个。[field:id runphp='yes']...[/field:id]:这是对当前循环栏目的id进行PHP判断。if(@me==intval($typeid)):@me是当前循环栏目的id。$typeid是全局变量,代表当前页面的栏目ID。intval()是为了确保比较的是整数。- 如果两者相等,就输出
class="active",否则输出空字符串。
CSS 样式:
在你的CSS文件中,添加 .active 样式即可。
.nav li a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
}
/* 当前栏目高亮样式 */
.nav li a.active {
background-color: #007bff;
color: #fff;
font-weight: bold;
}
使用 typeid2 判断(适用于子栏目)
当你在一个子栏目的页面时,typeid 是子栏目的ID,而 typeid2 是其父栏目的ID,如果你想在父级导航中高亮父栏目,就需要用到 typeid2。
场景:
你在 "产品分类A" (ID=5) 的页面下,这个栏目属于 "产品展示" (ID=3) 的子栏目。typeid=5,typeid2=3,你希望主导航中的 "产品展示" 链接是高亮的。
代码示例:
只需修改方法一中的判断逻辑即可。
<ul class="nav">
<!-- 首页高亮逻辑(不变) -->
<li>
<a href="{dede:global.cfg_cmsurl/}/" {dede:field name='typeid' runphp='yes'}if(@me==''){@me='class="active"';}{/dede:field}>网站首页</a>
</li>
<!-- 调用顶级栏目列表,并使用 typeid2 判断 -->
{dede:channel type='top' row='8'}
<li>
<a href="[field:typelink/]" [field:id runphp='yes']
// 判断逻辑改为:如果当前栏目的ID等于typeid2(父栏目ID),则高亮
if(@me==intval($typeid2)){
@me='class="active"';
}else{
@me='';
}
>[field:typename/]</a>
</li>
{/dede:channel}
</ul>
使用 currentstyle 属性(织梦内置简化方法)
织梦的 {dede:channel} 和 {dede:arclist} 等标签自带了一个非常方便的属性 currentstyle,它专门用于实现当前项高亮,无需手写PHP判断,这是最推荐的方法,因为它更简洁、可读性更强。
代码示例:
<ul class="nav">
<!-- 首页需要手动处理,因为 currentstyle 不适用于它 -->
<li><a href="{dede:global.cfg_cmsurl/}/" {dede:field name='typeid' runphp='yes'}if(@me==''){@me='class="active"';}{/dede:field}>网站首页</a></li>
<!-- 使用 currentstyle -->
{dede:channel type='top' row='8'}
<li>
<a href="[field:typelink/]">
[field:typename/]
</a>
<!-- currentstyle 会自动替换 <a> 标签的整个内容 -->
[field:currentstyle]
<a href="[field:typelink/]" class="active">[field:typename/]</a>
[/field:currentstyle]
</li>
{/dede:channel}
</ul>
代码解析:
[field:currentstyle]...[/field:currentstyle]:这个标签块是特殊的。- 当
{dede:channel}循环到的栏目是当前栏目时,{dede:channel}默认输出的<a>标签会被[field:currentstyle]里面的内容完全替换。 - 当循环到的栏目不是当前栏目时,
{dede:channel}会正常输出<a href="[field:typelink/]">[field:typename/]</a>。 - 这样一来,你就不需要写复杂的
runphp判断了,代码非常干净。
总结与最佳实践
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
typeid 判断 |
灵活,可定制性强 | 需要写PHP代码,稍显复杂 | 所有需要自定义逻辑的场景,特别是首页高亮。 |
typeid2 判断 |
解决了子栏目页父级导航高亮的问题 | 逻辑比 typeid 更复杂一点 |
当需要在子栏目页高亮其父级主导航时。 |
currentstyle |
代码最简洁,可读性最高,织梦官方推荐 | 只能替换整个 <a> 标签,灵活性稍差(但通常足够) |
绝大多数情况下的首选,特别是主导航和列表页。 |
推荐工作流程:
- 主导航菜单:优先使用
currentstyle方法,它最简单、最不容易出错,首页的高亮判断可以用typeid或者直接手动写死(如果首页样式特殊)。 - 面包屑导航:面包屑导航通常也需要高亮,可以使用
typeid或typeid2判断逻辑,或者直接使用{dede:field name='position' function='str_replace(" > ", "<span class='separator'> > </span>", @me)'/}这样的方式来处理。 - 侧边栏分类:侧边栏的分类列表同样可以使用
currentstyle或typeid判断来实现高亮。
希望这些详细的解释和示例能帮助你完美地实现织梦栏目的高亮功能!
