laravel blade 简明示例

简单捯饬一下 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