Question

让我简单介绍一下这个问题，一旦用户登录，我将在我的网站上大约有20个页面，我需要组织这些页面以使用相同的标题，所以我和＃39;我决定使用布局，因为我使用Laravel框架，如果我想要做出改变，那么看起来很愚蠢，如果我想改变那就太糟糕了。

在Bootstrap中，我没有为任何选定的页面添加任何类型的活动类，它只是一个导航栏，我最近升级到Bulma框架，它需要一个活动的类父标签显示子标签，父类和子类别系统的排序。

我不确定如何在布局中处理这个问题，我需要添加一个活动类，我还需要选择要显示的子导航。

我在下面添加了我的代码，我想知道是否有人可以告诉我如何处理这个问题？

以下代码是我的整个页面，包括标题（on）

HandleVisibility

Answer 1

如果我理解得很好，你需要＆＃34;相同的标题＆＃34;在每一页上。 Laravel附带Blade Template Engine，它有一套方法可以帮助我们。

使用模板引擎，您可以在 resources / views / layouts / app.blade.php

中创建应用模板

使用 @yield ，您可以告知哪个部分是动态的：

<div class="container">
   @yield('content')
</div>

要在其他视图中重复使用该模板，例如使用两个页面：

文件 resources / views / layouts / pages / one.blade.php

的内容

@extends('layouts.app')
@section('content')
<div class="row">
 <h1>Page 1</h1>
</div>
@endsection

文件 resources / views / layouts / pages / two.blade.php

的内容

@extends('layouts.app')
@section('content')
<div class="row">
 <h1>Page 2</h1>
</div>
@endsection

使用 @yield ， @extend 和 @section ，您可以重复使用Laravel应用程序中的任何HTML模板。

我们可以创建我们需要的任何 @yield ：

<div class="container">
    @yield('content')
</div>
@yield('scripts')

在我们的网页中重复使用：

@extends('layouts.app')
@section('content')
<div class="row">
 <h1>More than one @yield</h1>
</div>
@endsection

@section('scripts')
<script type="text/javascript" />
    console.log('using Blade Template Engine');
</script>
@endsection

有 @include 方法，如果需要，还包含其他文件的内容。

@extends('layouts.app')
@section('content')
 <div class="row">
 <h1>Page 2</h1>
   @include('forms.form2')
 </div>
@endsection

<强>更新：

了解以上内容，我们可以做到：

@extends('layouts.app')
@section('content')
<div class="row">
 <h1>You are in Item B</h1>
<ul>
   <li id="liA">Item A</li>
   <li id="liB">Item B</li>
   <li id="liC">Item C</li>
</ul>
</div>
@endsection

@section('scripts')
<script type="text/javascript" />
    var d = document.getElementById("liB");
    d.className += " is-active";
</script>
@endsection

这将在带有id＆＃34; liB＆＃34;的元素中添加CSS类，我们需要使用某些东西来识别元素，我使用＆＃34; id＆＃34;属性，但你可以使用任何人，只需要检查使用什么JS方法来获取它＆＃34; d＆＃34;变量。您可以查看此信息以获取更多信息Element.className

我不会使用Bulma，但我相信这会做你想要的。

将父母和子女导航组织成全局布局

1 个答案: