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

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

Step	Template Part	Action	Resulting Content	Notes
1	Base Template	Reads @yield('title') and @yield('content')	<title>@yield('title')</title><body>@yield('content')</body>	Placeholders set
2	Child Template	Uses @extends('base')	Links to base template	Child inherits base
3	Child Template	Defines @section('title')	Section 'title' content = 'Home Page'	Overrides title placeholder
4	Child Template	Defines @section('content')	Section 'content' content = '<p>Welcome!</p>'	Overrides content placeholder
5	Render Process	Replace @yield('title') with 'Home Page'	<title>Home Page</title>	Title replaced
6	Render Process	Replace @yield('content') with '<p>Welcome!</p>'	<body><p>Welcome!</p></body>	Content replaced
7	Final Output	Combine 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

Variable	Start	After Step 3	After Step 4	Final
title section	undefined	Home Page	Home Page	Home Page
content section	undefined	undefined	<p>Welcome!</p>	<p>Welcome!</p>
rendered output	base with @yield	base with @yield	base 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

Look at the execution table at step 3. What is the value of the 'title section' variable after this step?

A <p>Welcome!</p>

B Home Page

C undefined

D base with @yield

💡 Hint

Check variable_tracker column 'After Step 3' for 'title section'

At which step does the content inside @yield('content') get replaced?

A Step 3

B Step 4

C Step 6

D Step 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?

A Empty or missing title

B Home Page

C @yield('title') text

D Error 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.

Practice

1. What is the main purpose of the @extends directive in Laravel Blade templates?

easy

A. To define a section of content inside a template

B. To display content from a section in the layout

C. To specify which base layout the current view should use

D. To include a partial view inside another view

Solution

1. Step 1: Understand the role of @extends

   The @extends directive tells Laravel which base layout file the current view should build upon.

2. Step 2: Differentiate from other directives

   @section defines content blocks, @yield displays them, and including partials uses @include. Only @extends sets the base layout.

3. Final Answer:

   To specify which base layout the current view should use -> Option C

4. Quick Check:

   @extends = base layout [OK]

Hint: Remember: @extends picks the base layout file [OK]

Common Mistakes:

• Confusing @extends with @section
• Thinking @extends outputs content
• Mixing @extends with @include

2. Which of the following is the correct syntax to define a content section named 'title' in a Blade template?

easy

A. @section('title') ... @endsection

B. @yield('title') ... @endyield

C. @extends('title') ... @endextends

D. @include('title') ... @endinclude

Solution

1. Step 1: Recall syntax for defining sections

   In Blade, @section('name') starts a content block, and @endsection ends it.

2. Step 2: Identify correct usage

   @yield is for displaying sections, @extends sets layout, and @include inserts partials. Only @section defines content.

3. Final Answer:

   @section('title') ... @endsection -> Option A

4. Quick Check:

   Define section = @section('name') [OK]

Hint: Use @section('name') to start content blocks [OK]

Common Mistakes:

• Using @yield to define content
• Trying to use @extends as a section
• Confusing @include with section definition

3. Given the following Blade layout file layouts/app.blade.php:

<html>
<head>
    <title>My Site - @yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

And a child view:

@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome!</h1>
@endsection

What will be the rendered HTML output?

medium

A. Syntax error due to incorrect section usage

B.

My Site - @section('title', 'Home Page')

@section('content')
Welcome!
@endsection

C.

My Site -

D.

My Site - Home Page

Welcome!

Solution

1. Step 1: Understand @yield and @section interaction

   The layout uses @yield('title') and @yield('content') to display content from child sections.

2. Step 2: Check child view sections

   The child view defines @section('title', 'Home Page') and a content section with an <h1> tag. These replace the yields in the layout.

3. Final Answer:

   The rendered HTML includes the title 'Home Page' and the <h1>Welcome!</h1> content -> Option D

4. Quick Check:

   @yield shows @section content [OK]

Hint: Remember: @yield outputs content from matching @section [OK]

Common Mistakes:

• Expecting raw @section tags in output
• Missing that @section('title', 'text') sets inline content
• Confusing @yield with @section definition

4. Consider this Blade child view code:

@extends('layouts.master')
@section('content')
<p>Hello World</p>

What is the problem with this code?

medium

A. Missing @endsection to close the content section

B. Incorrect use of @extends directive

C. Cannot use HTML inside @section

D. Should use @yield instead of @section

Solution

1. Step 1: Check section syntax completeness

   The @section('content') directive must be closed with @endsection to mark the end of the content block.

2. Step 2: Identify missing closing directive

   The code snippet lacks @endsection, causing a syntax error or unexpected behavior.

3. Final Answer:

   Missing @endsection to close the content section -> Option A

4. Quick Check:

   Always close @section with @endsection [OK]

Hint: Always pair @section with @endsection [OK]

Common Mistakes:

• Forgetting to close @section
• Thinking @yield defines content
• Believing HTML is not allowed inside sections

5. You have a base layout with multiple @yield placeholders: title, header, and content. You want to create a child view that fills only content and uses a default title and header from the layout. How should you write the child view?

hard

A. @extends('layouts.base')
@yield('title')
@yield('header')
@section('content')
Page content here
@endsection

B. @extends('layouts.base')
@section('content')
Page content here
@endsection

C. @extends('layouts.base')
@section('title', 'Default Title')
@section('header', 'Default Header')
@section('content')
Page content here
@endsection

D. @extends('layouts.base')
@include('title')
@include('header')
@section('content')
Page content here
@endsection

Solution

1. Step 1: Understand default content in layout

   If the base layout provides default content for title and header, you don't need to override those sections in the child view.

2. Step 2: Write child view with only needed sections

   Only define the content section in the child view to fill that placeholder, leaving others to default.

3. Final Answer:

   Child view extends layout and defines only content section -> Option B

4. Quick Check:

   Define only needed sections; others use layout defaults [OK]

Hint: Only override sections you want to change in child views [OK]

Common Mistakes:

• Overriding sections unnecessarily
• Using @yield inside child views
• Trying to include sections with @include