如何向嵌套引用的navbar.php传递变量以实现导航栏当前页面高亮

Hey there! 完全懂你的困惑——把导航栏抽成单独文件后，原来直接在页面里设置aria-current="page"的方法就失效了，毕竟现在导航栏是共用的。咱们一步步来，把这事讲得明明白白。

核心思路 #

你的每个页面（比如about.php、portfolio.php）需要告诉共用的navbar.php：「我是当前活跃页面」。我们会在每个页面里先定义一个标识变量，再引入导航栏，最后在导航栏里根据这个变量判断给哪个链接加上高亮属性。

Step 1：在每个页面定义当前页的标识 #

在引入navbar.php之前，先定义一个变量（比如叫$active_page），用来标记当前是哪个页面。

举几个例子：

• index.php（首页）：

<?php
// 告诉导航栏：当前是首页
$active_page = 'home';
// 引入导航栏文件
include 'navbar.php';
?>

• about.php（关于页）：

<?php
$active_page = 'about';
include 'navbar.php';
?>

• portfolio.php（作品集页）：

<?php
$active_page = 'portfolio';
include 'navbar.php';
?>

• contact.php（联系页）：

<?php
$active_page = 'contact';
include 'navbar.php';
?>

Step 2：修改navbar.php，根据变量添加高亮属性 #

现在更新你的navbar.php代码，让它检查$active_page变量，给匹配的链接加上aria-current="page"属性。另外我们加个默认值，防止忘记设置变量时出错。

导航栏代码改成这样：

<?php
// 如果没设置active_page，默认标记为首页（避免报错）
if (!isset($active_page)) {
  $active_page = 'home';
}
?>

<nav>
  <!-- 首页链接 -->
  <a 
    href="index.php" 
    <?php if ($active_page == 'home') echo 'aria-current="page"'; ?>
  >
    首页
  </a>

  <!-- 关于页链接 -->
  <a 
    href="about.php" 
    <?php if ($active_page == 'about') echo 'aria-current="page"'; ?>
  >
    关于
  </a>

  <!-- 作品集页链接 -->
  <a 
    href="portfolio.php" 
    <?php if ($active_page == 'portfolio') echo 'aria-current="page"'; ?>
  >
    作品集
  </a>

  <!-- 联系页链接 -->
  <a 
    href="contact.php" 
    <?php if ($active_page == 'contact') echo 'aria-current="page"'; ?>
  >
    联系我
  </a>
</nav>

为什么这样能行？ #

当你在某个页面里引入navbar.php时，PHP会把导航栏的代码当成当前页面的一部分来执行。这意味着你在父页面定义的变量（比如$active_page），在导航栏文件里是可以直接用的。所以导航栏就能知道当前是哪个页面，自动给对应链接加上高亮属性啦。

可选进阶：自动识别当前页（不用手动定义变量） #

如果你不想在每个页面都写$active_page，可以用PHP自带的$_SERVER['PHP_SELF']自动获取当前页面的文件名。修改后的navbar.php如下：

<?php
// 获取当前页面的文件名（比如index.php、about.php）
$current_page = basename($_SERVER['PHP_SELF']);
?>

<nav>
  <a 
    href="index.php" 
    <?php if ($current_page == 'index.php') echo 'aria-current="page"'; ?>
  >
    首页
  </a>
  <a 
    href="about.php" 
    <?php if ($current_page == 'about.php') echo 'aria-current="page"'; ?>
  >
    关于
  </a>
  <!-- 其他链接依此类推 -->
</nav>

这样就不用在每个页面手动设置变量了，导航栏会自动识别当前页面！

备注：内容来源于stack exchange，提问作者Veance