在 PHP 中突出显示当前页面

Posted

技术标签:

【中文标题】在 PHP 中突出显示当前页面【英文标题】:Highlight current page in PHP 【发布时间】:2022-01-05 02:12:31 【问题描述】:

所以,我正在开发一个网站,我正在使用 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"
          
          
          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-->

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

【问题讨论】:

那些教程在什么方面没有起作用?我不明白为什么使用模板会改变它的基础。究竟应该如何做取决于您使用的模板引擎(它们并非都是平等的) 【参考方案1】:

使用$_SERVERREQUEST_URISCRIPT_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-menuactive 类。

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

如果您的菜单有 2 个使用相同文件名的项目。示例 team.phpsupport/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-menuactive)或使用您自己的。


添加支持的 CSS。

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

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

See it in action

【讨论】:

好吧,为了让一切正确,我必须将第一个代码放在 navigation.php 的顶部,然后在导航栏中的锚标记中添加该 php 脚本?那应该这样做吗?因此,如果我然后在 css 中编辑您制作的那些类(当前菜单和活动),它应该可以工作吗?对不起,如果我问了很多,但我只是不习惯 php。 a 标签内添加 PHP 之前,您可以只选择一个 CSS 类。在我的示例中,我使用了 2 个类(current-menuactive),如果你不使用 Bootstrap 之类的东西,你可以选择任何你想要的东西。并确保在每个a 中正确编辑if 条件。然后在文件中创建新的 CSS,例如 .current-menu background-color: orange; color: white; 来设置当前活动链接的样式。 好的,虽然我不确定如何处理您发送的第一个代码。 检测当前 URL 并仅获取文件名,例如 xxx.php。 是的,但是,我是就这样保留它还是我必须编辑一些东西?

以上是关于在 PHP 中突出显示当前页面的主要内容,如果未能解决你的问题,请参考以下文章

PHP 突出显示导航中的当前页面

PHP 突出显示菜单中的当前页面

PHP PHP包括导航,选择/突出显示当前页面

PHP include用于导航,选中/突出显示当前页面

突出显示当前页面的导航菜单

使用反应在引导程序中突出显示当前页面