Laravel 05: Blade layouts

Một điểm quan trọng mà template engine cần có là việc tái sử dụng một phần layout. Nghĩa là bạn định nghĩa một đoạn layout và tái sử dụng trong nhiều view khác nhau. Với EJS và Handlebars, chúng ta có include và partials. Còn với Blade, chúng ta có đến hai cách tiếp cận khác nhau. Cách thứ nhất, chúng ta sử dụng @include với nguyên tắc tương tự như EJS’ includeHandlebars’ partials. Cách thứ hai diễn ra theo chiều hướng ngược lại với @yield, @section@extends.

@include

Chúng ta sẽ bắt đầu với cách tiếp cận đầu tiên, tức là định nghĩa một view và @include một phân đoạn được định nghĩa ở nơi khác vào view đó. Bây giờ, bạn định nghĩa một route ‘hola’ (hello trong tiếng Tây Ban Nha) và sẽ serve một view cũng có tên là hola, và hola sẽ @include một partial có tên là nombre. Tôi sẽ không đưa ra code vì đây là lúc bạn ôn lại kiến thức cũ của các bài học trước. Nội dung của 2 tập tin sẽ là:

hola.blade.php

nombre.blade.php

Tiến hành cho chạy thử, bạn sẽ có kết quả là nội dung của nombre nằm đúng vị trí của @include trong hola, và {{ $name }} sẽ được điền chính xác vào. Rất đơn giản phải không? Tuy nhiên, nếu bạn vô tình viết sai tên của một partial trong @include thì khi chạy sẽ báo lỗi. Cách tốt nhất là bạn nên gọi @includeIf, nếu Blade không tìm thấy thì “xù”, đơn giản là bỏ qua. Ngoài ra, chúng ta còn có @includeWhen($condition, ‘view_name’, $data) sẽ chỉ include view_name khi $condition là true, và @includeUnless trong trường hợp ngược lại, tương tự như ngShow và ngHide của Angular hay v-show của Vue.

@extends, @section và @yield

Nói một cách ngắn gọn, chúng ta sẽ định nghĩa một base template với các placeholders là các @yield directives, với tham số bên trong là tên của @section sẽ được thêm vào đúng vị trí đó. Các views tương ứng với các routes sẽ @extends base template này, và sẽ chứa định nghĩa nội dung của các @section tương ứng. Có lẽ bạn sẽ dễ hiểu hơn sau khi được giải thích với một ví dụ nho nhỏ. Cụ thể, bạn sẽ tạo route có path là ‘hello’ và sẽ serve một view ‘hello’ tương ứng. Tôi, một lần nữa, sẽ không đưa ra code vì đây là lúc bạn ôn lại kiến thức cũ của các bài học trước. Còn hiện tại, bạn tạo thêm một tập tin layout.blade.php theo cấu trúc thư mục:

Nội dung tập tin layout.blade.php

Nội dung tập tin hello.blade.php:

Bạn cho chạy thử và khi kiểm tra phần tử (inspect elements), chúng ta có kết quả như ý muốn.

Chúng ta có thể hiểu là, khi nhận được request đến ‘/hello’, Laravel sẽ tìm tới tập tin views/routes/hello. Khi đọc tập tin này, Laravel sẽ nhận thấy hello extends từ views/layouts/layout, và do đó, Laravel sẽ render nội dung từ layout, và “điền vào chỗ trống” những nội dung được định nghĩa từ hello.

Cách làm này sẽ phát huy tác dụng rất mạnh khi tất cả các routes của bạn, tất nhiên là ngoại trừ các API routes, đều có chung một template, chẳng hạn, cùng header và cùng footer. Theo cách tiếp cận thứ nhất, bạn sẽ phải định nghĩa riêng header và footer và phải @include vào mỗi view. Trong khi cách làm này, bạn chỉ cần đặt một base layout với những placeholder là @yield và nội dung được điền vào sẽ nằm trong @section ở mỗi view được extends từ base layout đó.

Và bây giờ, nhiệm vụ của các bạn là thực hành với những views tùy ý. Hãy “nâng cao độ khó” với những trường hợp @extends hai tầng layout. Chúc các bạn vui vẻ.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.