Question

我对Laravel没有经验，所以我为自己创建了一个项目，以便更好地学习Laravel框架。我已经开始使用免费的HTML模板，并尝试将其转换为Blade模板。我有以下内容：

app.blade.php

这包含基本的HTML结构和JS en CSS。除此之外，它还包含以下代码：

<main class="page-content content-wrap">
    @include('layouts.topbar')

    @include('layouts.menu')

    @yield('content')
</main><!-- Page Content -->

topbar.blade.php

这包含模板所包含的简单顶部栏，而不是这个问题的有趣内容。

menu.blade.php

这包含我拥有的所有菜单项。该文件包含整个menu-div和所有带ul和li的菜单项。在这个文件中，我可以给出一个ul＆amp; li这个类是“活动的”，所以它表明你在第X页。标准ul（不活跃）是类“droplink”，当它处于活动状态时，它被称为“droplink active open”。

网站本身的观看次数

在网站的视图中，我包含了app.blade.php，我填写了视图中的内容部分。现在我的问题是，如何更改正确的页面在菜单中显示为活动状态？我的感觉说我无法在menu.blade.php中定义，但我可以在哪里？

Answer 1

您可以在 menu.blade.php

中查看当前路线

如果它与当前路线匹配，则可以添加活动类。

<a class="{{ str_contains(request()->url(), '/some-page') ? 'active' : '' }}" href="/some-page">Some Page</a>

Answer 2

你可以这样做

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<ul id="side-menu">
  <li>
    <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>
  </li>
  <li>
    <div class="side-menu__label">Hello World</div>
  </li>
</ul>

它也可以像这样使用

@if(Route::getCurrentRoute()->uri() == '/') <li class="active"></li> @endif

要检查其他路线，只需将<li class="@if(Route::getCurrentRoute()->uri() == '/')active @endif"></li>更改为/或任何您需要的内容。

这将检查当前路线。如果当前路由是about-us或root，在这种情况下，它将添加具有活动类的li。您可以将它放在任何需要的地方。

您可以在/

中为每个路线使用此方法

Answer 3

为您的路线->name('homepage');

命名

在菜单中，您可以将其用作例子：

  <li class="{{ isActiveRoute('dashboard') }}">

如果有效，则返回“有效”

使用css自定义active类

修改

在app / Helpers / Navigation.php中添加帮助函数

  function isActiveRoute($route, $output = 'active')
    {
        if (Route::currentRouteName() == $route) {
            return $output;
        }
    }

为了在任何地方使用它，请在AppServiceProvider.php

中注册

public function register()
    {
    require_once __DIR__ . '/../Http/Helpers/Navigation.php';
}

如何从父刀片模板中的HTML元素更改类

3 个答案: