Laravel框架Blade模板简介及模板继承用法分析


Posted in PHP onDecember 03, 2019

本文实例讲述了Laravel框架Blade模板及模板继承用法.分享给大家供大家参考,具体如下:

本章知识点主要如下:

  1. Blade模板简介
  2. Blade模板继承使用

NO.1Blade模板简介

问: 什么是Blade模板?

答: Blade模板是Laravel提供一个既简单又强大的模板引擎;
和其他流行的PHP模板引擎不一样,他并不限制你在视图里使用原生PHP代码;
所有Blade视图页面都将被编译成原生的PHP代码并缓存起来,除非你的模板文件被修改,否则不会重新编译。
而这些都意味着Blade不会给我们增加任何负担。

NO.2Blade模板继承使用

先说一下这里我们会用到的知识点

  1. section
  2. yield
  3. extends
  4. parent

问: Blade模板继承使用的优势在哪?为什么要使用它?

答:
Blade模板继承的优势在于,你写一个管理系统或者别的系统的时候,如果某部分样式不变,你可能会因为这个写一个又一个页面,就很麻烦,而且代码量多,做的时间久,别人接手也会抓狂,代码观赏性不强。但是你要是用到了Blade模板继承,你就可以省掉那些一样板块代码的数量;
为什么要使用它?因为方便维护,也节省代码量。 多说无益,我们拿出事实说话。

这里,我们先拿出一个Bootstrap的样式,代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap与Laravel的测试集合</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" > 
	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<style>
  .fakeimg {
    height: 200px;
     background: #aaa;
  }
 </style>
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
 <h1>你好!这里是陈柴的系统</h1>
 <p>这里是Laravel与Bootstrap的集合</p> 
</div>

<nav class="navbar navbar-inverse">
 <div class="container-fluid">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>        
   </button>
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站名</a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
   <ul class="nav navbar-nav">
    <li class="@yield('index')"><a href="{{url('index')}}" rel="external nofollow" rel="external nofollow" >首页</a></li>
    <li class="@yield('login')"><a href="{{url('student')}}" rel="external nofollow" rel="external nofollow" >信息表</a></li>
   </ul>
  </div>
 </div>
</nav>

<div class="container">
 <div class="row">
  <div class="col-sm-4">
   <h2>关于我</h2>
   <h5>我的照片:</h5>
   <div class="fakeimg">这边插入图像</div>
   <p>关于我的介绍..</p>
   <h3>链接</h3>
   <p>描述文本。</p>
   <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >链接 1</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >链接 2</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >链接 3</a></li>
   </ul>
   <hr class="hidden-sm hidden-md hidden-lg">
  </div>
  <div class="col-sm-8">
   <h2>标题</h2>
   <h5>副标题</h5>
   <div class="fakeimg">图像</div>
   <p>一些文本..</p>
   <p>菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!</p>
   <br>
   <h2>标题</h2>
   <h5>副标题</h5>
   <div class="fakeimg">图像</div>
   <p>一些文本..</p>
   <p>菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!</p>
  </div>
 </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
 <p>底部内容</p>
</div>
</body>
</html>

当然了,如果你想要使用Bootstrap的框架,那你实现要把Bootstrap框架的文件下载好,然后存放于public目录下,才能使用。

然后我们在view目录下创建一个名为Bstp.blade.php的视图,将上面Bootstrap的代码复制过去。

做到这,我们继续在view目录下午创建一个目录,命名为Bstp,在往里面写入一个文件,命名为Bstp.blade.php

这个时候,我们就要思考怎么才能继承这个模板了。这个很简单,只需要用到上面我们提到的那几个单词知识点即可。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>@yield('title')</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" > 
	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<style>
  .fakeimg {
    height: 200px;
     background: #aaa;
  }
 </style>
</head>
<body>

@section('jumbotron')
<div class="jumbotron text-center" style="margin-bottom:0">
 <h1>你好!这里是陈柴的系统</h1>
 <p>这里是Laravel与Bootstrap的集合</p> 
</div>
@show

@section('nav')
<nav class="navbar navbar-inverse">
 <div class="container-fluid">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>        
   </button>
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站名</a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
   <ul class="nav navbar-nav">
    <li class="@yield('index')"><a href="{{url('index')}}" rel="external nofollow" rel="external nofollow" >首页</a></li>
    <li class="@yield('login')"><a href="{{url('student')}}" rel="external nofollow" rel="external nofollow" >信息表</a></li>
   </ul>
  </div>
 </div>
</nav>
@show

