dede导航选中标签怎么实现？

在 PHP 模板中，通过判断当前页面的 URL 或栏目 ID，来动态给对应的 <li> 或 <a> 标签添加一个特定的 CSS 类名（active 或 selected），然后在 CSS 中为这个类名定义样式。

下面我将分两种最常见的情况进行详细说明,并提供完整的代码示例。

主导航栏（一级栏目）高亮

这种情况最常见，就是当用户访问某个栏目时,主导航栏中对应的那个栏目项要高亮显示。

第1步：准备 CSS 样式

在你的 CSS 文件中，定义一个高亮状态的样式，通常我们会改变文字颜色、背景色或添加下划线。

/* 假设你的导航链接默认样式是 */
.nav-item a {
  color: #333; /* 默认文字颜色 */
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}
/* 当链接被选中或高亮时，添加的 active 类样式 */
.nav-item a.active {
  color: #ff6600; /* 高亮文字颜色 */
  background-color: #f0f0f0; /* 高亮背景色 */
  font-weight: bold; /* 可以加粗 */
}

第2步：修改 DedeCMS 的导航标签 ({dede:channel})

这是最关键的一步，我们需要修改 DedeCMS 的内置标签 {dede:channel},在其中加入判断逻辑。

默认的 {dede:channel} 标签通常是这样的：

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

我们需要修改它，使其在当前栏目时添加 active 类,这里有两种主流的实现方法。

方法 A：使用 DedeCMS 的 currentstyle 属性（推荐，最简单）

{dede:channel} 标签有一个非常方便的属性 currentstyle，专门用来实现这个功能，它会在当前栏目链接上应用你指定的 HTML 模板。

修改后的代码：

<ul class="nav">
  <!-- 首页单独处理，因为首页不属于任何栏目 -->
  <li class="nav-item">
    <a href='{dede:global.cfg_cmsurl/}/' 
       {dede:field name='typeid' runphp='yes'}@me = (@me == '0') ? "class='active'" : "" ;{/dede:field}>
       首页
    </a>
  </li>
  <!-- 一级栏目循环 -->
  {dede:channel type='top' row='8'}
    <li class="nav-item">
      <a href="[field:typelink/]" 
         [field:typelink runphp='yes']
            @me = (@me == dedeGetCurUrl()) ? "class='active'" : "";
         [/field:typelink]>
         [field:typename/]
      </a>
    </li>
  {/dede:channel}
</ul>

代码解释：

1. 首页判断：{dede:field name='typeid' runphp='yes'}...{/dede:field} 这段 PHP 代码判断当前栏目的 ID (typeid) 是否为 0（首页的 typeid 为 0），如果是，就在 <a> 标签里加上 class='active'。
2. 栏目判断：[field:typelink runphp='yes']...[/field:typelink] 这段代码对每个栏目的链接进行判断。
   • @me 是 DedeCMS 模板中的变量，在这里代表 [field:typelink/] 的值（即当前栏目的链接）。
   • dedeGetCurUrl() 是一个 DedeCMS 函数，用于获取当前页面的完整 URL。
   • (@me == dedeGetCurUrl()) ? "class='active'" : "" 是一个三元运算符，如果当前栏目的链接 (@me) 等于当前页面的 URL，就返回 class='active',否则返回空字符串。
   • 这个 class='active' 会被插入到 <a> 标签中。

方法 B：手动判断（更灵活，适用于复杂逻辑）

如果你觉得 currentstyle 不够灵活，或者想用更通用的 PHP 语法,可以手动写判断。

修改后的代码：

<ul class="nav">
  <li class="nav-item"><a href='{dede:global.cfg_cmsurl/}/' {dede:field name='typeid' runphp='yes'}@me = (@me == '0') ? "class='active'" : "" ;{/dede:field}>首页</a></li>
  {dede:channel type='top' row='8'}
    <li class="nav-item">
      <a href="[field:typelink/]" 
         [field:id runphp='yes']
            $currentTypeId = intval(@me); // 获取当前循环栏目的ID
            $current_pageTypeId = intval($GLOBALS['typeid']); // 获取当前页面的typeid
            // 判断当前栏目的ID是否等于当前页面的typeid
            if($currentTypeId == $current_pageTypeId) {
                @me = " class='active'";
            } else {
                @me = "";
            }
         [/field:id]>
         [field:typename/]
      </a>
    </li>
  {/dede:channel}
</ul>

代码解释：

这种方法直接比较栏目的 id 和当前页面的 typeid。$GLOBALS['typeid'] 是一个全局变量，存储了当前页面的栏目 ID，这种方法在某些特殊页面（如列表页、文章页）上判断更准确。

子栏目高亮（面包屑导航或侧边栏）

有时候我们需要在面包屑导航或者侧边栏中,让当前层级的父栏目也高亮。

面包屑：首页 > 产品中心 > 手机，我们希望“产品中心”也保持高亮状态。

解决方案

这同样是通过 PHP 判断实现的，在面包屑或子栏目列表中，我们不仅判断当前栏目,还要判断其父栏目。

面包屑导航示例 ({dede:field name='position'})

默认的面包屑标签是 {dede:field name='position' /}，它会生成类似 首页 > 产品中心 > 手机 的链接,我们可以自定义它的样式。

<div class="breadcrumb">
  {dede:field name='position' runphp='yes'}
    $tc = @me;
    $tc = preg_replace('/<a[^>]+>([^<]+)<\/a>/i', '<a href="#" class="active">$1</a>', $tc);
    @me = $tc;
  {/dede:field}
</div>

代码解释：

这段代码使用了正则表达式 preg_replace 来替换面包屑中的链接。

• '/<a[^>]+>([^<]+)<\/a>/i' 是一个正则表达式，用来匹配所有 <a>
• '<a href="#" class="active">$1</a>' 是替换的模板。$1 代表第一个捕获组 ([^<]+),也就是链接的文本内容。
• 这个方法简单粗暴，会将面包屑里的所有链接都加上 active 类，如果你只想高亮父栏目，需要更复杂的逻辑，通常需要获取当前栏目的父栏目 ID,然后进行针对性替换。

<!-- 假设当前栏目ID是 5，我们要显示它的所有子栏目 -->
{dede:channel type='son' typeid='5'}
  <a href="[field:typelink/]" [field:id runphp='yes'] if($GLOBALS['typeid'] == @me) @me=" class='active'"; else @me=""; [/field:id]>[field:typename/]</a>
{/dede:channel}