dede导航高亮显示如何实现？

下面我将为你提供几种最常用、最稳定的方法，从最推荐的CSS方法到传统的PHP方法，并针对不同情况（如首页、栏目页、文章页）进行说明。

CSS + PHP 标签（最推荐，最灵活）

这是目前最主流、最推荐的方法，它通过PHP判断当前页面的类型和ID，给对应的导航项添加一个特定的CSS类（current），然后在CSS中定义这个类的样式。

步骤 1：修改导航模板文件

找到你的导航模板文件,通常位于 /templets/default/ 目录下，文件名可能是 header.htm 或 nav.htm。

找到导航列表的HTML代码,它通常是这样的：

<div id="nav">
    <ul>
        <li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
        <li><a href='{dede:typesort typeid='1'}/'>栏目一</a></li>
        <li><a href='{dede:typesort typeid='2'}/'>栏目二</a></li>
        <li><a href='{dede:typesort typeid='3'}/'>栏目三</a></li>
        <!-- 更多栏目... -->
    </ul>
</div>

我们需要修改它,使其能够判断当前页面，修改后的代码如下：

<div id="nav">
    <ul>
        <!-- 首页高亮判断 -->
        <li><a href='{dede:global.cfg_cmsurl/}/' {dede:field name='typeid' runphp='yes'}(@me == '' ? @me='class="current"' : @me='');{/dede:field}>首页</a></li>
        <!-- 二级栏目高亮判断（最常用） -->
        <li><a href='{dede:typesort typeid='1'/}' {dede:field name='typeid' runphp='yes'}(@me == '1' ? @me='class="current"' : @me='');{/dede:field}>栏目一</a></li>
        <li><a href='{dede:typesort typeid='2'/}' {dede:field name='typeid' runphp='yes'}(@me == '2' ? @me='class="current"' : @me='');{/dede:field}>栏目二</a></li>
        <li><a href='{dede:typesort typeid='3'/}' {dede:field name='typeid' runphp='yes'}(@me == '3' ? @me='class="current"' : @me='');{/dede:field}>栏目三</a></li>
        <!-- 如果需要支持子栏目高亮，可以使用下面的方法 -->
        <li><a href='{dede:typesort typeid='4'/}' {dede:field name='typeid' runphp='yes'}$arrTopids = GetTopidIds(@me); if($arrTopids['4'] || @me=='4') @me='class="current"'; else @me='';{/dede:field}>有子栏目的栏目</a></li>
    </ul>
</div>

代码解释：

1. 首页高亮：

   • {dede:field name='typeid' runphp='yes'}...{/dede:field}：获取当前页面的栏目ID。
   • @me == ''：在首页时，typeid 是空值。
   • ? @me='class="current"'：如果条件成立（是首页），就在 <a> 标签里添加 class="current"。
   • @me=''：否则，不添加任何东西。

2. 栏目页高亮：

   • @me == '1'：判断当前页面的 typeid 是否等于这个栏目的ID（这里是1）。
   • 如果相等,就添加 class="current"。

3. 子栏目高亮（进阶）：

   
   （图片来源网络，侵删）
   • 这个功能需要调用一个辅助函数 GetTopidIds，它可以判断当前栏目ID及其所有顶级父级栏目ID。
   • if($arrTopids['4'] || @me=='4')：如果当前栏目ID是4，或者4是其父级栏目，那么就高亮，这样，点击子栏目时，父级导航也会亮起。

步骤 2：在CSS文件中定义高亮样式

打开你的CSS文件（通常是 /templets/default/style/dedecms.css 或类似路径），在样式表中添加 .current 的样式定义。

/* 导航高亮样式 */
#nav ul li {
    /* 导航项的默认样式，float: left; margin: 0 10px; 等 */
}
#nav ul li a {
    /* 导航链接的默认样式，color: #333; text-decoration: none; 等 */
}
/* 高亮状态的样式 */
#nav ul li.current a {
    color: #ff6600; /* 文字颜色 */
    font-weight: bold; /* 字体加粗 */
    background-color: #f0f0f0; /* 背景颜色 */
    border-bottom: 3px solid #ff6600; /* 底部边框，常用作下划线效果 */
    padding: 5px 10px; /* 可选，增加内边距 */
}
/* 鼠标悬停效果（可选） */
#nav ul li a:hover {
    color: #ff6600;
    text-decoration: underline;
}

当你访问首页时,首页链接会高亮；访问“栏目一”时，“栏目一”的链接会高亮。

使用DedeCMS内置的 {dede:channel}

如果你的导航是动态调用所有栏目的,使用 {dede:channel} 标签会更方便，因为它自带了 currentstyle 属性。

步骤 1：修改导航模板

将静态的导航列表替换为 {dede:channel}

