A master layout template is the best way to structure the files in laravel. Using this layout structure, you can keep the common sections in the main template and then extend the main layout in other view layouts.
And you know that it is a good practice to keep a well-organized folder file structure in every project, so we can easily find the components or files when we need them.
So in this tutorial, we will learn how to create a master layout template structure in laravel and extend this master layout in other blade view layouts.
Using this way, we can separate each and common section of the file into a different file and then embed them where we need them. Let’s see how we can do that.
See Also: How to Install Laravel?
Step 1: Create layout folder
First thing you have to do that create a “layout” directory in the views directory. The name of the folder doesn’t matter but should make sense like theme, layout, template, etc.
Step 2: Create master layout file
Next, you have to create the master layout file, the name is up to you. We are going to take the file name as master.blade.php for this tutorial.
Step 3: Add HTML boilerplate and yield directives
Now we will add the basic HTML code in the master file and then add the yield directives where you want to hold the place for content.
Laravel uses the yield directives to indicate where code would be `you can say dynamically` while processing the template.
You can see in the above code, we have used the 5 @yield directives title, navbar, content, sidebar, and footer to process the code from somewhere else.
So this is the main master layout template where you can add the common code where you want. Like if you want to add <link>, <script> tags or google analytics code then you can add them in the head section or before closing the <body/> tag.
Let’s create now a homepage layout using this laravel master layout template.
Step 4: Create homepage layout file
Create a home.blade.php file in the resources/views directory and we are going to use @extends and @section directives in this file use the the master layout.
Extend master layout
To use that master layout template in laravel, you have to extend the file in blade view using the @extends directive. It will inherit the layout structure for the homepage layout.
Note: Add the @extends directive at the very top of the file.
Embed section content
Now we will use the @section directive to embed the content in that place where we have used the @yield directive in the master layout.
See the following complete basic structure of the code of the home.blade.php file.
So as you can see from the above code, we have used @extends and @section directives to build a simple homepage layout structure. You can design it as you want while adding the style file in the head section of the master layout.
Same using the above way you can create the about.blade.php and contact.blade.php or any other page like a search page, or 404-page view, and extend the master layout in these files.
Additional: Deep split layouts
Basically, what I mean by this section is that and want to say, we can make a more deep split layout file structure.
This means you can split each small common section like CSS files, script files, head tag files, etc in a different folder and then include these files in the master layout.
See the following code for a better understanding.
See we have created the different files of each part and then include them using the @include directive. And now further in these files, you can use the @yield directive to embed the dynamic content there.
Following are the sample partial’s folder files.
views/partials/head.blade.php
views/partials/css.blade.php
Same for other files to cut down each part into different files and then use them where you want or where you need them.
Hope you understand the tutorial to create a master layout template in laravel and how to use them to make a well-structured project folder.
