グローバルレイアウトに親と子のナビゲーションを整理する

質問に簡単な説明をしてみましょう。ユーザーがログインすると私のウェブサイトに約20ページあります。これらのページを整理する必要があります同じヘッダーなので、私はLaravelフレームワークを使用しているのでレイアウトを使用することになったので、変更を加えたい場合は20ページにわたって同じヘッダーを広げるのが馬鹿に思えました。グローバルレイアウトに親と子のナビゲーションを整理する

ブートストラップでは、選択したページにアクティブなクラスを追加しませんでした。ナビゲーションバーだけでした。最近、親タブにアクティブなクラスが必要な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>

出典

2017-09-30 q413708

を含め、私の全体のページです。 LaravelにはBlade Template Engineが付属しています。

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

：テンプレートエンジンを使用して

は

、あなたはどの部分が動的で知らせることができます@yieldを使用してリソース/ビュー/レイアウト/ app.blade.php

でアプリのテンプレートを作成することができます

ファイルリソース/ビュー/レイアウト/ PAGの内容：

は、2つのページを使用して、たとえば、他のビューでテンプレートを再利用するために、 ES/one.blade.php

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

ファイルリソース/ビュー/レイアウト/ページのコンテンツ/ two.blade.php

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

@yield、@extendsを使用しておよび@セクションあなたは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

UPDATE：上記のこれらの事を知って

、私たちが行うことができます。これは、ID "LIB" を持つ要素にCSSクラスを追加します

@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"プロパティを使用していますが、あなたは "d"変数でそれを取得するために使用するJSメソッドをチェックする必要があります誰も使用することができます。これ以上確認することができますElement.className

私はBulmaを使用していませんが、私はあなたが望むことをすると信じています。

出典

2017-09-30 19:03:09

これは、表示しているページを判断するのに役立つものではなく、この質問の目的をすべて破っています。 – q413708

要素にCSSクラスを追加するJSの例を示します。ここでは、サーバー側のレンダリングとクライアント側のレンダリングがそれぞれ役立つかもしれませんが、私たちの仕事は物事を正しい場所に置くことです。 –

グローバルレイアウトに親と子のナビゲーションを整理する

答えて

関連する問題