首页 > 作文

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

更新时间:2023-04-08 05:07:13 阅读: 评论:0

本文实例讲述了laravel框架blade模板及模板继承用法.分平板电脑与笔记本享给大家供大家参考,具体如下:

本章知识点主要如下:

blade模板简介blade模板继承使用

no.1blade模板简介

问: 什么是blade模板?

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

no二本大学热门专业.2blade模板继承使用

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

ctionyieldextendsparent

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

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

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

<!doctype html><html><head><meta chart="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-inver"> <div class="container-fluid">  <div class="navbar-header">   <button type="button" class="navbar-toggle" data-toggle="collap" 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="collap navbar-collap" 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 chart="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>@ction('jumbotron')<div class="jumbotron text-center" style="margin-bottom:0"> <h1>你好!这里是陈柴的系统</h1> <p>这里是laravel与bootstrap的集合</p> </div>@show@ction('nav')<nav class="navbar navbar-inver"> <div class="container-fluid">  <div class="navbar-header">   <button type="button" class="navbar-toggle" data-toggle="collap" 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="collap navbar-collap" 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@ction('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@ction('footer')<div class="jumbotron text-center" style="margin-bottom:0"> <p>底部内容</p></div>@show</body></html>

@ction(‘nav’)

@show

@show
这里代表的是一个继承某个代码块的开始以及结束,ction开始,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目录下bs情人节网上订花tp目录下的bstp}}

路由如下:

route::get('index',['as'=>'index','us'=>'studentcontroller@index']);

然后我们输入index,获得效果如下

这里,我们是不是已经输出出来了?
(这里有个点值得注意,因为我在<title></title>里输入了@yield(‘title’),然后在,bstp下又给他赋了个值,叫首页,所以标题就是首页)

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

@ction('box')@stop

即可,效果如下:

你们看,是不是没有了?
那么好,问题又来了,有的小伙伴想在原来的基础上再新增一点东西,能让这个不消失,而且也能显示新增的东西,要怎么办呢?
这个问题仅仅只需要一个@parent

如下:

你看,左下角是不是有个abc啊。

本文发布于:2023-04-08 05:07:11,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/bc8cc91002e95167b167c383ef7679ff.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:Laravel框架Blade模板简介及模板继承用法分析.doc

本文 PDF 下载地址:Laravel框架Blade模板简介及模板继承用法分析.pdf

标签:菜鸟   模板   仅是   代码
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图