eyoucms导航的二级栏目怎样增加高亮？

在 EyouCMS 中为导航栏的二级栏目（下拉菜单）设置高亮，是一个提升网站用户体验的重要细节。它能让用户清晰地知道自己当前位于网站的哪个栏目下。核心原理是：在对应的栏目页面下，为该栏目的 Html 元素添加一个特定的高亮样式类（如 active或 current）。

方法一：使用系统内置的导航标签高亮（推荐，最标准）

EyouCMS 的导航标签通常内置了高亮判断功能。你需要确保你的导航代码使用了正确的系统标签和变量。

步骤：

找到导航模板文件： 这个文件通常是 header.html或 nav.html，位于你的模板目录下（如 /template/pc/）。

检查并修改导航代码： 确保你的导航菜单使用的是 EyouCMS 的系统标签，例如 {:channel()}或 {:nav()}，并正确使用了高亮变量。

下面是一个标准的、支持一级和二级高亮的导航代码示例：

<PRe class="ybc-pre-component ybc-pre-component_not-math"><ul class="navbar"> {eyou:channel type='top' row='10' id='field'} <li class="nav-item {if $field.id == $content.toplevelid}current{/if}">  <a href="{$field.typedir}" {if $field.current}class="active"{/if}>{$field.typename}</a>  {if $field.children}  <ul class="sub-menu"> {eyou:channel type='son' typeid='$field.id' id='field2'} <li class="sub-item {if $field2.id == $content.typeid}current{/if}">  <a href="{$field2.typedir}" {if $field2.current}class="active"{/if}>{$field2.typename}</a> </li> {/eyou:channel} </ul> {/if} </li> {/eyou:channel} </ul>

代码关键点解释：

一级栏目高亮判断： {if $field.id == $content.toplevelid}current{/if}

$content.toplevelid是当前页面的顶级栏目ID。如果当前栏目的ID ($field.id) 等于这个顶级栏目ID，就为这个 <li>标签添加 current类。

二级栏目高亮判断： {if $field2.id == $content.typeid}current{/if}

$content.typeid是当前页面的直接栏目ID。如果二级栏目的ID ($field2.id) 等于这个直接栏目ID，就为这个二级栏目的 <li>标签添加 current类。

当前栏目链接高亮： {if $field2.current}class="active"{/if}

使用系统自带的 $field2.current变量来判断是否为当前栏目，并为 <a>标签添加 active类。

编写css样式：

在你的CSS文件（如 style.css）中，为 .current和 .active类定义高亮样式。

/* 一级栏目项高亮样式 */
.navbar .nav-item.current {
    background-color: #f0f0f0; /* 背景色 */
}

/* 栏目链接高亮样式 */
.navbar .nav-item a.active,
.navbar .sub-item a.active {
    color: #ff0000; /* 字体颜色 */
    font-weight: bold;
}

/* 二级栏目项高亮样式 */
.navbar .sub-item.current {
    background-color: #e0e0e0;
}

方法二：使用Javascript辅助高亮（灵活备用方案）

如果方法一因模板原因不生效，或者你需要更灵活的控制，可以使用JavaScript。原理是获取当前页面的栏目ID，然后为对应的导航元素添加高亮类。

步骤：

在模板中输出当前栏目ID： 在 header.html的 <body>标签后，输出当前栏目的ID，方便JavaScript读取。

<script type="text/javascript">
    var currentTypeId = {$content.typeid}; // 当前栏目ID
    var currentTopLevelId = {$content.toplevelid}; // 当前顶级栏目ID
</script>

编写JavaScript代码： 在页面加载后，遍历导航元素，为匹配的栏目添加高亮类。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有导航链接
    var navLinks = document.querySelectorAll('.navbar a');
    
    navLinks.forEach(function(link) {
        // 假设你的链接的href包含栏目ID，例如 /type/123.html
        var href = link.getAttribute('href');
        // 使用正则表达式从URL中提取栏目ID
        var match = href.match(/type\/(\d+)\.html/);
        
        if (match) {
            var typeIdInHref = match[1];
            // 如果提取到的ID等于当前页面的栏目ID，则为其父级<li>添加高亮类
            if (parseInt(typeIdInHref) === currentTypeId) {
                link.classList.add('active');
                // 同时高亮其父级<li>元素
                var parentLi = link.closest('li');
                if (parentLi) {
                    parentLi.classList.add('current');
                }
            }
        }
    });
});
</script>

注意： 此方法需要根据你网站的实际URL结构来调整正则表达式 (/type\/(\d+)\.html/)。

总结与建议

方法	优点	缺点	推荐度
方法一：系统标签	标准、高效、准确，完全利用系统变量，无需额外计算。	需要模板代码符合规范。	★★★★★（首选）
方法二：JavaScript	灵活，不依赖特定的模板标签，适用于各种复杂情况。	相对复杂，依赖URL规则，如果JS被禁用则失效。	★★★☆☆（备用）