Bài 4: Kế thừa giao diện với @extends, @section, @yield và @show

Chào mừng bạn đến với Bài 4! Khi xây dựng một website, phần khung chung (Header, Menu, Sidebar, Footer) thường giống nhau ở mọi trang, chỉ có phần nội dung chính (Content) là thay đổi.

Thay vì phải copy đoạn code HTML header/footer vào từng file, Blade cung cấp cơ chế Layout & Inheritance (Kế thừa giao diện) giúp bạn gom chung khung sườn vào một file duy nhất.

1. Tạo Layout gốc (Master Layout)

Đầu tiên, chúng ta tạo một khung giao diện chung, ví dụ đặt tại resources/views/layouts/app.blade.php.

Trong file này, chúng ta sử dụng chỉ thị @yield để đánh dấu những vị trí mà các trang con có thể đổ dữ liệu vào:

HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'Website của tôi')</title> <!-- Có giá trị mặc định nếu trang con không truyền -->
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <!-- Header chung -->
    <header>
        <h1>Logo Website</h1>
        <nav>Menu chính...</nav>
    </header>

    <div class="container">
        <!-- Vị trí nội dung chính sẽ được thay đổi ở các trang con -->
        @yield('content')
    </div>

    <!-- Footer chung -->
    <footer>
        <p>&copy; 2026 Laravel Series</p>
    </footer>
</body>
</html>

2. Sử dụng Layout ở Trang con (Child View)

Bây giờ, khi bạn tạo một trang cụ thể như trang Chủ (resources/views/home.blade.php), bạn chỉ cần dùng @extends để gọi layout gốc và @section để điền nội dung vào các vị trí @yield:

HTML

@extends('layouts.app')

@section('title', 'Trang chủ chính thức')

@section('content')
    <h2>Chào mừng bạn đến với trang chủ!</h2>
    <p>Đây là nội dung riêng biệt của trang chủ, được đặt gọn gàng trong section.</p>
@endsection

@extends('layouts.app'): Báo cho Blade biết trang này sẽ kế thừa khung từ file resources/views/layouts/app.blade.php.
@section('content') ... @endsection: Đưa toàn bộ đoạn HTML bên trong vào vị trí @yield('content') ở file layout gốc.

3. Kết hợp `@show` và `@parent` để quản lý linh hoạt hơn

Đôi khi, bạn muốn một phần nội dung nào đó (ví dụ: một Sidebar mặc định) hiển thị ở layout gốc, nhưng trang con có thể bổ sung thêm thay vì ghi đè hoàn toàn. Lúc này ta dùng cặp bài trùng @section ... @show và @parent:

Tại Layout gốc (app.blade.php):

HTML
```
@section('sidebar')
    <p>Sidebar mặc định của hệ thống.</p>
@show
```
(Dùng @show thay vì @endsection để nó vừa định nghĩa section vừa hiển thị nội dung ngay tại chỗ).

Tại Trang con (home.blade.php):

HTML

@section('sidebar')
    @parent <!-- Giữ lại nội dung sidebar mặc định của layout gốc -->
    <p>Thêm một widget quảng cáo riêng cho trang chủ.</p>
@endsection

Tuyệt vời! Kỹ thuật kế thừa layout này sẽ giúp mã nguồn của bạn cực kỳ gọn gàng và dễ bảo trì.

Chúng ta cùng tiến tới Bài 5: Tái sử dụng mã nguồn với @include nhé! Bạn đã sẵn sàng chưa?

extends

1. Tạo Layout gốc (Master Layout)

2. Sử dụng Layout ở Trang con (Child View)

3. Kết hợp @show và @parent để quản lý linh hoạt hơn

Mục lục

3. Kết hợp `@show` và `@parent` để quản lý linh hoạt hơn