Chào các em, lại là Creyt đây! Hôm nay chúng ta sẽ mổ xẻ một khái niệm mà nếu không có nó, đời lập trình của các em sẽ như một mớ bòng bong không lối thoát: Blade Section trong Laravel.
1. Blade Section là gì và để làm gì?
Tưởng tượng em đang xây một tòa nhà chọc trời. Mỗi tầng đều có cửa sổ, cửa ra vào, hành lang y chang nhau. Nếu mỗi lần xây một tầng, em lại phải vẽ lại từng cái cửa, từng cái hành lang, thì đến bao giờ mới xong? Và nếu sau này muốn đổi kiểu cửa, em phải đi sửa từng tầng một à? Ác mộng!
Blade Section chính là "khuôn đúc" cho các phần lặp lại của tòa nhà. Nó cho phép em định nghĩa những "lỗ hổng" hay "khu vực trống" trong layout chính (master template) của mình. Sau đó, các view con (child views) chỉ việc "đổ bê tông" nội dung đặc thù của chúng vào đúng những "lỗ hổng" đó. Kết quả? Một kiến trúc gọn gàng, dễ bảo trì và tái sử dụng code đến mức tối đa.
Nói cách khác, @yield là cái khung cửa sổ trống rỗng trong layout chung, chờ em lắp kính vào. Còn @section là cái kính cửa sổ mà em muốn lắp vào khung đó từ view con. Và @extends là lời tuyên bố: "Tôi là tầng con này, tôi muốn dùng cái blueprint (layout) của ông master kia!"
2. Code Ví Dụ Minh Hoạ Rõ Ràng
Để dễ hình dung, chúng ta sẽ xây dựng một layout cơ bản cho trang web.
Đầu tiên, tạo file layout chính (resources/views/layouts/app.blade.php):
<!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ủ Của Creyt')</title>
<link rel="stylesheet" href="/css/app.css">
@yield('styles')
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Trang Chủ</a></li>
<li><a href="/about">Giới Thiệu</a></li>
<li><a href="/contact">Liên Hệ</a></li>
</ul>
</nav>
</header>
<main>
@yield('content')
</main>
<footer>
<p>© {{ date('Y') }} Trang Của Creyt. All rights reserved.</p>
</footer>
<script src="/js/app.js"></script>
@yield('scripts')
</body>
</html>
Trong layout này:
@yield('title', '...'): Định nghĩa một sectiontitlecó giá trị mặc định.@yield('styles'): Một section để chèn CSS riêng cho từng trang.@yield('content'): Đây là section chính, nơi chứa nội dung độc đáo của mỗi trang.@yield('scripts'): Một section để chèn JavaScript riêng.
Bây giờ, tạo một view con (resources/views/home.blade.php) để sử dụng layout này:
@extends('layouts.app')
@section('title', 'Chào Mừng Đến Với Lớp Học Của Creyt')
@section('styles')
<style>
.welcome-message {
color: #336699;
font-size: 1.2em;
}
</style>
@endsection
@section('content')
<h1 class="welcome-message">Xin chào các lập trình viên tương lai!</h1>
<p>Đây là trang chủ của chúng ta, nơi kiến thức được chia sẻ một cách "chuẩn không cần chỉnh".</p>
<p>Hãy cùng nhau khám phá thế giới Laravel đầy màu sắc nhé!</p>
@endsection
@section('scripts')
<script>
console.log('Trang chủ đã được tải xong!');
// Thêm các script riêng của trang chủ tại đây
</script>
@endsection
Để hiển thị trang này, em chỉ cần định nghĩa route trong routes/web.php:
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('home');
});
Khi truy cập /, Laravel sẽ render home.blade.php, tự động nhúng nó vào layouts.app và điền các section @section vào đúng vị trí @yield tương ứng.
3. Mẹo (Best Practices) để ghi nhớ và dùng thực tế
-
Đặt tên rõ ràng, có ý nghĩa: Tên section phải nói lên được công năng của nó, đừng đặt
abchayxyz. Đặtcontent,scripts,styles,head_metalà chuẩn bài. Giống như việc em đặt tên biến vậy, phải tường minh! -
Đừng lạm dụng: Không phải cái gì cũng nhét vào section. Những phần tĩnh, cố định và ít thay đổi thì cứ để nguyên trong layout cha. Section sinh ra để giải quyết vấn đề linh hoạt, không phải để làm rườm rà những thứ đã rõ ràng.
-
Sử dụng
@parentđể mở rộng: Khi em muốn thêm nội dung vào một section đã có sẵn trong layout cha mà không ghi đè hoàn toàn,@parentlà cứu tinh. Kiểu như "tôi muốn thêm một cái rèm vào cửa sổ, nhưng vẫn giữ nguyên cái kính cũ vậy".Ví dụ: Nếu layout cha có một section với nội dung mặc định (sử dụng
@section ... @show):<!-- Trong layouts/app.blade.php --> <head> <!-- ... các thẻ khác ... --> @section('head_scripts') <script src="/js/base.js"></script> @show </head>Và view con muốn thêm script mà vẫn giữ
base.js:<!-- Trong home.blade.php --> @section('head_scripts') @parent {{-- Giữ lại nội dung từ layout cha --}} <script src="/js/page-specific.js"></script> @endsection -
Khi nào dùng Blade Components, khi nào dùng Sections?: Đây là câu hỏi kinh điển! Blade Components như là một căn phòng đúc sẵn có đầy đủ nội thất và logic riêng, em chỉ việc đặt vào. Sections thì là cái khung trống, em tự trang trí nội dung. Khi cần tái sử dụng một khối UI phức tạp, có logic riêng (ví dụ: một thẻ sản phẩm, một modal dialog), hãy dùng Component. Khi chỉ cần chèn nội dung vào một vị trí cụ thể trong layout (như phần
contentchính của trang), dùng Section.
4. Ví Dụ Thực Tế Các Ứng Dụng/Website Đã Ứng Dụng
Thực tế, hầu hết các ứng dụng web được xây dựng bằng Laravel đều sử dụng Blade Sections để quản lý layout của mình. Em có thể thấy nó ở khắp mọi nơi:
- Bảng điều khiển quản trị (Admin Dashboards): Các hệ thống như Laravel Nova, Filament hay các CMS tự xây dựng đều dùng layout chung cho toàn bộ dashboard. Các trang quản lý người dùng, bài viết, sản phẩm... đều là các view con điền nội dung vào section
contentvà có thể thêm script/style riêng qua sectionscripts/styles. - Trang web Thương mại điện tử (E-commerce): Trang chủ, trang danh mục sản phẩm, trang chi tiết sản phẩm, trang giỏ hàng... tất cả đều chia sẻ header, footer, sidebar chung. Chỉ có phần nội dung chính giữa là thay đổi, được quản lý qua Blade Sections.
- Blog/Tin tức: Các trang hiển thị bài viết, danh mục, trang tác giả đều có cấu trúc layout giống nhau, chỉ khác phần nội dung chính và có thể có các meta tag, script đặc thù cho từng bài viết.
Blade Sections không chỉ là một tính năng, nó là một tư duy kiến trúc giúp code của em sạch sẽ, dễ mở rộng và dễ bảo trì hơn rất nhiều. Hãy nắm vững nó, và em sẽ thấy Laravel "dễ thở" hơn bao giờ hết! Chúc các em học tốt!
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é!
