Laravel Blade Layout Documentation
This document describes the structure and components of the main Blade layout file for a Laravel application.
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_descriptionis 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
@livewireStylesIncorporates 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.
Interested in more posts ?
Here are some other posts you might be interested in.