<div id="nav">
    <ul>
        <!-- 首页 -->
        <li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
        <!-- 调用一级栏目，并设置高亮样式 -->
        {dede:channel type='top' row='8'}
        <li>
            <a href="[field:typelink/]">[field:typename/]</a>
            <!-- 如果当前栏目是这个栏目，则使用下面的样式 -->
            [field:typelink runphp='yes']
            if(@me == GetCurUrl()) @me = '<span class="current"></span>';
            else @me = '';
            [/field:typelink]
        </li>
        {/dede:channel}
    </ul>
</div>

代码解释：

• {dede:channel type='top' row='8'}：调用顶级（一级）栏目，最多显示8个。
• [field:typelink/]：栏目链接。
• [field:typename/]：栏目名称。
• [field:typelink runphp='yes']...[/field:typelink]：这部分是关键，它判断当前页面的URL是否等于这个栏目的URL，如果相等，就输出一个空的 <span class="current"></span>。

步骤 2：修改CSS样式

与方法一类似,但这次是给 <span> 标签加样式，或者更常见的，直接给包含 <span> 的 <li> 加样式。

/* 方法二的CSS样式 */
#nav ul li.current a {
    /* 和上面一样的样式 */
    color: #ff6600;
    font-weight: bold;
}
/* 或者通过span来控制，如果模板里用的是span */
#nav ul li .current {
    color: #ff6600;
    font-weight: bold;
}

---

传统PHP判断（适用于旧版或复杂逻辑）

如果你对PHP比较熟悉,或者有非常复杂的判断逻辑，可以直接在模板里嵌入PHP代码，这种方法灵活性最高，但可读性稍差，且容易出错。

<div id="nav">
    <ul>
        <li<?php if($GLOBALS['typeid']=='') echo ' class="current"'; ?>><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
        <?php
        $dsql = new DedeSql(false);
        $sql = "SELECT id,typename,typedir FROM dede_arctype WHERE reid=0 ORDER BY sortrank";
        $dsql->Execute('top',$sql);
        while($row = $dsql->GetArray('top')){
            $currentClass = '';
            if($GLOBALS['typeid'] == $row['id']){
                $currentClass = ' class="current"';
            }
            // 判断是否为子栏目
            $sonids = GetSonIds($row['id']);
            if($sonids && strpos(','.$sonids.','.','.'.$GLOBALS['typeid'].',') !== false){
                $currentClass = ' class="current"';
            }
            echo "<li{$currentClass}><a href='{$row['typedir']}'>{$row['typename']}</a></li>";
        }
        $dsql->Close();
        ?>
    </ul>
</div>

注意： 这种方法需要确保你的模板开启了PHP支持（在后台“系统”->“系统基本参数”->“其他选项”中，模板引擎禁用标签里不要有php）。

---

常见问题与注意事项

1. 首页不亮

   • 检查首页的判断逻辑 @me == '' 是否正确，确保在首页模板里调用这个导航时，typeid 确实为空。
   • 确认你的首页链接是 {dede:global.cfg_cmsurl/}/ 而不是其他。

2. 栏目页不亮

   • 检查 typeid 的值是否正确，可以在模板里 {dede:field.name='typeid'/} 单独输出一下，看看是不是你期望的数字。
   • 检查栏目链接是否正确,确保 typeid 和链接指向的ID一致。

3. 子栏目不亮（父级不亮）

   • 必须使用包含 GetTopidIds 函数的进阶判断方法，这个函数通常在 include/common.func.php 文件中，默认是存在的。

4. 修改后不生效

   • 清空缓存！ 这是DedeCMS最常见的问题，修改完模板和CSS后，务必到后台“生成”->“HTML更新”中，选择“更新主页HTML”、“更新栏目HTML”等，或者直接使用“一键更新网站”功能来清空所有缓存。
   • 检查浏览器缓存,可以按 Ctrl + F5 强制刷新页面。

5. 栏目使用了自定义外部链接

   • 如果一个导航项不是指向DedeCMS内的栏目,而是指向一个外部URL（如 http://www.baidu.com），那么上述的 typeid 判断方法会失效。
   • 解决方案：手动给这个链接添加一个固定的 class，class="external-link"，然后在CSS中定义这个类的样式，或者直接写死高亮样式，它将永远保持高亮状态，因为DedeCMS无法判断你是否“正在”访问这个外部链接。

方法	优点	缺点	推荐度
CSS + PHP标签	灵活、稳定、代码清晰、支持子栏目	需要写一小段PHP逻辑	★★★★★ (最推荐)
{dede:channel}	使用简单，适合动态调用栏目	灵活性稍差，样式控制不如方法一直接	★★★★☆
传统PHP判断	灵活性极高，可处理任何复杂逻辑	代码冗长，可读性差，容易出错	★★☆☆☆ (仅限特殊需求)

对于99%方法一 是最佳选择，它兼顾了灵活性、稳定性和易用性，希望这个详细的教程能帮助你成功实现导航高亮！