将父子导航组织到全局布局中答案

【问题标题】：Organise parent and child navigation into global layout将父子导航组织到全局布局中
【发布时间】：2018-03-12 08:29:26
【问题描述】：

让我简单介绍一下这个问题，一旦用户登录，我的网站上将有大约 20 个页面，我需要组织这些页面以使用相同的标题，所以我已经在我使用 Laravel 框架时决定使用布局，如果我想进行更改，那将是地狱。

在 Bootstrap 中，我没有向任何选定的页面添加任何类型的活动类，它只是一个导航栏，我最近升级到 Bulma 框架，它需要父选项卡上的活动类来显示子标签，一种父类和子类系统正在运行。

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

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

下面的代码是我的整个页面，包括标题（<section class="hero is-danger inside-header">）

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ config('app.name') }} - Login</title>
    <link rel="stylesheet" href="assets/public/1.0/frontend/css/bulma.css?id={{ time() }}" type="text/css">
    <link rel="stylesheet" href="assets/public/1.0/frontend/css/override.css?id={{ time() }}" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="inside">
    <section class="hero is-danger inside-header">
        <div class="hero-body">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-5">
                        <p class="title header-title">Introducing {{ config('app.name') }}</p>
                        <p class="subtitle">Interacting with others...</p>
                    </div>
                    <div class="column is-3"></div>
                    <div class="column is-4">
                        <a class="button is-danger is-large is-disabled join-game-button">
                            <i class="fa fa-sign-in"></i> &nbsp;&nbsp;Join Game
                        </a> 
                        <a class="button is-success is-large is-disabled users-online-button">
                            <i class="fa fa-users"></i> &nbsp;&nbsp;10
                        </a>
                        <br><br>
                        <a class="button is-success is-large is-disabled platform-button">Platform: Closed Beta</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-foot">
            <div class="container">
                <nav class="tabs is-boxed">
                    <ul>
                        <li class="is-active">
                            <a href="/documentation/overview/start/">
                                <i class="fa fa-user"></i> &nbsp;&nbsp;{{ Auth::user()->username }}
                            </a>
                        </li>
                        <li>
                            <a href="http://bulma.io/documentation/modifiers/syntax">
                                <i class="fa fa-university"></i> &nbsp;&nbsp;Business
                            </a>
                        </li>
                        <li>
                            <a href="http://bulma.io/documentation/columns/basics">
                                <i class="fa fa-user-secret"></i> &nbsp;&nbsp;Gangs
                            </a>
                        </li>
                        <li>
                            <a href="http://bulma.io/documentation/elements/box/">
                                <i class="fa fa-users"></i> &nbsp;&nbsp;Community
                            </a>
                        </li>
                        <li>
                            <a href="http://bulma.io/documentation/components/breadcrumb/">
                                <i class="fa fa-shopping-cart"></i> &nbsp;&nbsp;Store
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </section>
    <nav class="navbar has-shadow">
        <div class="container">
            <div class="navbar-tabs">
                <a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Security</a>
            </div>
        </div>
    </nav>
    <div class="container holorp-container-fixed">
        <br>
        <div class="columns is-desktop">
            <div class="column is-8">
                <div class="message is-danger">
                    <div class="message-body">
                        <p>not sure what can even go here...</p>
                    </div>
                </div>
            </div>
            <div class="column is-4">
                <div class="message is-success">
                    <p class="message-header">Change Log <span class="is-pulled-right"><i class="fa fa-user"></i></span></p>
                    <div class="message-body">
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Updates the platform with a fresh design</code><br>
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Upgraded from Laravel 5.4 to 5.5</code><br>
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Added core features to the admin panel</code><br>
                        <span class="tag is-dark">26/09/17</span> &nbsp;&nbsp;<code>Did something, can't even remember</code><br>
                        <br>
                        <p><a class="modal-button" data-target="#modal-forgotPassword" id="forgot-pw-modal">View all recent changes</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

标签： php html css laravel bulma

【解决方案1】：

如果我理解得很好，您需要在每一页上使用“相同的标题”。 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、@extends 和 @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为“liB”的元素中添加CSS类，我们需要使用一些东西来识别元素，我使用“id”属性但是你可以使用任何人，只需要检查什么JS方法用于在“d”变量中获取它。您可以查看此以获取更多信息Element.className

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

【讨论】：

这无助于确定您正在查看的页面，这违背了这个问题的整体目标。
我放了一个 JS 例子，给一个元素添加了一个 CSS 类，这里的重点是：服务端渲染和客户端渲染可能各有帮助，我们的工作只是把事情放在正确的位置上地点。