如何在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
相关产品推荐
相关产品推荐

