dede当前菜单高亮如何实现？

准备工作：理解核心标签

在开始之前,你需要了解两个关键的 DedeCMS 标签：

1. {dede:field name='typeid'/}: 这个标签用于获取当前栏目的 ID，如果你在列表页或内容页，它会显示该栏目/文章所属的栏目 ID，如果在首页，它通常是空或 0。
2. {dede:channel}: 这个标签用于调用栏目列表（导航菜单），它有一个非常重要的属性 typeid，可以指定当前高亮的栏目 ID。

使用 typeid 属性（最推荐、最简单）

这是最直接、最常用的方法，适用于绝大多数情况。

适用场景：

• 顶部主导航菜单。
• 侧边栏的分类菜单。
• 任何需要根据当前页面所在栏目来高亮对应菜单项的场景。

实现步骤：

1. 找到你的导航菜单模板文件。 这个文件通常位于你的模板目录下，可能是：

   
   （图片来源网络，侵删）
   • templets/default/header.htm (最常见)
   • templets/default/top.htm
   • 或者你自定义的模板文件,如 templets/你的模板名/nav.htm

2. 修改菜单代码。 打开这个模板文件，找到类似 {dede:channel} 的循环代码，通常它看起来是这样的：

   <ul class="nav">
     <li><a href="{dede:global.cfg_basehost/}/">首页</a></li>
     {dede:channel type='top' row='8'}
     <li><a href="[field:typelink/]">[field:typename/]</a></li>
     {/dede:channel}
   </ul>

3. 添加 typeid 属性。 在 {dede:channel} 标签中，加入 typeid='~typeid~'。

   修改后的代码：

   <ul class="nav">
     <li><a href="{dede:global.cfg_basehost/}/">首页</a></li>
     {dede:channel type='top' row='8' typeid='~typeid~'}
     <li><a href="[field:typelink/]">[field:typename/]</a></li>
     {/dede:channel}
   </ul>

4. 添加 CSS 样式。 当访问某个栏目时，DedeCMS 会自动为该栏目的 <li> 标签添加一个 class="current" 属性，你只需要在 CSS 文件中定义这个 current 样式即可。

   在你的 CSS 文件（如 style.css）中添加：

   /* 导航菜单高亮样式 */
   .nav li.current a {
     color: #ff6600; /* 高亮文字颜色 */
     background-color: #f5f5f5; /* 高亮背景颜色 */
     font-weight: bold; /* 文字加粗 */
     border-bottom: 3px solid #ff6600; /* 底部边框，常见样式 */
   }
   /* 鼠标悬停效果（可选） */
   .nav li a:hover {
     color: #ff6600;
     background-color: #eeeeee;
   }

工作原理： typeid='~typeid~' 是 DedeCMS 的一个特殊写法。~typeid~ 会被解析为 {dede:field name='typeid'/} 的值，即当前栏目的 ID，当 {dede:channel} 循环时，如果循环到的栏目的 ID 和 ~typeid~ 的值相等，DedeCMS 就会自动给这个 <li> 元素加上 class="current"。

手动判断 typeid（更灵活）

如果你的菜单结构比较复杂,或者不想使用 typeid 属性的自动添加 class 功能，可以手动进行判断。

适用场景：

• 菜单项不是简单的栏目调用,而是混合了外部链接等。
• 需要更精细地控制高亮逻辑。

实现步骤：

1. 找到你的导航菜单模板文件（同上）。

2. 使用 if 语句进行判断。 在 {dede:channel} 循环内部，使用 DedeCMS 的 if 标签来判断当前循环的栏目 ID 是否等于当前页面的栏目 ID。

   修改后的代码：

   <ul class="nav">
     <li><a href="{dede:global.cfg_basehost/}/">首页</a></li>
     {dede:channel type='top' row='8'}
     <li [field:typeid function="if(@me=='~typeid~','class=current','')"/]>
       <a href="[field:typelink/]">[field:typename/]</a>
     </li>
     {/dede:channel}
   </ul>

代码解析：

• [field:typeid function="..."]：这是对 typeid 字段进行处理。
• if(@me=='~typeid~','class=current','')：这是一个条件判断。
  • @me 代表当前字段的值，即 [field:typeid] 的值。
  • '~typeid~' 同样是当前页面的栏目 ID。
  • 如果两者相等（@me=='~typeid~'），则返回 class=current。
  • 如果不相等,则返回一个空字符串 。
  • 这样就实现了手动为高亮项添加 class="current" 的效果。

3. 添加 CSS 样式（同方法一）。 你仍然需要在 CSS 文件中定义 .nav li.current a 的样式。

面包屑导航中的高亮

面包屑导航通常也需要高亮当前栏目,这个实现方式略有不同。

适用场景：

• 区域的面包屑导航（位置：首页 > 新闻中心 > 公司新闻）。

实现步骤：

1. 找到面包屑导航的模板文件。 通常是 templets/default/position.htm。

2. 修改代码。 默认的 position.htm 文件可能已经包含了高亮逻辑，但如果你需要修改，可以参考以下结构：

   <div class="breadcrumb">
     <a href="{dede:global.cfg_cmsurl/}/">首页</a>
     {dede:field name='position' runphp='yes'}
     $tcarr = explode('<a', $tcarr);
     $tcarr2 = array();
     foreach($tcarr as $key=>$tcc){
       if($key==0){
         $tcarr2[$key] = "<a{$tcc}";
       }else{
         if($tcc=='') continue;
         if(preg_match('/title=\"(.*?)\"/',$tcc,$match)){
           $tcarr2[$key] = "<a class='current'{$tcc}";
         }else{
           $tcarr2[$key] = "<a{$tcc}";
         }
       }
     }
     $tcarr = implode($tcarr2,'');
     @me = $tcarr;
     {/dede:field}
   </div>

   这段代码会遍历面包屑的每一个链接,并为最后一个链接（即当前栏目）添加 class='current'，你可以根据需要调整 CSS 样式。

总结与排查

如果高亮不生效，请检查以下几点：

1. 模板文件是否正确：你修改的是不是网站正在使用的模板文件？
2. 缓存问题：DedeCMS 有模板缓存，修改完文件后，请登录后台点击 “系统” -> “一键更新站点” -> “更新HTML”，或者直接清除浏览器缓存。
3. CSS 样式是否被覆盖：检查你的 CSS 优先级是否足够，是否有其他样式覆盖了 .nav li.current a。
4. 栏目类型：确保你的菜单调用的是普通栏目（type='top'），而不是其他特殊类型。

对于绝大多数用户来说,方法一 就足够解决问题，并且是最稳定、最易于维护的方案。