如何从 parent blade 模板中的 HTML 元素更改 class

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 & li class "active"，所以它表明你在第 X 页上。标准的 ul（未激活）是 class "droplink"，当它处于活动状态时，它被称为"droplink active open"。

网站本身的浏览量

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

Answer 1

您可以在menu.blade.php

中查看当前路线

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

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

Answer 2

你可以这样做

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

也可以这样用例如

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

对于其他要检查的路线，只需将 / 更改为 about-us 之类的内容或您需要的任何内容。

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

您可以对 'layouts.menu'

中的每条路线使用此方法

Answer 3

为你的路线命名->name('homepage');

在你的菜单中，你可以使用这个作为例子：

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

哪个会 return 'active if its active'

使用css自定义您的activeclass

Edit

在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';
}

如何从 parent blade 模板中的 HTML 元素更改 class

How to change a class from a HTML element in parent blade template

php

laravel

templates

menu

blade