how do I use partials in Laravel 5?

Question

Today we started our Laravel 5 lessons in school. So I started to search the web to re-use things. I've read some things about sections, components and yielding but I still don't quite understand it.

In my resources/views folder I have a file called home.blade.php. It contains this navigation bar:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/control-panel"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

now in my about.blade.php I'd like to use the same code without copy and pasting. So if I made a change it would change both navigation bars instantly without changing it 2 times.

Can someone explain to me how I re-use this navigation bar without copy and pasting?

Thanks in advance, Sylent.

Answer 1

Create a new folder and call it partials. There you could have navigation, header and footer all as separate blade files.

You would then (usually) create a layout blade that contains the structure and includes the navigation, header and footer.

You would then extend that layout for home and about, and encapsulate whatever content for each of home and about by creating a section called content.

You would then yield content within the layout.

https://laravel.com/docs/5.5/blade

#navigation /resources/views/partials/navigation.blade.php
<nav>
...
</nav>

#header /resources/views/partials/header.blade.php
<header>
...
</header>


#footer /resources/views/partials/footer.blade.php
<footer>
...
</footer>

#layout /resources/views/layouts/layout.blade.php
@include('partials.header')

@include('partials.navigation')

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

@include('partials.footer')

#home /resources/views/page/home.blade.php
@extends('theme.layouts.layout')

@section('content')
    <p>Anything within home</p>
@endsection

#about /resources/views/page/about.blade.php
@extends('theme.layouts.layout')

@section('content')
    <p>Anything within about</p>
@endsection