Dịch vụ

Hướng dẫn tạo Layout Master với blade template Lavarel

Posted on by admin

Laravel – Hướng dẫn tạo Master layout với blade template

Trong Laravel, Blade Template là một công cụ mạnh mẽ để xây dựng các giao diện người dùng dễ dàng. Để tạo Master layout với Blade Template, bạn có thể làm theo các bước sau đây:

  1. Tạo một file layout master với định dạng .blade.php trong thư mục views/layouts. Ví dụ: master.blade.php.
  2. Trong file master.blade.php, bạn có thể định nghĩa các khối bố cục chính của trang web. Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body><header>
@yield(‘header’)
</header>
<main class=“py-4”>@yield(‘content’)
</main>
footer class=“bg-light text-center text-lg-start”>
@yield(‘footer’)
</footer>
script src=“{{ asset(‘js/app.js’) }}”></script>
</body>
</html>

Trong đoạn mã trên, chúng ta có thể thấy rằng có 4 khối bố cục chính của trang web được định nghĩa là:

  • Title: được định nghĩa bằng cách sử dụng @yield(‘title’)
  • Header: được định nghĩa bằng cách sử dụng @yield(‘header’)
  • Content: được định nghĩa bằng cách sử dụng @yield(‘content’)
  • Footer: được định nghĩa bằng cách sử dụng @yield(‘footer’)

Các @yield sẽ được sử dụng để cho phép các view khác “mở rộng” layout master này.

  1. Tiếp theo, bạn có thể tạo các file view riêng lẻ để sử dụng layout master này. Ví dụ: home.blade.php.

@extends('layouts.master')

@section(‘title’, ‘Trang chủ’)

@section(‘header’)
@include(‘partials.header’)
@endsection

@section(‘content’)
<div class=“container”>
<h1>Chào mừng đến với trang chủ</h1>
<p>Đây là trang chủ của chúng tôi</p>
</div>
@endsection

@section(‘footer’)
@include(‘partials.footer’)
@endsection

Trong đoạn mã trên, chúng ta có thể thấy rằng có ba khối bố cục con của layout master được sử dụng là header, content và footer.

Thông qua lệnh @extends(‘layouts.master’), view home.blade.php được kế thừa từ layout master ở trên.

Các khối bố cục con được định nghĩa thông qua các lệnh @section và @endsection, và chúng ta có thể sử dụng @include để gọi các file view riêng lẻ cho header

1 Giới thiệu chung:

  • Laravel có cách tạo master layout khá cũng khá dễ, giúp cho việc kế thừa và chia nhỏ các layout tốt hơn.

2 Cấu trúc tree thư mục trong lavarel

Thư mục resources/views/
├── layouts
│   └── master.blade.php
├── pages
│   └── top-page
│       └── index.blade.php
└── partial
    ├── breadcrumb.blade.php
    ├── footer.blade.php
    ├── header.blade.php
    └── sidebar.blade.php

 

3. Cài đặt Master layout

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{--CSRF Token--}}
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', config('app.name', '@Master Layout'))</title>

    {{--Styles css common--}}
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    @yield('style-libraries')
    {{--Styles custom--}}
    @yield('styles')
</head>
<body>
    @include('partial.header')

    @yield('content')

    @include('partial.footer')

    {{--Scripts js common--}}
    <script src="{{ asset('js/jquery-3.4.1.js') }}"></script>
    {{--Scripts link to file or js custom--}}
    @yield('scripts')
</body>
</html>

4. Cách sử dụng.

  • Ta vừa setup ra 1 trang master layout, trang này sẽ được kế thừa và sử dụng lại khi ta muốn tạo ra 1 trang mới, trong ví dụ này là mình sẽ tạo ra trang : views/top-page/index.blade.php
  • Cùng xem mình sử dụng nó thế nào nhé:
@extends('layouts.master')

@section('title', 'App - Top Page')

@section('style-libraries')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
@stop

@section('styles')
    {{--custom css item suggest search--}}
    <style>
        .autocomplete-group { padding: 2px 5px; }
    </style>
@stop

@section('breadcrumb')
    @include('partial.breadcrumb')
@stop

@section('content')
    <div class="main-content">
        <div class="top-page">
            @yield('breadcrumb')
            <!-- this is content -->
        </div>
   </div>
@stop

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
    {{--jquery.autocomplete.js--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.10/jquery.autocomplete.min.js"></script>
    {{--quick defined--}}
    <script>
      $(function () {
          // your custom javascript
      });
   </script>
@stop

Ghi chú về các thành phần

type Description
@yield('title', 'default_value') Cài đặt title cho trang top, nếu bạn không gọi @section ra thì mặc định giá trị là<title>default_value</title>
@section('title', 'App - Top Page') gán giá trị cho thẻ title -> <title>App - Top Page</title>
thư mục partial/ Dùng để chứa các phần tử chung mà trang nào cũng có thể gọi tới và sử dụng
thư mục pages/ Dùng để chứa các trang riêng biệt, chúng ta nên chia nhỏ theo chức này của từng page trong, có vậy cây thư mục sẽ tường minh hơn
@yield(‘styles’), @yield(‘scripts’) chúng ta có thể dễ dàng nhúng những file css, js , hoặc viết thẳng thẻ style, thẻ script bên trong những nơi mà ta chỉ định theo từng trang, điều này sẽ giảm tải load những css và js không cần thiết

Tổng kết:

  • Dễ dàng kế thừa và include các partial giúp cho chúng ta lập trình gọn gàng và dễ handle
0/5 (0 Reviews)