在 PHP 中突出显示当前页面

Question

所以，我正在开发一个网站，我正在使用 PHP 模板来做这件事。 我找到了很多关于这个的教程，但没有一个提到 PHP 模板。 这是我的导航模板：

</script>
<!--Main Navigation-->
<header>
  <!-- Sidebar -->
  <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-dark">
    <div class="position-sticky">
      <div class="list-group list-group-flush mx-3 mt-4">
        <a
          href="index.php"
          class="list-group-item list-group-item-action py-2 ripple bg-button"
          aria-current="true"
        >
          <i class="fas fa-address-card fa-fw me-3"></i><span>About us</span></a
          >
        <a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button">
          <i class="fas fa-users fa-fw me-3"></i><span>Our team</span></a
          >
        <a href="positions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-laptop-code fa-fw me-3"></i><span>Open positions</span></a
        >
        <a href="associates.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-handshake fa-fw me-3"></i><span>Associates</span></a
        >
        <a href="commissions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-coins fa-fw me-3"></i><span>Commissions</span></a
        >
        <a href="pingernos.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-server fa-fw me-3"></i><span>Pingernos</span></a
        >
        <a href="network.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item-head"
          ><i class="fas fa-network-wired fa-fw me-3"></i><span>Network</span><i class="fas fa-sort-down"></i></a
        >
        <a href="badwolf.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
            <i class="fas fa-paw fa-fw me-3"></i><span>Bad Wolf</span></a
        >
        <a href="mg.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
          <i class="fas fa-cubes fa-fw me-3"></i><span>MinecraftGolden</span></a
        >
        <a href="cabin.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
            <i class="fas fa-heartbeat fa-fw me-3"></i><span>The Cabin</span></a
        >
        <a href="haven.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
            <i class="fas fa-code fa-fw me-3"></i><span>The Haven</span></a
        >
        <a href="credit.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-award fa-fw me-3"></i><span>Credit</span></a
        >
        <a href="legal.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
          ><i class="fas fa-balance-scale fa-fw me-3"></i><span>Legal</span></a
        >
        <!--
        <a href="#" class="list-group-item list-group-item-action py-2 ripple"
          ><i class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a
        > -->
      </div>
    </div>
  </nav>
  <!-- Sidebar -->

  <!-- Navbar -->
  <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Toggle button -->
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-toggle="collapse"
        data-toggle="collapse"
        data-mdb-target="#sidebarMenu"
        data-target="#collapseOne"
        aria-controls="sidebarMenu"
        aria-expanded="true"
        aria-label="Toggle navigation"
      >
        <i class="fas fa-bars"></i>
      </button>

    <!-- data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->

      <!-- Brand -->
      <a class="navbar-brand" href="index.php">
        <img
          src="assets/PsychOpsTransparent.png"
          class="navbar-ps"
          height="25"
          alt=""
          loading="lazy"
        />
      </a>
      <!-- Right links -->
      <ul class="navbar-nav ms-auto d-flex flex-row">
        <!-- Icon -->
        <li class="nav-item me-3 me-lg-0">
          <a class="nav-link" href="https://github.com/PsychOps" target="_blank">
            <i class="fab fa-github bg-button fa-2x" aria-hidden="true"></i>
          </a>
        </li>
      </ul>
  </nav>
  <!-- Navbar -->
</header>
<!--Main Navigation-->

<!--Main layout-->
<main style="margin-top: 58px;">
  <div class="container pt-4"></div>
</main>
<!--Main layout-->

如何突出显示当前页面？ 如果有人知道怎么做，请回复，非常感谢任何建议。

Answer 1

使用$_SERVER 的REQUEST_URI 或SCRIPT_NAME 键获取当前URL、文件并检查它是否与您的链接匹配。

选项1：完全匹配。

首先获取当前 URL，文件名。将此代码放在您的菜单之前。

<?php
$thisFile = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisFile,  PATHINFO_BASENAME);
// $thisFile maybe xxx.php one of your file or URL.
?>

接下来检查您的链接。这个例子将使用 team.php，检查当前 URL。

<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisFile, 'team.php') !== false) {echo ' current-menu active';} ?>">

上面的代码将检查当前 URL 是否包含 team.php。如果为真，则将添加 current-menu 和 active 类。

选项2：精确匹配并匹配子目录中的文件。

如果您的菜单有 2 个使用相同文件名的项目。示例 team.php 和 support/team.php 然后使用下面的代码。

<?php
$thisUrl = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisUrl ,  PATHINFO_BASENAME);
?>
<!-- exact match file.php -->
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if ('team.php' === $thisFile)) {echo ' current-menu active';} ?>">...</a>

<!-- match /path/file.php -->
<a href="support/team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisUrl, 'support/team.php') !== false) {echo ' current-menu active';} ?>">...</a>

对于这两个选项，您可以只选择一个 CSS 类作为当前活动的菜单项（current-menu、active）或使用您自己的。

---

添加支持的 CSS。

这只是关于 CSS 的。要使您的样式处于活动/当前状态，您必须为它们创建 CSS。 示例：

.current-menu {
  border-left: 5px solid #blue;
}

See it in action