CODEWITHSUNDEEP
phplaravellaravel-blade
IceEcold
IceEcold

Reputation: 45

Laravel @include and @yield blade

I'm currently using the Laravel Blade template engine to generate pages. I'm using a default page to render everything. The problem is that I can't seem to get every css in the head part. The menu has a custom css that I eventually want to include into the head. This way I can use every part individually. How come the css doesn't get included into the head.blade.php part?

Default.blade.php

<!doctype html>
<html>
    <head>
        @include('includes.head')
    </head>
    <body>
        <div class="container">

                <header class="row">
                    @include('includes.menu')
                </header>

                <div id="main" class="row">
                    @yield('content')
                </div>

            </div>
        </body>
    </html>

head.blade.php

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@yield('styles')

menu.blade.php

@section('styles')
    <link href="{{ asset('/css/menu.css') }}" rel="stylesheet">
@endsection

login.blade.php

@extends('layouts.default')

@section('styles')
    @parent
    <link href="{{ asset('/css/login.css') }}" rel="stylesheet">
@endsection

@section('content')
--content here--
@stop

What I eventually want is that every individual css gets loaded into the head file based on the included views.

Upvotes: 1

Views: 8869

Answers (2)

Franck Mercado
Franck Mercado

Reputation: 179

Here's my grain of sand. You can organize them this way to have blade recognize sections defined in the master template (default.blade.php in your case)

default.blade.php

<!doctype html>
<html>
  <head>
    @yield('head')
    @yield('styles')
  </head>
  <body>
    <div class="container">

      <header class="row">
        @yield('primarymenu')
      </header>

      <div id="main" class="row">
        @yield('content')
      </div>

    </div>
    @yield('scripts')
  </body>
</html>

Notice I added scripts section ^^^, which later will also be populated within each component (menu, login)

includes/head.blade.php

@section('head')
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
@endsection

includes/menu.blade.php

@section('primarymenu')
  <!-- here goes your navitation links -->
@endsection

@section('styles')
  @parent
  <link href="{{ asset('/css/menu.css') }}" rel="stylesheet">
@endsection

@section('scripts')
  @parent
  <script type="text/javascript" src="{{ asset ('js/menu.js') }}"></script>
@endsection

login.blade.php

@extends('layouts.default')

@section('content')
  @include('includes.head')
  @include('includes.menu')
  <!-- here goes your login contents -->
@endsection

@section('styles')
  @parent
  <link href="{{ asset('css/login.css') }}" rel="stylesheet">
@endsection

@section('scripts')
  @parent
  <script type="text/javascript" src="{{ asset ('js/login.js') }}"></script>
@endsection

Also notice the use of @parent which also helps when you want to append more content in a section where other components might have already filled with content.

Hope that helps!

Upvotes: 3

Malkhazi Dartsmelidze
Malkhazi Dartsmelidze

Reputation: 4992

Default.blade.php

<!doctype html>
<html>
    <head>
        @section('head')
            @include('includes.head')
        @show
    </head>
    <body>
    <div class="container">

            <header class="row">
                @include('includes.menu')
            </header>

            <div id="main" class="row">
                @yield('content')
            </div>

        </div>
    </body>
</html>

@section ... @show is same as @yield but showing immidiately

head.blade.php

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

then if you want to add more styles to head do like this in menu.blade.php

@section('head')
@parent
    <link href="{{ asset('/css/menu.css') }}" rel="stylesheet">
@endsection

or if you want to replace all styles do this without @parent

Upvotes: 0

Related Questions