PHP复用Laravel风格Partials时，如何实现当前页面高亮？

这个问题我之前帮不少开发者解决过，其实核心就是在加载页眉partial的时候，让PHP判断当前页面是哪个，给对应的导航项加上高亮类，下面给你两种最常用的实现方法，都很简单易维护：

方法一：通过当前页面文件名自动判断 #

这种方法不需要在每个页面额外写代码，直接利用PHP的$_SERVER全局变量获取当前页面的文件名，和导航链接的目标文件对比，匹配就添加高亮类（比如active）。

假设你的页眉partial文件是header.php，导航部分可以这么写：

<div class="header">
  <div class="header-wrapper">
    <a href="index.php" class="<?php echo basename($_SERVER['PHP_SELF']) === 'index.php' ? 'active' : ''; ?>">
      <img class="logo" src="images/logo.png" alt="网站logo">
    </a>
    <!-- 其他导航项示例 -->
    <a href="about.php" class="<?php echo basename($_SERVER['PHP_SELF']) === 'about.php' ? 'active' : ''; ?>">关于我们</a>
    <a href="services.php" class="<?php echo basename($_SERVER['PHP_SELF']) === 'services.php' ? 'active' : ''; ?>">服务列表</a>
  </div>
</div>

原理说明： #

• $_SERVER['PHP_SELF']会返回当前执行脚本的路径（比如/index.php或者/pages/about.php）
• basename()函数会提取路径里的文件名（比如上面的例子会得到index.php或about.php）
• 三元运算符条件 ? 结果1 : 结果2：如果当前文件名和导航链接的目标文件一致，就输出active类，否则输出空字符串

方法二：手动定义页面标识（更灵活） #

如果你的网站用了URL重写（比如伪静态），或者页面文件名和导航名称不直接对应，这种方法更可靠——在每个页面开头定义一个标识变量，再在页眉partial里判断这个变量。

步骤1：在每个页面开头定义变量 #

比如index.php里：

<?php 
// 定义当前页面标识
$currentPage = 'home';
// 加载页眉partial
include 'header.php'; 
?>
<!-- 页面内容 -->

about.php里：

<?php 
$currentPage = 'about';
include 'header.php'; 
?>
<!-- 页面内容 -->

步骤2：在页眉partial里判断标识 #

修改header.php的导航部分：

<div class="header">
  <div class="header-wrapper">
    <a href="index.php" class="<?php echo $currentPage === 'home' ? 'active' : ''; ?>">
      <img class="logo" src="images/logo.png" alt="网站logo">
    </a>
    <a href="about.php" class="<?php echo $currentPage === 'about' ? 'active' : ''; ?>">关于我们</a>
    <a href="services.php" class="<?php echo $currentPage === 'services' ? 'active' : ''; ?>">服务列表</a>
  </div>
</div>

额外优化： #

为了避免未定义变量的警告，可以在header.php开头加一句默认值：

<?php $currentPage = isset($currentPage) ? $currentPage : ''; ?>

最后：添加CSS高亮样式 #

不管用哪种方法，都需要给active类写CSS样式，才能看到高亮效果，比如：

/* 页眉导航高亮样式 */
.header-wrapper a.active {
  color: #2563eb; /* 自定义高亮颜色 */
  font-weight: 600;
  border-bottom: 2px solid #2563eb;
}

这样就能实现当前页面导航项的高亮了，后续修改导航或者高亮逻辑，只需要维护header.php这一个文件，完全符合你用partial的初衷~

内容的提问来源于stack exchange，提问作者O'Niel