Chào các em, hôm nay chúng ta sẽ cùng anh Creyt 'mổ xẻ' một trong những phù thủy giúp Laravel trở thành framework 'quốc dân': @yield trong Blade Template Engine. Nếu ví một website như một ngôi nhà, thì @yield chính là những 'ô trống' được kiến trúc sư tài ba của chúng ta (người thiết kế layout) cố tình để lại, chờ gia chủ (các trang con) đến 'điền vào' những nội thất độc đáo của riêng mình.
1. @yield là gì và để làm gì?
Đơn giản mà nói, @yield là một chỉ thị trong Blade Template của Laravel, cho phép bạn định nghĩa một 'vị trí' hoặc 'khu vực' trong một layout chính (master layout) mà nội dung từ các view con (child views) sẽ được 'đổ' vào đó. Nó giống như một cái 'placeholder' vậy.
Mục đích cốt lõi:
- Tái sử dụng bố cục: Thay vì phải lặp lại
header,footer,sidebarcho mỗi trang, bạn chỉ cần định nghĩa chúng một lần trong layout chính. Các trang con chỉ cần tập trung vào phần nội dung 'đặc trưng' của mình. - Giảm thiểu trùng lặp code (DRY - Don't Repeat Yourself): Đây là nguyên tắc vàng trong lập trình.
@yieldgiúp bạn tuân thủ nguyên tắc này một cách tuyệt vời, làm cho code gọn gàng, dễ bảo trì và mở rộng hơn. - Quản lý giao diện tập trung: Khi bạn muốn thay đổi cấu trúc chung của website (ví dụ, đổi màu header, thêm một menu mới), bạn chỉ cần sửa ở một file layout duy nhất, thay vì phải đi chỉnh sửa hàng chục, hàng trăm file trang con.
2. Code Ví Dụ Minh Hoạ Rõ Ràng
Để các em dễ hình dung, chúng ta hãy xây dựng một cấu trúc website cơ bản với @yield.
Bước 1: Tạo một layout chính (master layout) - resources/views/layouts/app.blade.php
Đây là bộ khung chung của ngôi nhà chúng ta. Anh sẽ để lại các 'ô trống' với @yield.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Trang Chủ Mặc Định Của Creyt')</title>
<link rel="stylesheet" href="/css/app.css">
@yield('styles') {{-- Chỗ này để nhúng CSS riêng cho từng trang --}}
</head>
<body>
<header>
<nav>
<a href="/">Trang Chủ</a>
<a href="/about">Về Chúng Tôi</a>
<a href="/contact">Liên Hệ</a>
</nav>
</header>
<main>
<div class="container">
@yield('content') {{-- Đây là ô trống lớn nhất, nơi chứa nội dung chính --}}
</div>
</main>
<footer>
<p>© 2023 Blog của Creyt. @yield('footer_note')</p>
</footer>
<script src="/js/app.js"></script>
@yield('scripts') {{-- Chỗ này để nhúng JS riêng cho từng trang --}}
</body>
</html>
Giải thích:
@yield('title', 'Trang Chủ Mặc Định Của Creyt'): Định nghĩa một khu vực cho tiêu đề trang. Nếu trang con không cung cấp tiêu đề, nó sẽ dùng 'Trang Chủ Mặc Định Của Creyt'. Đây là một tính năng cực kỳ tiện lợi!@yield('styles'),@yield('content'),@yield('scripts'),@yield('footer_note'): Các 'ô trống' khác nhau cho các mục đích khác nhau.
Bước 2: Tạo một view con (child view) - resources/views/pages/home.blade.php
Đây là gia chủ, sẽ đến 'điền' nội dung vào các 'ô trống' mà layout cha đã định nghĩa.
@extends('layouts.app') {{-- Kế thừa layout app.blade.php --}}
@section('title', 'Trang Chủ Đặc Biệt Của Blog Creyt') {{-- Điền vào ô 'title' --}}
@section('styles')
<style>
.container {
background-color: #f0f8ff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
@endsection
@section('content') {{-- Điền vào ô 'content' --}}
<h1>Chào mừng đến với Blog của Giảng viên Creyt!</h1>
<p>Đây là trang chủ của chúng ta. Tại đây, bạn sẽ tìm thấy những bài viết thú vị về lập trình và cuộc sống.</p>
<button onclick="alert('Bạn đã nhấn nút tìm hiểu thêm!')">Tìm hiểu thêm</button>
@endsection
@section('scripts')
<script>
console.log('Script riêng cho trang chủ đã chạy!');
</script>
@endsection
@section('footer_note')
<small>Phiên bản Beta 1.0.1</small>
@endsection
Giải thích:
@extends('layouts.app'): Đây là 'lệnh' nói rằng view này sẽ sử dụnglayouts/app.blade.phplàm layout nền.@section('tên_vùng') ... @endsection: Chỉ thị này dùng để định nghĩa nội dung sẽ được 'đổ' vào@yield('tên_vùng')tương ứng trong layout cha.
Khi bạn truy cập trang này qua một route được định nghĩa trong Laravel (ví dụ Route::get('/', function () { return view('pages.home'); });), Laravel sẽ ghép nối home.blade.php vào app.blade.php và render ra một trang HTML hoàn chỉnh, với các phần header, footer từ app.blade.php và title, styles, content, scripts, footer_note từ home.blade.php.
3. Mẹo hay (Best Practices) để ghi nhớ và dùng thực tế
- Tên
@yieldphải rõ ràng như 'ban ngày': Đặt tên@yieldthật ý nghĩa, dễ hiểu, ví dụ:title,content,sidebar,scripts,styles,head_meta. Tránh dùng các tên chung chung nhưpart1,sectionA. Nó như việc đặt tên cho các phòng trong nhà vậy, phải rõ ràng để biết phòng nào làm gì. - Sử dụng giá trị mặc định thông minh: Luôn cân nhắc dùng
@yield('tên_vùng', 'Giá trị mặc định')cho những khu vực không bắt buộc hoặc cần một nội dung dự phòng. Điều này giúp trang web của bạn không bị 'trống trơn' nếu một view con quên cung cấp nội dung. - Tổ chức thư mục layouts: Đặt tất cả các file layout chính trong thư mục
resources/views/layouts(hoặcresources/views/partialscho các phần nhỏ hơn có thể tái sử dụng) để dễ quản lý. Giống như việc bạn có một tủ hồ sơ riêng cho các bản thiết kế nhà vậy. @pushvà@stackcho các script/style bổ sung: Đôi khi bạn cần thêm nhiều script hoặc style từ nhiều component khác nhau vào cùng một@yield. Thay vì@yield, hãy cân nhắc dùng@stack('scripts')trong layout cha và@push('scripts') ... @endpushtrong các view con. Nó linh hoạt hơn nhiều so với@yieldkhi bạn có nhiều đoạn code cần được 'chồng chất' lên nhau.- Đừng lạm dụng: Một layout quá nhiều
@yieldcó thể trở nên phức tạp và khó đọc. Hãy cân nhắc xem liệu có thể nhóm các phần nhỏ lại hoặc tạo ra các layout con kế thừa từ layout cha không. Giống như việc một ngôi nhà không nên có quá nhiều cửa sổ ở cùng một bức tường, nó sẽ mất đi sự hài hòa.
4. Ứng dụng thực tế các website/ứng dụng đã dùng
Thực ra, hầu hết mọi website và ứng dụng web xây dựng bằng Laravel đều sử dụng @yield (hoặc các chỉ thị tương tự như @section kết hợp với @extends) một cách triệt để. Đây là xương sống của việc xây dựng giao diện động và dễ bảo trì:
- Các hệ thống CMS (Content Management System) như OctoberCMS, Statamic (dựa trên Laravel): Các CMS này dùng Blade và
@yieldđể cho phép người dùng tạo ra các theme và template cực kỳ linh hoạt. Bạn có thể thay đổi nội dung trang, thứ tự các widget mà vẫn giữ nguyên bố cục chung của theme. - Các trang thương mại điện tử (e-commerce) lớn: Ví dụ như các nền tảng được xây dựng trên Laravel (như Aimeos, Bagisto). Trang sản phẩm, trang giỏ hàng, trang thanh toán... tất cả đều có chung header, footer, thanh điều hướng, chỉ phần nội dung chính giữa (product details, cart items, payment form) là được 'yield' và thay đổi.
- Các ứng dụng SaaS (Software as a Service) như Laravel Forge, Envoyer, Nova: Các dashboard quản lý, trang cài đặt tài khoản, trang báo cáo... đều dùng chung một layout quản trị cơ bản và chỉ 'đổ' vào các phần nội dung đặc thù cho từng chức năng thông qua
@yield. - Blog cá nhân hoặc trang tin tức: Như blog của Creyt chúng ta vừa ví dụ. Các bài viết khác nhau, các danh mục khác nhau, nhưng header, footer, sidebar (chứa quảng cáo, bài viết gần đây) luôn giữ nguyên. Chỉ có phần nội dung bài viết chính là thay đổi.
Nhìn chung, @yield không chỉ là một công cụ, mà nó là một triết lý về thiết kế giao diện: tái sử dụng, linh hoạt và dễ bảo trì. Nắm vững nó, các em sẽ là những kiến trúc sư giao diện tài ba trong thế giới Laravel!
Thuộc Series: Lavarel
Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
