Introduction
Laravel Blade is a powerful templating engine provided with Laravel, which allows developers to create views with minimal effort. It provides a series of directives for templating hierarchies and code reuse, two of which are @yield and @section. Mastering them is crucial for writing clean and maintainable view code in Laravel applications. This tutorial will guide you through using these directives with various code examples from basic to advanced.
Understanding the Basics
Blade views are compiled into plain PHP code which is then cached for better performance. Before diving into the @yield and @section directives, here’s a quick overview:
- @yield: This directive is used to define a section that will be populated and displayed by the contents of a @section directive. It acts as a placeholder.
- @section: It’s used to define content for a particular section, which can then be displayed in a view using the @yield directive.
Setting Up Layouts with @yield
In Laravel Blade, the typical use case for @yield is within layout files. These are the common templates that define the basic structure of your web pages, such as headers, footers, and sidebars.
Example 1: Basic Layout
<!-- resources/views/layouts/app.blade.php -->
<!doctype html>
<html lang="en">
<head>
<!-- Meta tags, CSS links -->
</head>
<body>
<header>
<!-- Your website header -->
</header>
<section>
@yield('content')
</section>
<footer>
<!-- Your website footer -->
</footer>
</body>
</html>
Here, you define a content section with the @yield('content') directive which will allow child views to inject their content.
Using @section to Provide Content
Child views extend a layout and provide content for the yielded sections. Here’s a simple child view extending the layout we created earlier:
Example 2: Extending a Layout
<!-- resources/views/welcome.blade.php -->
@extends('layouts.app')
@section('content')
<h1>Welcome to Our Website</h1>
<p>Here's the introduction or any other content you would like to put here.</p>
@endsection
This view will now display the content defined between @section('content') and @endsection where the @yield('content') directive is placed in the layout.
Advanced Layout Management
Laravel allows the combination of multiple sections, inheritance, and content appending. This means you can have a child view extend a layout and include its own sections which can be yielded in different parts of the layout.
Example 3: Combining Sections
<!-- Add to resources/views/layouts/app.blade.php -->
@yield('sidebar')
<!-- New file: resources/views/partials/sidebar.blade.php -->
@section('sidebar')
<div>
<!-- Sidebar content -->
</div>
@endsection
<!-- Modify resources/views/welcome.blade.php -->
@include('partials.sidebar')
This example includes a sidebar by adding a new section and using the @include directive to bring in another view that provides the sidebar content.
Nesting and Inheriting Sections
You can also have sections within sections. This is particularly useful for injecting scripts or styles that are specific to a child view.
Example 4: Nested Sections
<!-- Modify resources/views/layouts/app.blade.php -->
@yield('styles')
<!-- Modify resources/views/welcome.blade.php -->
@section('styles')
<link rel="stylesheet" href="path/to/welcome-specific-styles.css">
@endsection
Appending To Sections
Sometimes you might want to define a section in a layout or parent view and then add to it in child views instead of completely redefining it. To achieve that, you can use @parent directive.
Example 5: Appending to a Section
<!-- Modify resources/views/layouts/app.blade.php -->
@section('scripts')
<script src="path/to/default-script.js"></script>
@endsection
<!-- Modify resources/views/welcome.blade.php -->
@section('scripts')
@parent
<script src="path/to/welcome-specific-script.js"></script>
@endsection
By using @parent, it indicates that content from the parent’s section should be included, and any content you add will be appended to it.
Conclusion
In this tutorial, we’ve covered how to use Laravel Blade’s @yield and @section directives, from basic layouts to more advanced nesting and inheritance scenarios. Understanding and effectively utilizing these directives will lead you towards making your Blade views much more dynamic and organized.
