程序员小助手|构造你的页面布局,3分钟短文:Laravel模板重用
引言
【程序员小助手|构造你的页面布局,3分钟短文:Laravel模板重用】编写代码的时候 , 我们总是追求写的最少 , 做的最多 。 能重用的就要重用 , 避免后期更改一处修改 , 处处修改的困境 。 而对于模板文件内的HTML内容 , 也完全可以如此构造 。
文章图片
本期就来说说模板的页面布局 。
单区块布局
很显然 , 我们不想每写一个页面 , 都要把logo , 导航栏 , 尾部声明都重新写一遍 , 那样页面多了起来之后 , 改一次头部文件 , 或者更换logo , 或者修改网站的声明 , 都要把所有页面重新修改一次 。
维护起来简直是灾难!
所以laravelblade模板提供了layout布局 。 在目录resources/views/layouts/内添加blade模板文件即可 。
比如我们创建一个app.blade.php布局文件 , 并输入以下内容:
<!doctypehtml><htmllang=''en''><head><metacharset=''UTF-8''><title>WelcometoLaravel</title></head><body>@yield('content')</body></html>
其中 , @yield指令用于区分当前模板内的section块的名称 。 我们现在开始使用这个布局 。 修改上一章我们测试的welcome.blade.php页面模板文件:
@extends('layouts.app')@section('content')<h1>LaravelHelpsYouBuildStuffFaster.</h1><p>Learn,teach,hack,andmakefriendswithdevelopersinyourcity.</p>@endsection
其中 , @extends指令表名使用的布局文件 , 就是我们上面创建的文件 。 其中 , @section...@endsection部分 , 指定了该区域块所要渲染的布局内的位置 。
在浏览器打开根目录地址 , 正常路由到welcome.blade.php视图就可以看到输出页面了 。
多区块布局
既然单个区块的布局可以正常渲染 , 毫无疑问 , 多区块也没有问题 。 通常页面会有一个侧边栏sidebar , 和主体部分 。 对于头部和尾部的内容 , 往往是全局的内容 , 而导航栏内可能就是动态变化的 , 根据用户权限进行选择性地展示 。
我们把布局文件layouts/app.blade.php文件再增加一些内容:
<div>@yield('content')</div><div>@section('advertisement')<p>ScoresomeLaravelswaginourstore!</p>@show</div>
使用了@show指令 , 其实是一个快捷方式 , 等同于下面的书写方式:
@endsection@yield('advertisement')
也就是关闭区块 , 并立即输出该块内容 。 上面的布局我们解决了一个场景问题 , 就是加入在侧边栏有一个广告位 , 不同的页面路由会追加不同的内容 , 在模板内我们可以使用@parent指令 , 将内容追加到声明的区块内 。
在welcome.blade.php模板文件内实现下面的代码:
@extends('layouts.app')@section('content')<h1>LaravelHelpsYouBuildStuffFaster.</h1>@endsection@section('advertisement')@parent<p>Laravelmembersalwaysget10%offatTronCafe!</p>@endsection
大家注意 , 在区块advertisement包裹的区域内使用了@parent指令 , 这会把其之后的内容 , 追加到区块advertisement内 , 而不是覆盖区块布局的内容 。
写在最后
本文通过laravel模板布局的指令介绍 , 演示了单个和多个区块的用法 , 以及如何在模板内引用布局并渲染 。 特别是对于区块的覆写 , 还有追加 , 可以有效地降低代码冗余度 , 提升编程效能 。
Happycoding:-)
我是@程序员小助手 , 专注编程知识 , 圈子动态的IT领域原创作者
推荐阅读
- 脑极体|百度之星正在出圈,用十六年打造程序员版“天才请就位”
- 程序员|我国超重型火箭核心设备亮相,载重超“胖五”5倍,还用上了3D打印
- 程序员|码农新机会!2019-2020这个领域程序员缺口很大!
- 程序员|烟草局事业编朝九晚五年入20万,羡慕阿里年薪70万的程序员
- |你想知道的C ++中的构造函数,这里都有
- 程序员|支付宝、微信迎来劲敌!这家移动支付巨头已崛起,3年斩获3亿用户
- 程序员|年薪50万开发者相亲失败:程序员,别输在不会说话上
- 爱摄影的程序员|米家耳温计1秒给宝宝测温,测温不用等
- 裁员|程序员在深圳买下600万房子,转眼间就被裁员,失声痛哭
- 程序员|罕见!国家博物馆收藏了一行代码,出自阿里程序员之手