BLADE TEMPLATING IN LARAVEL
Description
This template is based on personal experience.
Overview
-
Tree structure of views folder
resources │ └── views │ └── layouts │ └── app.blade.php | └── navbar.blade.php │ └── footer.blade.php │ └── pages │ └── home.blade.php -
app.blade.php: Main layout file
-
navbar.blade.php: Navbar partial view
-
footer.blade.php: Footer partial view
-
home.blade.php: Home page view
Template
-
app.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@yield('title')</title> @stack('styles') <!-- for additional styles for specific page --> </head> </html> <body> @include('layouts.navbar') <div class="container">@yield('content')</div> @stack('scripts') <!-- for additional scripts for specific page --> @include('layouts.footer') </body> -
navbar.blade.php
<nav> <ul> <li><a href="{{ route('home') }}">Home</a></li> <li><a href="{{ route('about') }}">About</a></li> <li><a href="{{ route('contact') }}">Contact</a></li> </ul> </nav> -
footer.blade.php
<footer> <p>© 2021 All rights reserved</p> </footer> -
home.blade.php
@extends('layouts.app') @section('title', 'Home') @section('content') @push('styles') <link rel="stylesheet" href="path/to/css"> @endpush <h1>Welcome to Home Page</h1> @push('scripts') <script src="path/to/js"></script> @endpush @endsection
Additional Information
- @extends: Specifies the parent layout file.
- @section: Defines a section of content to inject into the parent layout.
- @yield: Acts as a placeholder in the parent layout for content sections.
- @include: Embeds a partial view (e.g., navbar or footer).
- @stack and @push: Used to dynamically include scripts or styles in a specific section.