Trong bài cuối cùng của loạt bài tìm hiểu về Blade template Laravel này chúng ta sẽ tìm hiểu về Stacks, Service injection, và Blade mở rộng (Extending blade) các bạn nhé!
Stacks
Để nói về thuật ngữ này bằng văn bản thì rất khó hình dung nên chùng mình sẽ đi qua ví dụ để các bạn thấy công dụng, từ đó có thể hiểu được nó. Chẳng hạn trong ứng dụng của bạn có rất nhiều trang con, tất cả các trang con đều được include với một file JS chung. Một số trang con đặc biệt sẽ có file JS riêng để xử lý.
Đây là cấu trúc thư mục cho ví dụ:
resources/ ├── views/ | ├── pages/ | | | login.blade.php | | | ... | | layout.blade.php
Ở blade view layout, ta có nội dung sau:
resources/views/layout.blade.php
<html>
<head>
<script src="main.js"></script>// File JS chung
</head>
</body>
@yield('page')
</body>
</html>Còn blade view login thì:
resources/views/pages/login.blade.php
@extends('layout')
@section('page')
<form name="login">
//
</form>
@endsectionBây giờ mình muốn include file JS login.js thì cách nhanh nhất là bỏ dòng code include JS vào trong section page ở blade view pages.login như thế này:
resources/views/pages/login.blade.php
@section('page')
<form name="login">
//
</form>
<script src="login.js"></script>
@endsectionCách trên thì có thể code vẫn hoạt động bình thường thế nhưng không tốt cho SEO hoặc bất đồng bộ trong code Javascript.
Thật toẹt vời khi Laravel cung cấp cho ta một giải pháp để giải quyết tình huống trên dựa vào hai thẻ @stack và @push.
Bạn hãy tưởng tưởng @stack giống như một kệ sách, còn @push giống như những cuốn sách, dù bạn đặt những cuốn sách ở đâu thì sau quá trình dọn dẹp (biên dịch) thì những cuốn sách sẽ được đưa vào kệ sách.
Tức là bây giờ mình muốn đưa cuốn sách
<script src="login.js"></script>
vào một kệ sách nào đó trong <head> thì phải khai báo kệ sách đó trước đã.
resources/views/layout.blade.php
<head>
<script src="main.js"></script>// File JS chung
@stack('scripts')
</head>Như các bạn thấy mình đã khởi tạo một kệ sách với tên là scripts rồi, việc cần làm bây giờ là đưa cuốn sách <script src="login.js"></script> về kệ sách scripts thôi.
Tại blade view pages.login, mình chỉnh sửa nội dung lại như sau:
resources/views/pages/login.blade.php
@extends('layout')
@push('scripts')
<script src="login.js"></script>
@endpush
@section('page')
<form name="login">
//
</form>
@endsectionGiờ chắc các bạn đã hiểu cách hoạt động của @stack và @push rồi đúng không nào. Ngoài ra, Laravel còn cung cấp thẻ @prepend, thẻ này giúp ta sẽ thêm cuốn sách "yêu thích" nào đó vào đầu ngăn sách.
@push('scripts')
<script src="script_2.js"></script>
@endpush
// Later...
@prepend('scripts')
<script src="script_1.js"></script>
@endprependService injection
Laravel cho phép người sử dụng lấy một service bất kỳ có trong service container thông qua @inject.
@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>Mở rộng Blade (Extending Blade)
Laravel cho phép chúng ta tự định nghĩa các thẻ bằng phương thức directive có trong Blade facade. Việc này đương nhiên chúng ta cũng sẽ code trong boot của AppServiceProvider.
app/Providers/AppServiceProvider.php
use Illuminate\Support\Facades\Blade; public function boot() { Blade::directive('print', function($expression) { return "<?php echo 'Printed ' . $expression; ?>"; }); }
Tham số của method Blade::directive:
- Tham số thứ nhất là tên thẻ
- Tham số thứ hai là một Closure object, nó sẽ chứa biến dữ liệu nhận được qua các tham số của thẻ trong blade view. Trong Closure này, ta sẽ return mã PHP được viết dưới dạng chuỗi.
Sau khi đăng ký xong, ta có thể test thẻ @print như sau:
@print('Pham Nhan')
Lời kết:
Vậy là chúng ta đã tìm hiểu xong Blade template Laravel từ A - Z rồi đấy. Đôi lúc lý thuyết sẽ có tí khó hiểu nhưng các bạn hãy thử các ví dụ biết đâu nó lại dễ ăn hơn rất nhiều. Chúc các bạn học tốt
