织梦导航二级栏目如何实现高亮效果？

核心原理

无论使用哪种方法,核心原理都是：

1. 获取当前栏目ID：通过 typeid 变量。
2. 获取当前栏目的顶级父栏目ID：通过 GetTopid() 函数。
3. 进行条件判断：在模板中，使用 if 语句判断当前栏目ID或顶级父栏目ID是否等于需要高亮的栏目ID。
4. 添加高亮样式：如果条件成立，就在对应的 <a> 标签或 <li> 标签上添加一个特定的CSS类名（如 active, current, hover 等）。

使用灵动标签 {dede:channel} 和 if 判断（最推荐）

这是最灵活、最常用，也是织梦官方社区推荐的方法,它适用于大多数导航栏布局。

准备CSS样式

在你的CSS文件中定义高亮样式。

/* 导航栏普通样式 */
.nav a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
}
/* 导航栏高亮样式 */
.nav .active a {
    background-color: #007bff;
    color: #fff;
}

修改导航栏模板文件

打开你的导航栏模板文件，通常是 head.htm 或在 templets/default/ 目录下的相应文件，找到调用栏目的代码,用下面的代码替换它。

示例代码：

<ul class="nav">
    <li><a href="{dede:global.cfg_cmsurl/}/">首页</a></li>
    {dede:channel type='top' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
        <li>
            <a href="[field:typelink/]">[field:typename/]</a>
            <!-- 判断是否有二级子栏目，如果有则显示 -->
            {dede:channel type='son' noself='yes'}
                <ul class="sub-nav">
                    <li><a href="[field:typelink/]">[field:typename/]</a></li>
                </ul>
            {/dede:channel}
        </li>
    {/dede:channel}
</ul>

上面的代码只是基础，它无法让二级栏目高亮其父级，我们需要更强大的逻辑。

实现二级高亮及其父级高亮的完整代码

这是最关键的一步，我们需要使用 {dede:channel} 的 typeid 属性和 if 条件判断。

<ul class="nav">
    <li><a href="{dede:global.cfg_cmsurl/}/">首页</a></li>
    {dede:channel type='top' row='8'}
        <li 
            [field:typename runphp='yes']
                $currentTypeid = $GLOBALS['typeid'];
                $topid = GetTopid($this->Fields['id']); // 获取当前栏目的顶级ID
                // 判断当前栏目ID或顶级ID是否等于本栏目的ID
                if($currentTypeid == @me || $topid == @me) {
                    @me = 'class="active"';
                } else {
                    @me = '';
                }
            [/field:typename]
        >
            <a href="[field:typelink/]">[field:typename/]</a>
            <!-- 获取并显示当前一级栏目的所有子栏目 -->
            {dede:channel type='son' noself='yes' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
                <ul class="sub-nav">
                    <li [field:typename runphp='yes']
                        $currentTypeid = $GLOBALS['typeid'];
                        if($currentTypeid == @me) {
                            @me = 'class="active"';
                        } else {
                            @me = '';
                        }
                    [/field:typename]>
                        <a href="[field:typelink/]">[field:typename/]</a>
                    </li>
                </ul>
            {/dede:channel}
        </li>
    {/dede:channel}
</ul>

代码解析：

1. {dede:channel type='top'}: 循环输出所有一级栏目。
2. [field:typename runphp='yes']...[/field:typename]: 这是对 typename 字段进行PHP处理的语法。
3. $currentTypeid = $GLOBALS['typeid'];: 获取当前页面的栏目ID。
4. $topid = GetTopid($this->Fields['id']);: 获取当前循环到的一级栏目的ID，并找到它的顶级ID（对于一级栏目来说，顶级ID就是它自己）。
5. if($currentTypeid == @me || $topid == @me): 核心判断逻辑，如果当前页面的栏目ID等于这个一级栏目的ID，或者当前页面的顶级栏目ID等于这个一级栏目的ID，那么就在 <li> 标签上添加 class="active"。
6. {dede:channel type='son'}: 在一级栏目 <li> 内部,循环输出它的所有二级子栏目。
7. currentstyle: 这里可以直接使用 currentstyle，因为当你在二级栏目页时，typeid 变量就是二级栏目的ID，currentstyle 会自动匹配到当前二级栏目。

使用自定义函数（更优雅）

如果你觉得在模板里写大量 runphp 代码很混乱,可以创建一个自定义函数来简化逻辑。

创建自定义函数文件

1. 打开 include/common.func.php 文件。
2. 在文件末尾添加如下函数：

/**
 * 判断栏目是否为当前栏目或其父级栏目
 * @param int $id 需要判断的栏目ID
 * @return string 如果是则返回 ' class="active"'，否则返回空字符串
 */
function checkActive($id) {
    $currentTypeid = isset($GLOBALS['typeid']) ? $GLOBALS['typeid'] : 0;
    if (empty($currentTypeid)) {
        return '';
    }
    // 获取当前栏目的顶级ID
    $topid = GetTopid($GLOBALS['arclist']['type'] ?? $currentTypeid);
    if ($currentTypeid == $id || $topid == $id) {
        return ' class="active"';
    }
    return '';
}

在模板中调用函数

你的模板代码会变得非常简洁。

<ul class="nav">
    <li><a href="{dede:global.cfg_cmsurl/}/">首页</a></li>
    {dede:channel type='top' row='8'}
        <li [field:id function='checkActive(@me)'/]>
            <a href="[field:typelink/]">[field:typename/]</a>
            {dede:channel type='son' noself='yes' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
                <ul class="sub-nav">
                    <li [field:id function='checkActive(@me)'/]>
                        <a href="[field:typelink/]">[field:typename/]</a>
                    </li>
                </ul>
            {/dede:channel}
        </li>
    {/dede:channel}
</ul>

代码解析：

• [field:id function='checkActive(@me)'/]: 这行代码会获取当前栏目的 id，然后把它作为参数传递给 checkActive 函数，函数会返回 class="active" 或空字符串，并直接输出到 <li> 标签中。

这种方法将逻辑与表现分离，模板更清晰,推荐有一定开发基础的用户使用。

修改PHP源文件（不推荐，慎用）

这种方法直接修改织梦的核心文件，可以实现“自动化”高亮，即无需在模板里做任何判断。强烈不推荐,因为：

1. 升级织梦版本后,修改的代码会丢失。
2. 修改核心文件可能导致不可预知的错误。
3. 灵活性差,无法处理特殊情况。

如果你仍然想了解，可以修改 include/helpers/extend.helper.php 文件，找到 GetTopid 函数，在其后面添加一个新函数，然后在模板中调用，但鉴于其高风险性,这里不再详述。

总结与建议

对于绝大多数用户，强烈推荐使用方法一，如果你对代码整洁度有更高要求，并且网站不会频繁升级织梦版本，方法二是更好的选择。

请根据你的实际情况选择最适合你的方案,并确保在修改前备份好你的模板和核心文件。