dede channel高亮如何实现？

“栏目高亮”的核心思想是：通过判断当前页面的 typeid (栏目ID) 是否与导航栏中某个栏目的 id 或其顶级父栏目的 topid 相等，来决定是否添加一个高亮样式（class="current"）。

下面我将分几种常见场景,从简单到复杂，为你提供详细的实现方案。

首页高亮 (最简单)

这是最基础的情况,当用户访问网站首页时，让首页链接高亮。

实现方法：

在模板文件（通常是 head.htm 或 templets/default/index.htm）的导航部分，找到首页的链接标签。

修改前 (普通首页链接):

<a href="{dede:global.cfg_cmsurl/}/">首页</a>

修改后 (首页高亮):

<a href="{dede:global.cfg_cmsurl/}/" {dede:field name='typeid' runphp='yes'}@me = (@me == 0 || @me == '') ? 'class="current"' : ''{/dede:field}>首页</a>

代码解析：

• {dede:field name='typeid' runphp='yes'}: 获取当前页面的栏目ID，在首页上，这个值通常是 0 或空。
• @me = (@me == 0 || @me == '') ? 'class="current"' : '': 这是一句PHP代码。
  • @me 代表当前字段的值，也就是 typeid。
  • (@me == 0 || @me == '') 判断这个值是否为 0 或空字符串，首页满足这个条件。
  • ? 'class="current"'：如果条件成立，则给 @me 赋值为 class="current"。
  • 如果条件不成立,则赋值为空字符串。
• 首页链接会渲染为：<a href="/" class="current">首页</a>。

在你的CSS文件中定义 .current 的样式：

/* 在 style.css 或 main.css 中添加 */
.current a, .current {
    color: #ff6600; /* 设置文字颜色为橙色 */
    font-weight: bold; /* 文字加粗 */
    /* 你还可以添加背景色、下划线等 */
}
/* 或者直接作用于当前链接 */
.current {
    color: #ff6600;
    font-weight: bold;
}

当前栏目高亮 (最常用)

当用户在某个栏目页面（如“新闻”栏目）时，让“新闻”这个栏目链接高亮。

实现方法：

DedeCMS 为此提供了一个专门的底层字段，非常方便。

修改前 (普通栏目链接):

{dede:channel type='top' row='8'}
    <a href='[field:typeurl/]'>[field:typename/]</a>
{/dede:channel}

修改后 (当前栏目高亮):

{dede:channel type='top' row='8'}
    <li class="{dede:field.currentstyle/}">
        <a href='[field:typeurl/]'>[field:typename/]</a>
    </li>
{/dede:channel}

代码解析：

• {dede:channel type='top'}: 调用顶级栏目。
• [field:currentstyle/]: 这是DedeCMS的“魔法字段”，它会自动判断：
  • 如果当前页面的栏目ID与循环到的栏目ID 匹配，它会输出你在后台设置好的 高亮样式。
  • 如果不匹配,则输出空字符串。

如何设置后台的“高亮样式”？

1. 登录DedeCMS后台。
2. 进入【系统】-> 【系统基本参数】。
3. 在左侧菜单选择【核心设置】。
4. 找到 “栏目高亮样式” 这一项，默认值通常是 class='current'，你可以直接修改它，class='active on'，或者直接写完整的HTML样式，如 <strong>[field:typename/]</strong>。
5. 保存更改。

CSS定义 (假设后台设置的是 class="current"):

/* 需要同时作用于 li 和 a 标签，因为高亮样式可能被加在 li 上 */
.current a, .current {
    color: #ff6600;
    font-weight: bold;
}

顶级栏目高亮 (常用且重要)

当用户访问一个子栏目（如“公司简介”下的“发展历程”）时，我们希望它的顶级父栏目（“公司简介”）高亮。

这种情况,[field:currentstyle/] 就不适用了，因为它只会匹配当前栏目本身，我们需要手动判断。

实现方法：

我们需要一个自定义函数来判断当前页面的顶级栏目ID,是否与循环中的栏目ID相等。

在 include/extend.func.php 中添加自定义函数 在文件末尾添加以下PHP代码：

/**
 * 获取当前栏目的顶级栏目ID
 * @return int 顶级栏目ID
 */
function GetTopid()
{
    global $dsql;
    $typeid = isset($GLOBALS['typeid']) ? intval($GLOBALS['typeid']) : 0;
    if($typeid == 0) return 0;
    $query = "SELECT reid FROM `dede_arctype` WHERE id = $typeid";
    $row = $dsql->GetOne($query);
    $topid = $row['reid']; // 获取其父栏目ID
    // 如果父ID不为0，则继续向上查找，直到找到顶级栏目（reid为0的栏目）
    while($topid != 0)
    {
        $typeid = $topid;
        $query = "SELECT reid FROM `dede_arctype` WHERE id = $typeid";
        $row = $dsql->GetOne($query);
        $topid = $row['reid'];
    }
    return $typeid;
}

在模板文件中使用函数 在调用顶级栏目的 {dede:channel} 标签中使用 runphp 来调用这个函数。

{dede:channel type='top' row='8'}
    <li class="
        {dede:field.id runphp='yes'}
            @me = (@me == GetTopid()) ? 'class="current"' : '';
        {/dede:field.id}
    ">
        <a href='[field:typeurl/]'>[field:typename/]</a>
    </li>
{/dede:channel}

代码解析：

• {dede:field.id runphp='yes'}: 获取当前循环中栏目的 id。
• @me = (@me == GetTopid()) ? 'class="current"' : '':
  • GetTopid(): 调用我们刚刚在 extend.func.php 中写的函数，获取当前页面所在顶级栏目的ID。
  • (@me == GetTopid()): 比较循环中的栏目ID和当前页面的顶级栏目ID是否相等。
  • 如果相等,就给 li 标签加上 class="current"，否则不加。

总结与对比

推荐实践： 一个完整的导航栏，通常会同时支持首页高亮和顶级栏目高亮。

<!-- 导航栏示例 -->
<div class="nav">
    <ul>
        <!-- 首页 -->
        <li><a href="{dede:global.cfg_cmsurl/}/" {dede:field name='typeid' runphp='yes'}@me = (@me == 0 || @me == '') ? 'class="current"' : ''{/dede:field}>首页</a></li>
        <!-- 顶级栏目，支持顶级栏目高亮 -->
        {dede:channel type='top' row='8'}
            <li 
                class="
                    {dede:field.id runphp='yes'}
                        @me = (@me == GetTopid()) ? 'current' : '';
                    {/dede:field.id}
                "
            >
                <a href='[field:typeurl/]'>[field:typename/]</a>
            </li>
        {/dede:channel}
    </ul>
</div>

注意：

• 如果你使用了方案三,请务必确保 include/extend.func.php 文件存在并且有写入权限。
• 修改模板后,请清除网站缓存（后台【生成】->【一键更新缓存】）才能看到效果。
• CSS中的 .current 样式可以根据你的网站设计自由定义。