0
0
Laravelframework~10 mins

Template inheritance (@extends, @section, @yield) in Laravel - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - Template inheritance (@extends, @section, @yield)
Base Template
↓
Defines @yield placeholders
↓
Child Template
↓
Uses @extends to link base
↓
Defines @section content
↓
Render: Replace @yield with @section content
↓
Final HTML Output
The base template defines placeholders with @yield. The child template uses @extends to link the base and fills placeholders with @section. Rendering replaces @yield with @section content.
Execution Sample
Laravel
@extends('base')
@section('title')Home Page@endsection
@section('content')<p>Welcome!</p>@endsection
Child template extends base and fills 'title' and 'content' sections.
Execution Table
StepTemplate PartActionResulting ContentNotes
1Base TemplateReads @yield('title') and @yield('content')<title>@yield('title')</title><body>@yield('content')</body>Placeholders set
2Child TemplateUses @extends('base')Links to base templateChild inherits base
3Child TemplateDefines @section('title')Section 'title' content = 'Home Page'Overrides title placeholder
4Child TemplateDefines @section('content')Section 'content' content = '<p>Welcome!</p>'Overrides content placeholder
5Render ProcessReplace @yield('title') with 'Home Page'<title>Home Page</title>Title replaced
6Render ProcessReplace @yield('content') with '<p>Welcome!</p>'<body><p>Welcome!</p></body>Content replaced
7Final OutputCombine replaced parts<title>Home Page</title><body><p>Welcome!</p></body>Complete HTML ready
💡 All @yield placeholders replaced by corresponding @section content from child template
Variable Tracker
VariableStartAfter Step 3After Step 4Final
title sectionundefinedHome PageHome PageHome Page
content sectionundefinedundefined<p>Welcome!</p><p>Welcome!</p>
rendered outputbase with @yieldbase with @yieldbase with @yield<title>Home Page</title><body><p>Welcome!</p></body>
Key Moments - 3 Insights
Why does the base template use @yield instead of @section?
The base template uses @yield to create placeholders that child templates can fill with @section content, as shown in execution_table steps 1 and 5-6.
What happens if the child template does not define a @section for a @yield placeholder?
If no @section is defined for a @yield, the placeholder remains empty in the final output, as no replacement occurs (not shown in this example but implied by step 7).
Can a child template override multiple sections from the base template?
Yes, as shown in steps 3 and 4, the child defines multiple @section blocks to replace multiple @yield placeholders.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution table at step 3. What is the value of the 'title section' variable after this step?
A<p>Welcome!</p>
BHome Page
Cundefined
Dbase with @yield
💡 Hint
Check variable_tracker column 'After Step 3' for 'title section'
At which step does the content inside @yield('content') get replaced?
AStep 3
BStep 4
CStep 6
DStep 7
💡 Hint
Look at execution_table rows describing render process replacing @yield
If the child template did not define @section('title'), what would the final output's title be?
AEmpty or missing title
BHome Page
C@yield('title') text
DError during rendering
💡 Hint
Refer to key_moments about missing @section for a @yield placeholder
Concept Snapshot
Template inheritance uses a base template with @yield placeholders.
Child templates use @extends to link base and @section to fill placeholders.
Rendering replaces @yield with matching @section content.
If no @section is provided, @yield outputs empty.
This allows reusable layouts with customizable parts.
Full Transcript
Template inheritance in Laravel works by having a base template that defines placeholders using @yield. Child templates use @extends to specify which base template they inherit from. They then define content for placeholders using @section. When rendering, Laravel replaces each @yield in the base template with the corresponding @section content from the child. If a child does not provide a section for a yield, that part remains empty. This system helps keep layouts consistent while allowing pages to customize parts like titles and content easily.