Abdelhamid
My Latest articles

Laravel Blade Layout Documentation

This document describes the structure and components of the main Blade layout file for a Laravel application.

Laravel Blade Layout Documentation's cover image

This document describes the structure and components of the main Blade layout file for a Laravel application. This layout provides a flexible and feature-rich template for building web pages.

Overview

The layout is designed to be extensible, SEO-friendly, and integrates with modern web development tools and practices. It uses Laravel's Blade templating engine, Livewire, and Vite for asset compilation.

Structure

HTML and Language

<!DOCTYPE 
  • The `lang` attribute is dynamically set based on the application's locale.

Head Section

Meta Tags

<
  • Includes essential meta tags for character encoding, viewport, CSRF protection, and browser compatibility.

  • The description meta tag uses a cascading fallback system.

  • $meta_description is the slot name that we can customize from inside our pages (blade views)

  • settings()->get("general.meta_description") is a fallback function from a settings package in which we store the site's description, you can customize this function or change it to your liking.

Title

<title>
    {{ (
  • Dynamically generates the page title, combining a custom title (if set) with the site name from settings or config.


Canonical Link

<

Favicon

<!-- favicon -->

Open Graph and Twitter Card Meta Tags

<!-- Open Graph / Facebook -->
  • Includes meta tags for better social media sharing on Facebook and Twitter.

Google Fonts (only if you use google fonts in your website)

<
  • Preconnect links for Google Fonts to improve loading performance.

Styles and Scripts

@livewireStyles
  • Incorporates Livewire styles, Vite-compiled CSS and JavaScript, and allows for additional styles and scripts to be added.

JSON-LD (see laravel-json-ld, or see schema-org)

{{-- JSON-LD --}}
  • Includes a basic JSON-LD script for structured data.

Body Section

<
  • Uses the `antialiased` class for smoother font rendering.

  • Includes navigation and footer components.

  • The main content area uses `{{ $slot }}` for flexibility with Blade components.

  • Incorporates Livewire scripts and allows for additional body scripts.

Customization Points

The layout provides several `@stack` directives for easy customization:

  • `head::start`: Beginning of the head section

  • `head::before-scripts`: Before the main script tags

  • `styles`: Additional CSS styles

  • `head::scripts`: Additional scripts in the head

  • `head::end`: End of the head section

  • `body::start`: Beginning of the body

  • `body::before-main`: Before the main content

  • `body::after-main`: After the main content

  • `body::scripts`: For additional body scripts

  • `body::end`: End of the body

Settings Integration

The layout uses the `settings()` function (provided by the arcanedev/laravel-settings package) to retrieve various site settings:

  • `general.meta_description`: For the meta description

  • `general.site_name`: For the site name in the title

  • `general.og_image`: For the Open Graph image

Notes

- This layout is designed to work with Laravel, Livewire, and Vite.
- It includes SEO-friendly elements like canonical links, meta descriptions, and Open Graph tags.
- The structure allows for easy extension and customization through Blade stacks and components.

This layout provides a solid foundation for building modern, SEO-friendly Laravel applications with flexibility for various page structures and content types.

Let's make something creative together!

Book a meet

I'm a software developer, I love building web applications and solve problems. I'm always looking for new challenges and opportunities to learn and grow.

©2024 Abdelhamid Errahmouni, All rights reserved.