导航的 Active 状态

导航的选中状态样式是通过添加 CSS 类选择器 active 来实现的：

<ul class="navbar-nav mr-auto">
  <li class="nav-item active"><a class="nav-link" href="{{ route('topics.index') }}">话题</a></li>
  <li class="nav-item"><a class="nav-link" href="{{ route('categories.show', 1) }}">分享</a></li>
  <li class="nav-item"><a class="nav-link" href="{{ route('categories.show', 2) }}">教程</a></li>
  <li class="nav-item"><a class="nav-link" href="{{ route('categories.show', 3) }}">问答</a></li>
  <li class="nav-item"><a class="nav-link" href="{{ route('categories.show', 4) }}">公告</a></li></ul>

此样式是 Bootstrap 框架的 导航栏组件 提供。

我们需要通过判断『路由命名』和『路由参数』为导航栏添加 active 类，接下来我们使用一个很方便的类库来辅助我们实现此功能。

使用 Composer 安装 hieu-le/active：

$ composer require "hieu-le/active:~3.5"

安装完成后，在模板中使用：

resources/views/layouts/_header.blade.php

...
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Left Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item {{ active_class(if_route('topics.index')) }}"><a class="nav-link" href="{{ route('topics.index') }}">话题</a></li>
        <li class="nav-item {{ active_class((if_route('categories.show') && if_route_param('category', 1))) }}"><a class="nav-link" href="{{ route('categories.show', 1) }}">分享</a></li>
        <li class="nav-item {{ active_class((if_route('categories.show') && if_route_param('category', 2))) }}"><a class="nav-link" href="{{ route('categories.show', 2) }}">教程</a></li>
        <li class="nav-item {{ active_class((if_route('categories.show') && if_route_param('category', 3))) }}"><a class="nav-link" href="{{ route('categories.show', 3) }}">问答</a></li>
        <li class="nav-item {{ active_class((if_route('categories.show') && if_route_param('category', 4))) }}"><a class="nav-link" href="{{ route('categories.show', 4) }}">公告</a></li>
      </ul>...

上面代码看起来很复杂，太多重复代码，我们来优化下。将重复代码抽出来放到一个辅助函数里：

app/helpers.php

...function category_nav_active($category_id){
    return active_class((if_route('categories.show') && if_route_param('category', $category_id)));}

重新修改模板里的调用：

resources/views/layouts/_header.blade.php

...

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Left Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item {{ active_class(if_route('topics.index')) }}"><a class="nav-link" href="{{ route('topics.index') }}">话题</a></li>
        <li class="nav-item {{ category_nav_active(1) }}"><a class="nav-link" href="{{ route('categories.show', 1) }}">分享</a></li>
        <li class="nav-item {{ category_nav_active(2) }}"><a class="nav-link" href="{{ route('categories.show', 2) }}">教程</a></li>
        <li class="nav-item {{ category_nav_active(3) }}"><a class="nav-link" href="{{ route('categories.show', 3) }}">问答</a></li>
        <li class="nav-item {{ category_nav_active(4) }}"><a class="nav-link" href="{{ route('categories.show', 4) }}">公告</a></li>
      </ul>...

接下来讲解下 active_class 函数的用法，此函数的定义如下：

/**
 * 如果 $condition 不为 False 即会返回字符串 `active`
 *
 * @param        $condition
 * @param string $activeClass
 * @param string $inactiveClass
 *
 * @return string
 */function active_class($condition, $activeClass = 'active', $inactiveClass = '')

如果传参满足指定条件 ($condition) ，此函数将返回 $activeClass，否则返回 $inactiveClass。

此扩展包提供了一批函数让我们更方便的进行 $condition 判断：

1. if_route () - 判断当前对应的路由是否是指定的路由；

2. if_route_param () - 判断当前的 url 有无指定的路由参数。

3. if_query () - 判断指定的 GET 变量是否符合设置的值；

4. if_uri () - 判断当前的 url 是否满足指定的 url；

5. if_route_pattern () - 判断当前的路由是否包含指定的字符；

6. if_uri_pattern () - 判断当前的 url 是否含有指定的字符；