laravel布局模板的使用示例

墨蓝 2023-10-06 17:16 13阅读 0赞

## 1 布局文件 ##

`布局文件views/wap/layout/layout.blade.php`

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link href="/favicon.ico" rel="SHORTCUT ICON">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="csrf-token" content="{
         { csrf_token() }}">
        <title>@yield('title','centphp.com')</title>
        <meta name="keywords" content="@yield('keywords','centphp.com')">
        <meta name="description" content="@yield('description','centphp.com')">
        <link rel="stylesheet" type="text/css" href="/wap/css/reset.css">
        <link rel="stylesheet" type="text/css" href="/wap/lib/layui/css/layui.css">
        <link rel="stylesheet" type="text/css" href="/wap/lib/iconfont/iconfont.css">
        <link rel="stylesheet" type="text/css" href="/wap/css/main.css">
        @section('css')
        @show
    </head>
    <body>
    @include('wap.public.header')
    @section('content')
    @show
    <script src="/wap/js/jquery-3.3.1.min.js"></script>
    <script src="/wap/lib/layui/layui.js"></script>
    <script type="text/javascript">
        $.ajaxSetup({
         
            headers: {
         
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    
        //退出登录
        $("#logout").click(function () {
         
            // 相关逻辑
        });
    </script>
    @section('js')
    @show
    </body>
    </html>

## 2 视图文件 ##

`视图文件views/wap/user/edit.blade.php`

@extends('wap.layout.layout')
    
    @section('title', '编辑用户')
    @section('keywords', '编辑用户')
    @section('description', '编辑用户')
    
    @section('css')
        <link rel="stylesheet" type="text/css" href="/wap/css/user/user.css">
        <link rel="stylesheet" type="text/css" href="/wap/lib/layui/formSelects/formSelects-v4.css" />
        <style type="text/css">
           
        </style>
    @endsection
    
    @section('content')
        <div class="user-edit">
            内容区域
        </div>
    @endsection
    
    @section('js')
        <script type="text/javascript" src="/wap/lib/layui/formSelects/formSelects-v4.js"></script>
        <script type="text/javascript">
           
        </script>
    @endsection