Bài 7: Stack và Push dữ liệu (Quản lý CSS và JS linh hoạt)
Chào mừng bạn đến với Bài 7! Khi xây dựng ứng dụng web, layout chính thường chứa các thẻ khung chung như <head> (để nạp CSS chung) và cuối trang (để nạp JS chung). Tuy nhiên, có những trang cụ thể lại cần thêm một file CSS riêng, hoặc một thư viện JavaScript độc quyền (ví dụ: trang biểu đồ cần Chart.js, trang bản đồ cần Google Maps).
Làm sao để các trang con tự động "tiêm" (push) các đoạn CSS/JS của riêng chúng lên phần khung chính một cách gọn gàng? Blade cung cấp cặp chỉ thị @stack và @push để giải quyết triệt để bài toán này.
1. Định nghĩa vị trí đón dữ liệu với @stack trong Layout gốc
Đầu tiên, tại file Layout chung của bạn (ví dụ: resources/views/layouts/app.blade.php), bạn sử dụng chỉ thị @stack tại những nơi bạn muốn các trang con có thể đổ mã CSS hoặc JS vào:
HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Website của tôi</title>
<!-- CSS chung cho toàn hệ thống -->
<link rel="stylesheet" href="/css/app.css">
<!-- Nơi để các trang con có thể "gác" thêm CSS riêng của chúng -->
@stack('styles')
</head>
<body>
<div class="container">
@yield('content')
</div>
<!-- JS chung -->
<script src="/js/app.js"></script>
<!-- Nơi để các trang con có thể "gác" thêm JS riêng -->
@stack('scripts')
</body>
</html>
2. Gửi dữ liệu từ trang con với @push
Khi bạn tạo một trang cụ thể (ví dụ: trang thống kê resources/views/reports.blade.php) cần dùng một thư viện CSS/JS riêng, bạn chỉ cần dùng chỉ thị @push và gọi đúng tên của @stack tương ứng:
HTML
@extends('layouts.app')
@section('content')
<h2>Trang Báo Cáo Thống Kê</h2>
<canvas id="myChart"></canvas>
@endsection
{{-- Đẩy đoạn CSS riêng này lên vị trí @stack('styles') ở layout gốc --}}
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js/dist/Chart.min.css">
<style>
#myChart { max-height: 400px; }
</style>
@endpush
{{-- Đẩy đoạn JavaScript này xuống vị trí @stack('scripts') ở cuối trang --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Code khởi tạo biểu đồ...
console.log("Chart.js đã được tải riêng cho trang báo cáo này!");
</script>
@endpush
🎯 Kết quả: Khi Laravel biên dịch trang báo cáo, các đoạn CSS và JS bên trong
@pushsẽ tự động nhảy chính xác vào đúng vị trí@stacktương ứng ở file Layout gốc. Các trang khác không gọi@pushsẽ giữ nguyên Layout gốc mà không bị ảnh hưởng gì.
3. Biến thể hữu ích: @prepend và @once
Trong quá trình làm việc, Blade còn cung cấp thêm hai trợ thủ đắc lực:
-
@prepend: Giống với@push, nhưng thay vì đẩy xuống dưới cùng của stack, nó sẽ đẩy nội dung lên đầu tiên của stack. Rất hữu ích nếu bạn cần nạp một file CSS ưu tiên chạy trước các file khác.HTML
@prepend('styles') <link rel="stylesheet" href="/css/override.css"> @endprepend -
@once: Đảm bảo rằng đoạn mã bên trong nó chỉ được đẩy hoặc render đúng một lần duy nhất, ngay cả khi bạn gọi component hoặc include file đó nhiều lần trong cùng một trang.HTML
@push('scripts') @once <script src="/js/lightbox.js"></script> @endonce @endpush(Rất hữu ích để tránh việc vô tình nạp trùng lặp các thư viện JS/CSS khi bạn dùng lặp lại component nhiều lần).
Tuyệt vời! Việc quản lý CSS/JS đã trở nên vô cùng linh hoạt và khoa học nhờ có Stack và Push.
Chúng ta cùng bước sang Bài 8: Xử lý dữ liệu thô và bảo mật XSS ({!! !!} và @verbatim) nhé! Bạn đã sẵn sàng chưa?
All rights reserved
