You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在PHP Smarty中为当前页面链接添加active类及.nav-link新增类?

在Smarty中为当前页面链接添加Active类的几种方法

嘿,这在Smarty里其实有几种非常实用的实现方式,我来给你逐个拆解,顺便解答你第二个问题——当然可以给带.nav-link的当前链接新增类,下面的例子都是这么做的:

1. 直接对比当前请求URL(最快捷的基础方案)

如果你的导航链接对应的是固定的页面路径,直接用Smarty内置的$smarty.server.REQUEST_URI或者$smarty.server.PHP_SELF来判断就行。比如:

<ul class="nav-menu">
  <li>
    <a href="/index.php" class="nav-link {if $smarty.server.REQUEST_URI == '/index.php'}active{/if}">首页</a>
  </li>
  <li>
    <a href="/articles.php" class="nav-link {if $smarty.server.REQUEST_URI == '/articles.php'}active{/if}">文章列表</a>
  </li>
</ul>

如果你的URL带参数(比如/articles.php?cat=1),上面的精准匹配会失效,这时候可以用strpos来判断当前URL是否包含目标页面路径:

{if strpos($smarty.server.REQUEST_URI, '/articles.php') !== false}active{/if}

2. 给页面分配标识变量(更灵活的方案)

这种方法适合URL有重写、参数多变的场景。首先在每个PHP页面里,给Smarty分配一个标识当前页面的变量:

// index.php里
$smarty->assign('current_page', 'home');

// articles.php里
$smarty->assign('current_page', 'articles');

然后在模板里通过这个变量判断,给对应链接加类:

<ul class="nav-menu">
  <li>
    <a href="/index.php" class="nav-link {if $current_page == 'home'}active custom-highlight{/if}">首页</a>
  </li>
  <li>
    <a href="/articles.php" class="nav-link {if $current_page == 'articles'}active custom-highlight{/if}">文章列表</a>
  </li>
</ul>

这里我顺便加了custom-highlight类,你可以根据需求添加任意多个类。

3. 自定义Smarty函数(大型项目推荐)

如果你的导航菜单很长,重复写条件判断会很麻烦,不如注册一个自定义函数来简化代码。首先在PHP里注册函数:

function smarty_function_get_active_class($params, $smarty) {
    $target_page = $params['page'] ?? '';
    $current_page = $smarty->getTemplateVars('current_page') ?? '';
    // 可以自定义要添加的类,这里默认是active
    $class_name = $params['class'] ?? 'active';
    return ($current_page == $target_page) ? $class_name : '';
}
$smarty->registerPlugin('function', 'active_class', 'smarty_function_get_active_class');

然后在模板里就能这么用:

<ul class="nav-menu">
  <li>
    <a href="/index.php" class="nav-link {active_class page='home'}">首页</a>
  </li>
  <li>
    <a href="/articles.php" class="nav-link {active_class page='articles' class='active custom-style'}">文章列表</a>
  </li>
</ul>

这种方式代码更整洁,维护起来也方便,适合有大量导航项的项目。


内容的提问来源于stack exchange,提问作者Lion Dirty

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 08:28:16