{"id":651,"date":"2023-11-26T09:11:43","date_gmt":"2023-11-26T09:11:43","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=651"},"modified":"2023-12-09T06:11:20","modified_gmt":"2023-12-09T06:11:20","slug":"what-is-use-of-yield-extend-section-in-laravel","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/what-is-use-of-yield-extend-section-in-laravel\/","title":{"rendered":"What is use of @yield @extend @section in Laravel"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In Laravel, the concepts of layouts, yield, extend, and sections are used to create reusable templates and organize the structure of your application’s views. These features make it easier to manage the common elements shared across multiple pages while allowing flexibility to customize specific sections of each page.<\/p>\n\n\n\n

Creating a Layout:<\/strong><\/p>\n\n\n\n

First, you’ll create a layout file that defines the common structure and components of your application. This file typically resides in the views\/layouts<\/code> directory. Let’s call it app.blade.php<\/code>.<\/p>\n\n\n\n

Here’s an example of a basic layout file:<\/p>\n\n\n\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>@yield('title')<\/title>\r\n<\/head>\r\n<body>\r\n    <header>\r\n        <!-- Common header content goes here -->\r\n    <\/header>\r\n\r\n    <main>\r\n        @yield('content')\r\n    <\/main>\r\n\r\n    <footer>\r\n        <!-- Common footer content goes here -->\r\n    <\/footer>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n
In this layout, you can see that we have defined sections for the title, content, header, and footer. The @yield<\/code> directives indicate the areas where content from other views can be injected.<\/p>\n\n\n\n
Extending the Layout:<\/strong><\/p>\n\n\n\n
To utilize the layout, you need to create views that extend it. These views will inherit the structure and components defined in the layout while allowing you to customize specific sections. Let’s create a view called home.blade.php<\/code> as an example:<\/p>\n\n\n\n
@extends('layouts.app')\r\n\r\n@section('title', 'Home')\r\n\r\n@section('content')\r\n    <h1>Welcome to our website!<\/h1>\r\n    <p>This is the content of the home page.<\/p>\r\n@endsection\r\n<\/code><\/pre>\n\n\n\n
In this view, we use the @extends<\/code> directive to specify that we want to extend the app.blade.php<\/code> layout. We also use the @section<\/code> directive to define the content for the title<\/code> and content<\/code> sections.<\/p>\n\n\n\n
Rendering the View:<\/strong><\/p>\n\n\n\n
To render the final view, you can use the view<\/code> helper function in your routes or controllers. Here’s an example of how you can render the home.blade.php<\/code> view:<\/p>\n\n\n\n
Route::get('\/', function () {\r\n    return view('home');\r\n});\r\n<\/code><\/pre>\n\n\n\n
When the home.blade.php<\/code> view is rendered, Laravel will automatically pull in the content defined in the @section<\/code> directives and inject them into the corresponding @yield<\/code> directives in the layout. This allows the final output to include the common layout structure along with the customized content specific to the home page. By using layouts, yield, extend, and sections, you can create a consistent structure for your views while providing the flexibility to customize individual sections. This approach simplifies the management of shared elements and improves the maintainability of your Laravel application’s views.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In Laravel, the concepts of layouts, yield, extend, and sections are used to create reusable templates and organize the structure of your application’s views. These features make… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-651","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=651"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/651\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/651\/revisions\/653"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}