雪漫城的风宅
← 归档

laravel blade 简明示例

· NightingaleWK · 更新于 2023-11-07
laravel

简单捯饬一下 laravel 的 blade 使用方法

总之就是，主页面可用：

  1. @yield('content') 表示这里后面子页面可以用 @section('content') xxxx @endsection 调用；
  2. @include('layouts._header') 表示我引用其他的 blade 页面模块到这里。

子页面可以用：

  1. @extends('layouts.app') 表示我要使用这个 blade 模板页面，并在后面对模板传参；
  2. @section('title', $user->name . ' 的个人中心') 表示子页面对 app.blade.php 的一个叫 title 的 yield 传递参数。

具体代码示例如下：

主页面 app.balde.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compuiatible" content="ie=edge">
    <title>@yield('title', 'LaraBBS') - laravel 进阶教程</title>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- CSS / JS -->
    @vite(['resources/js/app.js'])
</head>

<body>
    <div id="app" class="{{ route_class() }}-page">
        @include('layouts._header')
        <div class="container">
            @include('shared._messages')
            @yield('content')
        </div>
        @include('layouts._footer')
    </div>
</body>

</html>

子页面 show.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@extends('layouts.app')

@section('title', $user->name . ' 的个人中心')

@section('content')

    <div class="row">

        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs user-info">
            <div class="card ">
                <img class="card-img-top"
                    src="https://cdn.learnku.com/uploads/images/201709/20/1/PtDKbASVcz.png?imageView2/1/w/600/h/600"
                    alt="{{ $user->name }}">
                <div class="card-body">
                    <h5><strong>个人简介</strong></h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                    <hr>
                    <h5><strong>注册于</strong></h5>
                    <p>January 01 1901</p>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <div class="card ">
                <div class="card-body">
                    <h1 class="mb-0" style="font-size:22px;">{{ $user->name }} <small>{{ $user->email }}</small></h1>
                </div>
            </div>
            <hr>

            {{-- 用户发布的内容 --}}
            <div class="card ">
                <div class="card-body">
                    暂无数据 ~_~
                </div>
            </div>

        </div>
    </div>
@stop

#blade
上一篇：又一次更换博客系统辣下一篇：laravel 事件系统简明示例