Template inheritance (@extends, @section, @yield) in Laravel - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @extends directive do in Laravel Blade templates?

It tells the template to use another Blade file as its base layout, inheriting its structure and sections.

beginner

Explain the purpose of @section in Blade templates.

It defines a named section of content that will fill a corresponding @yield placeholder in the parent layout.

beginner

What role does @yield play in a Blade layout?

It acts as a placeholder where child templates can insert content defined in their @section blocks.

intermediate

How do @section and @yield work together in Blade templates?

The parent layout uses @yield to mark spots for content, and child templates use @section to provide that content.

intermediate

Can a Blade template extend multiple layouts using @extends? Why or why not?

No, a Blade template can only extend one layout because it inherits a single base structure to keep templates clear and manageable.

Which Blade directive is used to specify the parent layout a template should inherit?

A @yield

B @section

C @extends

D @include

@extends sets the parent layout for the current Blade template.

What does @yield('content') do in a Blade layout?

A Defines a section named 'content' in the child template

B Includes another Blade file named 'content'

C Ends a section named 'content'

D Creates a placeholder for 'content' section from child templates

@yield('content') marks where the 'content' section from child templates will appear.

If a child template does not define a @section for a @yield in the parent, what happens?

A An error is thrown

B The <code>@yield</code> outputs nothing

C The parent template content is duplicated

D The child template ignores the parent

If no matching @section is defined, @yield outputs nothing by default.

Which directive is used to define content that fills a parent layout's placeholder?

A @section

B @extends

C @yield

D @stack

@section defines content to fill a @yield placeholder.

Can you nest @section directives inside each other in Blade templates?

A No, nesting <code>@section</code> is not supported

B Yes, nesting is allowed and common

C Only if you use <code>@parent</code>

D Only in the parent layout

Nesting @section directives is not supported in Blade templates.

Describe how you would create a base layout and a child template using Blade's template inheritance.

Think about how the parent and child templates connect using these directives.

Explain the difference between @section and @yield in Laravel Blade templates.

One sets content, the other shows where content goes.

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