@section('box')
<div class="container">
 <div class="row">
  <div class="col-sm-4">
   <h2>关于我</h2>
   <h5>我的照片:</h5>
   <div class="fakeimg">这边插入图像</div>
   <p>关于我的介绍..</p>
   <h3>链接</h3>
   <p>描述文本。</p>
   <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >链接 1</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >链接 2</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >链接 3</a></li>
   </ul>
   <hr class="hidden-sm hidden-md hidden-lg">
  </div>
  <div class="col-sm-8">
   <h2>标题</h2>
   <h5>副标题</h5>
   <div class="fakeimg">图像</div>
   <p>一些文本..</p>
   <p>菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!</p>
   <br>
   <h2>标题</h2>
   <h5>副标题</h5>
   <div class="fakeimg">图像</div>
   <p>一些文本..</p>
   <p>菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!</p>
  </div>
 </div>
</div>
@show

@section('footer')
<div class="jumbotron text-center" style="margin-bottom:0">
 <p>底部内容</p>
</div>
@show
</body>
</html>

@section(‘nav')

@show

@show
这里代表的是一个继承某个代码块的开始以及结束,section开始,show结束,nav定义这个可以修改的代码块名字。方便子模板调用。

@yield(‘title')
这里和上面的定义差不多,唯一不同的是,他是不可扩展的,也就是说,原来这个div有多大,你就只能多大,而上面那个不一样,他的内容只要超过了原本的div,那么原本的div会随之增大

。@extends(‘Bstp')
这个代表着,你这个子模板继承于谁,我这里写的是这个子模板继承于view目录下的Bstp.blade.php。

@parent
这个代表着,把你原本的一起继承过来,覆盖。

说了这么多,如果还不理解,那咱们就行动证明

首先,我们验证第一个@extends

然后,打开我们view目录下的Bstp目录里的Bstp.blade.php文件,然后输入@extends,并且给他赋予一个控制器和路由

子模板代码如下:

@extends('Bstp')//继承自view目录下的Bstp.blade.php

控制器代码如下:

namespace App\Http\Controllers;

class StudentController extends Controller
{
	public function index()
	{
		return view('Bstp.Bstp');//这里指的是返回view目录下Bstp目录下的Bstp
	}
}

路由如下:

Route::get('index',['as'=>'index','uses'=>'StudentController@index']);

然后我们输入index,获得效果如下
Laravel框架Blade模板简介及模板继承用法分析
这里,我们是不是已经输出出来了?
(这里有个点值得注意,因为我在<title></title>里输入了@yield(‘title'),然后在,Bstp下又给他赋了个值,叫首页,所以标题就是首页)

然后如果我们想要把中间那块“关于我”,“标题”,“链接”,去掉怎么办?
好,那么我们只需要,在Bstp.blade.php文件里(Bstp下的),输入一个空的

@section('box')

@stop

即可,效果如下:
Laravel框架Blade模板简介及模板继承用法分析
Laravel框架Blade模板简介及模板继承用法分析
你们看,是不是没有了?
那么好,问题又来了,有的小伙伴想在原来的基础上再新增一点东西,能让这个不消失,而且也能显示新增的东西,要怎么办呢?
这个问题仅仅只需要一个@parent

如下:
Laravel框架Blade模板简介及模板继承用法分析
Laravel框架Blade模板简介及模板继承用法分析
你看,左下角是不是有个abc啊。

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

PHP 相关文章推荐
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
May 03 PHP
PHP 存储文本换行实现方法
Jan 05 PHP
解析php addslashes()与addclashes()函数的区别和比较
Jun 24 PHP
PHP中实现生成静态文件的方法缓解服务器压力
Jan 07 PHP
ThinkPHP的Widget扩展实例
Jun 19 PHP
PHP采用XML-RPC构造Web Service实例教程
Jul 16 PHP
php-redis中的sort排序函数总结
Jul 08 PHP
php防止用户重复提交表单
Nov 02 PHP
详解YII关联查询
Jan 10 PHP
CodeIgniter扩展核心类实例详解
Jan 20 PHP
php连接oracle数据库的方法(测试成功)
May 26 PHP
PHP面试常用算法(推荐)
Jul 22 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
Dec 02 #PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
Dec 02 #PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
Dec 01 #PHP
详解no input file specified 三种解决方法
Nov 29 #PHP
设定php简写功能的方法
Nov 28 #PHP
如何在centos8自定义目录安装php7.3
Nov 28 #PHP
PHP的new static和new self的区别与使用
Nov 27 #PHP
You might like
php数组添加元素方法小结
2014/12/20 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
jquery分页插件pagination使用教程
2018/10/23 jQuery
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
怎样写好自我鉴定
2013/12/04 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
公司股权转让协议书
2014/04/12 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2015年派出所工作总结
2015/04/24 职场文书
同意转租证明
2015/06/24 职场文书
教师节校长致辞
2015/07/31 职场文书
少先队中队工作总结
2015/08/14 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
如何通过一篇文章了解Python中的生成器
2022/04/02 Python