A list,

  • When a page’s head and tail are exactly the same, as long as the middle content is not consistent, this time needs to use a common template, and then other pages can inherit from this common template to write the middle content.

  • Importing and using templates, and using page parameters for templates

  • Template inheritance format

    / / components according to below the views folder / / the main components of said in the views/components/main blade. PHP file @ extends (' components. The main ')Copy the code

2. Simple inheritance

  • Create a new main.blade.php public view file

    @include('components.header') </body>Copy the code

  • Then create the header.blade.php and footer.blade.php files

    <div> I am the header </div>Copy the code
    <div> I am the tail </div>Copy the code

  • Then inherit the main.blade.php file with index.blade.php

Three,@yieldPlaceholder,@sectionThe output operator

  • Customize the content in the common template according to the requirements of the page, for example: page content, the previous was dead content, now need to display different types of each page.

  • The main. Blade. PHP file

    <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> {{- custom title -}} < title > @ yield (' title ') < / title > {{- custom CSS -}} @ yield (' CSS ') < / head > < body > @yield('content') @include('components.footer') {{-- custom JS --}} @yield('js') </body> </html>Copy the code

  • Index. The blade. The PHP file

    {{- inheritance -}} @ extends (' components. The main ') {{-- use a single tag -}} @ section (' title ', 'DzmTest') {{usage - 2: </div> @endSection {{-- CSS --}} @section(' CSS ') <style> .content-view { color: red } </style> @endsection {{-- js --}} @section('js') <script> console.log('DzmTest'); </script> @endsectionCopy the code

  • Effect of the Demo