l2t

Laravel 8: Setup Base Layout

How to setup base layout using Laravel 8 blade?

If you are working on large scale application and wonder how to properly organize your views for your web app I would teach you how to properly define your website base template and use this template on any web pages.

Let say that you have a website where you have following things on every single page.

  • meta tags
  • style sheets
  • script tags
  • header
  • footer

Let's create a base layout using above elements in resources/views/layout.blade.php file as shown below:

<!-- Stored in resources/views/layout.blade.php -->
<html>
    <head>
        <title>@yield('title')</title>

        @section('meta_tags')
            <meta property="og:type" content="website" />
        @show

        @section('styles')
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
        @show

        @section('scripts')
            <script src="{{ url('/js/bundle.min.js') }}"></script>
        @show
    </head>
    <body>
        @section('header')
            <!-- You can place default header contents here -->
            <h2>Base Header</h1>
        @show

        @yield('content')

        @section('footer')
            <!-- You can place default footer contents here -->
            <h2>Base Footer</h1>
        @show
    </body>
</html>​

How to use base layout in Laravel?

Once you have the base template ready you might be wondering how to use this layout on other pages. Let say that you have about us page where you want to use this base layout.

Let's create a new blade template for your about us page in resources/views/about-us.blade.php location. I am not going to talk about how to create a route and controller for your /about-us page in this tutorial we will be focused purely on views.

<!-- Stored in resources/views/about-us.blade.php -->
@extends('layout')
@section('title', 'About Us')

@section('scripts')
    @parent
    <script src="{{ url('/js/analytics.js') }}"></script>
@show

@section('header')
    <h2>Child Header</h1>
@show

@section('content')
    <h1>About Us</h1>
@endsection​

Let's understand what we are doing in this view. Basically @extend keyword needs your parent layout name in our case it is layout.blade.php as we defined earlier. If you look at the child layout (about-us.blade.php) which extends base layout (layout.blade.php) file.

Child layout can do following things:

  • It can inherite what is in the base layout
  • It can override some part of the base layout defined in @section block

In our about-us page we are adding one more script on top of our base layout for example:

@section('scripts')
    @parent
    <script src="{{ url('/js/analytics.js') }}"></script>
@show​

@parent tag will grab the code from the parent layout and then we are adding one more script tag here therefore output of our about-us page would be following:

<script src="{{ url('/js/bundle.min.js') }}"></script>\
<script src="{{ url('/js/analytics.js') }}"></script>​

It will display both tags on about-us page as we can see. If you do not include @parent keyword in @section('scripts') of your about-us page then it will only include following script tag:

<script src="{{ url('/js/analytics.js') }}"></script>​

Also in our about-us page we are completely override header section of the base template:

@section('header')
    <h2>Child Header</h1>
@show​

So your about us page will display following header tag when Laravel about-us page is served.

<h2>Child Header</h1>​

If you want to display everything from your base template and add more content in the child layout then you can add @parent keyword as shown below:

@section('header')
    @parent
    <h2>Child Header</h1>
@show​

In above case it will output both header tags from child and parent.