Nội dung chính Show
Chuẩn bị cần cho Blade template
myproject
Click vào dấu [+] để xem cấu trúc. Thực hiệnLần lượt tạo các file trên với nội dung như sau: Chú ý là chỉ làm mẫu cho trang News thôi, còn trang Product thì các bạn dựa vào trang News để làm thêm nhé. header.blade.php <header> Đây là nội dung header </header> footer.blade.php <footer> Đây là nội dung footer </footer> tpl_default.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> </head> <body> <h2>Tiêu đề từ template</h2> <script src="đường_dẫn_tới_file_js"></script> </body> </html> news.blade.php <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> Kết nối trang Views và Templates
tpl_default.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> </head> <body> <h2>Tiêu đề từ template</h2> @yield('content') <script src="đường_dẫn_tới_file_js"></script> </body> </html>
news.blade.php @extends('templates.tpl_default') @section('content') <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> @endsection
Hiển thị trình duyệtTiêu đề từ templateTin trong ngàyNội dung siêu ngắn cho tin tức mới đây!!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> </head> <body> <h2>Tiêu đề từ template</h2> <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> <script src="đường_dẫn_tới_file_js"></script> </body> </html> Kết nối nhiều nội dung từ Views vào Templates
tpl_default.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> @yield('css') </head> <body> <h2>Tiêu đề từ template</h2> @yield('content') <script src="đường_dẫn_tới_js"></script> @yield('js') </body> </html>
news.blade.php @extends('templates.tpl_default') @section('css') <link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all"> @endsection @section('content') <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> @endsection @section('js') <script src="đường_dẫn_tới_file_news.js"></script> @endsection
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> <link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all"> </head> <body> <h2>Tiêu đề từ template</h2> <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> <script src="đường_dẫn_tới_file_js"></script> <script src="đường_dẫn_tới_file_news.js"></script> </body> </html> Truyền giá trị từ trang Views vào Template
news.blade.php Truyền giá trị @extends('templates.tpl_default', ['pageId' => 'news']) @section('css') <link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all"> @endsection @section('content') <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> @endsection @section('js') <script src="đường_dẫn_tới_file_news.js"></script> @endsection tpl_default.blade.php Nhận giá trị <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> @yield('css') </head> <body id="{{$pageId}}"> <h2>Tiêu đề từ template</h2> @yield('content') <script src="đường_dẫn_tới_file_js"></script> @yield('js') </body> </html> Cách gọi Hiển thị trình duyệtTiêu đề từ templateTin trong ngàyNội dung siêu ngắn cho tin tức mới đây!!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tiêu đề trang</title> <link rel="stylesheet" href="đường_dẫn_tới_file_css" media="all"> <link rel="stylesheet" href="đường_dẫn_tới_file_news.css" media="all"> </head> <body id="news"> <h2>Tiêu đề từ template</h2> <div class="news"> <h3>Tin trong ngày</h3> <p>Nội dung siêu ngắn cho tin tức mới đây!!!</p> </div> <script src="đường_dẫn_tới_file_js"></script> <script src="đường_dẫn_tới_file_news.js"></script> </body> </html> DownloadCác bạn download những file code đã tạo để tham khảo nhé Blade Template, nội dung bao gồm các file routing, controller, ... |