Laravel - Blade @include vs @extends

Hello, I am fairly new to Blade and to Laravel in general. I have the following layout file layouts/layout.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl">

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" sizes="180x180"
        href="{{ asset('resources/images/layout/favicon/apple-touch-icon.png')}}">
    <link rel="icon" type="image/png" sizes="32x32"
        href="{{ asset('resources/images/layout/favicon/favicon-32x32.png')}}">
    <link rel="icon" type="image/png" sizes="16x16"
        href="{{ asset('resources/images/layout/favicon/favicon-16x16.png')}}">
    <link rel="icon" type="image/png" sizes="192x192"
        href="{{ asset('resources/images/layout/favicon/android-chrome-192x192.png')}}">
    <link rel="icon" type="image/png" sizes="512x512"
        href="{{ asset('resources/images/layout/favicon/android-chrome-512x512.png')}}">
    <link rel="icon" type="image/png" href="favicon.ico">
    <link rel="manifest" href="{{ asset('resources/images/layout/favicon/site.webmanifest')}}">
    <link rel="mask-icon" href="" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="description" content="">
    <title>@yield('title')</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{{ asset('css/materialize.css') }}" media="screen,projection" />
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
        integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</head>

<header>
    @section('nav')
    @show
</header>

<body>

    <main>
        @section('content')
        @show
    </main>

</body>

<footer>
    <script src="{{ asset ('js/materialize.min.js')}}"></script>
    <script src="{{ asset ('js/app.js')}}"></script>
</footer>

</html>

And the following home.blade.php

@extends('layouts.layout')

@section('title', 'Home Page')

@section('nav')
@extends('layouts.nav')
@endsection

@section('content')
@extends('gallery.display')
@endsection

The result is that the page renders gallery.display first even before the head tags buy if I change the

@section('content')
@extends('gallery.display')
@endsection

@section('content')
@include('gallery.display')
@endsection

It works fine, what is the difference with the include and extends? I have a bit of a problem understanding the blade system, I guess it is way too simple ;)

MichalOravec

5 years ago

Best Answer

Level 75

With @extends you just extend your layout blade file.

With @include you include exactly view to the place where you write that code.

So it should be

@extends('layouts.layout')

@section('title', 'Home Page')

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')
    @include('gallery.display')
@endsection

Also in your layout blade file will be better to use @yield instead of @section @show

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl">

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" sizes="180x180"
        href="{{ asset('resources/images/layout/favicon/apple-touch-icon.png')}}">
    <link rel="icon" type="image/png" sizes="32x32"
        href="{{ asset('resources/images/layout/favicon/favicon-32x32.png')}}">
    <link rel="icon" type="image/png" sizes="16x16"
        href="{{ asset('resources/images/layout/favicon/favicon-16x16.png')}}">
    <link rel="icon" type="image/png" sizes="192x192"
        href="{{ asset('resources/images/layout/favicon/android-chrome-192x192.png')}}">
    <link rel="icon" type="image/png" sizes="512x512"
        href="{{ asset('resources/images/layout/favicon/android-chrome-512x512.png')}}">
    <link rel="icon" type="image/png" href="favicon.ico">
    <link rel="manifest" href="{{ asset('resources/images/layout/favicon/site.webmanifest')}}">
    <link rel="mask-icon" href="" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="description" content="">
    <title>@yield('title')</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{{ asset('css/materialize.css') }}" media="screen,projection" />
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
        integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</head>

<header>
    @yield('nav')
</header>

<body>

    <main>
        @yield('content')
    </main>

</body>

<footer>
    <script src="{{ asset ('js/materialize.min.js')}}"></script>
    <script src="{{ asset ('js/app.js')}}"></script>
</footer>

</html>

Documentation: https://laravel.com/docs/7.x/blade#template-inheritance https://laravel.com/docs/7.x/blade#including-subviews

2 likes

talel

5 years ago

Level 16

Thank you for your comment. I followed this approach before and it causes some problems with the CSS and positioning which I am not sure why. But, It looks like the proper way to follow, I'll keep working on it.

Thank you again for your help!

MichalOravec

5 years ago

Level 75

@talelmishali Don't worry it's definitely the correct way.

Also If it was helpul or correct answer could you mark it as best reply? Thanks.

2 likes

Please or to participate in this conversation.