NO.1Blade模板簡介

問：什么是Blade模板？

答： Blade模板是Laravel提供一個既簡單又強大的模板引擎；
和其他流行的PHP模板引擎不一樣，他并不限制你在視圖里使用原生PHP代碼；
所有Blade視圖頁面都將被編譯成原生的PHP代碼并緩存起來，除非你的模板文件被修改，否則不會重新編譯。
而這些都意味著Blade不會給我們增加任何負擔。

NO.2Blade模板繼承使用

先說一下這里我們會用到的知識點

section

yield

extends

parent

問： Blade模板繼承使用的優(yōu)勢在哪？為什么要使用它？

答：
Blade模板繼承的優(yōu)勢在于，你寫一個管理系統(tǒng)或者別的系統(tǒng)的時候，如果某部分樣式不變，你可能會因為這個寫一個又一個頁面，就很麻煩，而且代碼量多，做的時間久，別人接手也會抓狂，代碼觀賞性不強。但是你要是用到了Blade模板繼承，你就可以省掉那些一樣板塊代碼的數(shù)量；
為什么要使用它？因為方便維護，也節(jié)省代碼量。多說無益，我們拿出事實說話。

這里，我們先拿出一個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>你好!這里是陳柴的系統(tǒng)/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的框架，那你實現(xiàn)要把Bootstrap框架的文件下載好，然后存放于public目錄下，才能使用。

然后我們在view目錄下創(chuàng)建一個名為Bstp.blade.php的視圖，將上面Bootstrap的代碼復制過去。

做到這，我們繼續(xù)在view目錄下午創(chuàng)建一個目錄，命名為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>你好!這里是陳柴的系統(tǒng)/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，獲得效果如下

這里，我們是不是已經輸出出來了？
(這里有個點值得注意，因為我在title>/title>里輸入了@yield(‘title'),然后在，Bstp下又給他賦了個值，叫首頁，所以標題就是首頁)

然后如果我們想要把中間那塊“關于我”，“標題”，“鏈接”，去掉怎么辦?
好，那么我們只需要，在Bstp.blade.php文件里(Bstp下的)，輸入一個空的

@section('box')

@stop

即可，效果如下:

你們看，是不是沒有了?
那么好，問題又來了，有的小伙伴想在原來的基礎上再新增一點東西，能讓這個不消失，而且也能顯示新增的東西，要怎么辦呢？
這個問題僅僅只需要一個@parent

如下:

你看，左下角是不是有個abc啊。

更多關于Laravel相關內容感興趣的讀者可查看本站專題：《Laravel框架入門與進階教程》、《php優(yōu)秀開發(fā)框架總結》、《php面向對象程序設計入門教程》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》

希望本文所述對大家基于Laravel框架的PHP程序設計有所幫助。

您可能感興趣的文章:

laravel5.1框架基礎之Blade模板繼承簡單使用方法分析
分享5個非常有用的Laravel Blade指令
Laravel 5框架學習之Blade 簡介
laravel 5 實現(xiàn)模板主題功能（續(xù)）
laravel 5 實現(xiàn)模板主題功能
Laravel框架基礎語法與知識點整理【模板變量、輸出、include引入子視圖等】
Laravel實現(xiàn)通過blade模板引擎渲染視圖
PHP的Laravel框架中使用AdminLTE模板來編寫網站后臺界面
Laravel框架中Blade模板的用法示例
Laravel中的Blade模板引擎示例詳解
Laravel框架之blade模板新手入門教程及小技巧
Laravel 5.1 框架Blade模板引擎用法實例分析

標簽：寶雞南陽銅川鎮(zhèn)江宜賓黃南婁底湛江

巨人網絡通訊聲明：本文標題《Laravel框架Blade模板簡介及模板繼承用法分析》，本文關鍵詞 Laravel,框架,Blade,模板,簡介,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。