使用 Laravel 从零做一个社交网站 (三)

使用 Laravel 从零做一个社交网站 (三)

上节我们新建了 home.blade.phpabout.blade.php 两个文件, 仔细观察两个文件都有重复之处, 这违反了一些代码原则, 使代码看上去有些冗长, 并且以后更改多个页面相同元素时会非常麻烦, 所以我们需要使用 blade 重构文件, 把重复的代码从文件中单独分离出来, 当需要修改时, 只需修改一个地方即可, 而且代码也会看上去非常简洁.

模板继承

我们首先需要在 resources/views 文件夹下创建文件夹 layouts , 在 layouts 文件夹下创建文件 default.blade.php, 它稍后会被作为模板继承的”父”文件

可以看到文件中比普通HTML多出了 @yield 这个指令, 这个指令可以用来显示子文件中指定的内容.

resources/views/layouts/default.blade.php

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Social</title>
</head>
<body>
@yield('content')
</body>
</html>

原先的 home.blade.phpaboute.blade.php 文件就是所谓的”子”文件, 现在我们可以把重复的标签删掉, 把下面的代码复制进去. @extends 指令用于引入”父”文件, @section 中的内容可以在”父”文件中对应的 @yield 指令中显示.

resources/views/pages/home.blade.php

1
2
3
4
@extends('layouts.default')
@section('content')
<h1>这里是主页</h1>
@stop

resources/views/pages/aboute.blade.php

1
2
3
4
@extends('layouts.default')
@section('content')
<h1>关于我们</h1>
@stop

@yield指令还可以有第二个参数, 当”子”文件中没有对应的@section, 那么 @yield 的第二个参数会作为默认值, 这个特性适合在HTML文件中修改 title 标签. 所以我们需要继续修改下这三个文件

resources/views/layouts/default.blade.php

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>@yield('title','Social') - Social</title>
</head>
<body>
@yield('content')
</body>
</html>

resources/views/pages/home.blade.php

1
2
3
4
5
@extends('layouts.default')
@section('title', '主页')
@section('content')
<h1>这里是主页</h1>
@stop

resources/views/pages/aboute.blade.php

1
2
3
4
5
@extends('layouts.default')
@section('title', '关于我们')
@section('content')
<h1>关于我们</h1>
@stop
You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×