服务器之家

服务器之家 > 正文

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

时间：2021-09-18 16:43     来源/作者：陈柴Rarin

本文实例讲述了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的样式，代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Bootstrap与Laravel的测试集合</title>
  6. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
  7. <script src="bootstrap/js/jquery.min.js"></script>
  8. <script src="bootstrap/js/bootstrap.min.js"></script>
  9. <style>
  10. .fakeimg {
  11. height: 200px;
  12. background: #aaa;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17.  
  18. <div class="jumbotron text-center" style="margin-bottom:0">
  19. <h1>你好!这里是陈柴的系统</h1>
  20. <p>这里是Laravel与Bootstrap的集合</p>
  21. </div>
  22.  
  23. <nav class="navbar navbar-inverse">
  24. <div class="container-fluid">
  25. <div class="navbar-header">
  26. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. <span class="icon-bar"></span>
  30. </button>
  31. <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>
  32. </div>
  33. <div class="collapse navbar-collapse" id="myNavbar">
  34. <ul class="nav navbar-nav">
  35. <li class="@yield('index')"><a href="{{url('index')}}" rel="external nofollow" rel="external nofollow" >首页</a></li>
  36. <li class="@yield('login')"><a href="{{url('student')}}" rel="external nofollow" rel="external nofollow" >信息表</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. </nav>
  41.  
  42. <div class="container">
  43. <div class="row">
  44. <div class="col-sm-4">
  45. <h2>关于我</h2>
  46. <h5>我的照片:</h5>
  47. <div class="fakeimg">这边插入图像</div>
  48. <p>关于我的介绍..</p>
  49. <h3>链接</h3>
  50. <p>描述文本。</p>
  51. <ul class="nav nav-pills nav-stacked">
  52. <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>
  53. <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>
  54. <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>
  55. </ul>
  56. <hr class="hidden-sm hidden-md hidden-lg">
  57. </div>
  58. <div class="col-sm-8">
  59. <h2>标题</h2>
  60. <h5>副标题</h5>
  61. <div class="fakeimg">图像</div>
  62. <p>一些文本..</p>
  63. <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
  64. <br>
  65. <h2>标题</h2>
  66. <h5>副标题</h5>
  67. <div class="fakeimg">图像</div>
  68. <p>一些文本..</p>
  69. <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
  70. </div>
  71. </div>
  72. </div>
  73.  
  74. <div class="jumbotron text-center" style="margin-bottom:0">
  75. <p>底部内容</p>
  76. </div>
  77. </body>
  78. </html>

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>@yield('title')</title>
  6. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
  7. <script src="bootstrap/js/jquery.min.js"></script>
  8. <script src="bootstrap/js/bootstrap.min.js"></script>
  9. <style>
  10. .fakeimg {
  11. height: 200px;
  12. background: #aaa;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17.  
  18. @section('jumbotron')
  19. <div class="jumbotron text-center" style="margin-bottom:0">
  20. <h1>你好!这里是陈柴的系统</h1>
  21. <p>这里是Laravel与Bootstrap的集合</p>
  22. </div>
  23. @show
  24.  
  25. @section('nav')
  26. <nav class="navbar navbar-inverse">
  27. <div class="container-fluid">
  28. <div class="navbar-header">
  29. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  30. <span class="icon-bar"></span>
  31. <span class="icon-bar"></span>
  32. <span class="icon-bar"></span>
  33. </button>
  34. <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>
  35. </div>
  36. <div class="collapse navbar-collapse" id="myNavbar">
  37. <ul class="nav navbar-nav">
  38. <li class="@yield('index')"><a href="{{url('index')}}" rel="external nofollow" rel="external nofollow" >首页</a></li>
  39. <li class="@yield('login')"><a href="{{url('student')}}" rel="external nofollow" rel="external nofollow" >信息表</a></li>
  40. </ul>
  41. </div>
  42. </div>
  43. </nav>
  44. @show
  45.  
  46. @section('box')
  47. <div class="container">
  48. <div class="row">
  49. <div class="col-sm-4">
  50. <h2>关于我</h2>
  51. <h5>我的照片:</h5>
  52. <div class="fakeimg">这边插入图像</div>
  53. <p>关于我的介绍..</p>
  54. <h3>链接</h3>
  55. <p>描述文本。</p>
  56. <ul class="nav nav-pills nav-stacked">
  57. <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>
  58. <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>
  59. <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>
  60. </ul>
  61. <hr class="hidden-sm hidden-md hidden-lg">
  62. </div>
  63. <div class="col-sm-8">
  64. <h2>标题</h2>
  65. <h5>副标题</h5>
  66. <div class="fakeimg">图像</div>
  67. <p>一些文本..</p>
  68. <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
  69. <br>
  70. <h2>标题</h2>
  71. <h5>副标题</h5>
  72. <div class="fakeimg">图像</div>
  73. <p>一些文本..</p>
  74. <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
  75. </div>
  76. </div>
  77. </div>
  78. @show
  79.  
  80. @section('footer')
  81. <div class="jumbotron text-center" style="margin-bottom:0">
  82. <p>底部内容</p>
  83. </div>
  84. @show
  85. </body>
  86. </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，并且给他赋予一个控制器和路由

子模板代码如下:

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

控制器代码如下:

  1. namespace App\Http\Controllers;
  2.  
  3. class StudentController extends Controller
  4. {
  5. public function index()
  6. {
  7. return view('Bstp.Bstp');//这里指的是返回view目录下Bstp目录下的Bstp
  8. }
  9. }

路由如下:

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

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

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

  1. @section('box')
  2.  
  3. @stop

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

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

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

原文链接：https://blog.csdn.net/weixin_44596681/article/details/89202034

标签：
Laravel 模板继承 Blade模板 

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部