溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)怎么在Laravel框架中使用Blade模板，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
NO.1Blade模板簡(jiǎn)介
問： 什么是Blade模板？
答： Blade模板是Laravel提供一個(gè)既簡(jiǎn)單又強(qiáng)大的模板引擎；
和其他流行的PHP模板引擎不一樣，他并不限制你在視圖里使用原生PHP代碼；
所有Blade視圖頁(yè)面都將被編譯成原生的PHP代碼并緩存起來，除非你的模板文件被修改，否則不會(huì)重新編譯。
而這些都意味著Blade不會(huì)給我們?cè)黾尤魏呜?fù)擔(dān)。
先說一下這里我們會(huì)用到的知識(shí)點(diǎn)
section
yield
extends
parent
問： Blade模板繼承使用的優(yōu)勢(shì)在哪？為什么要使用它？
答：
Blade模板繼承的優(yōu)勢(shì)在于，你寫一個(gè)管理系統(tǒng)或者別的系統(tǒng)的時(shí)候，如果某部分樣式不變，你可能會(huì)因?yàn)檫@個(gè)寫一個(gè)又一個(gè)頁(yè)面，就很麻煩，而且代碼量多，做的時(shí)間久，別人接手也會(huì)抓狂，代碼觀賞性不強(qiáng)。但是你要是用到了Blade模板繼承，你就可以省掉那些一樣板塊代碼的數(shù)量；
為什么要使用它？因?yàn)榉奖憔S護(hù)，也節(jié)省代碼量。 多說無(wú)益，我們拿出事實(shí)說話。
這里，我們先拿出一個(gè)Bootstrap的樣式，代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap與Laravel的測(cè)試集合</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" >
<h2>你好!這里是陳柴的系統(tǒng)</h2>
<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" >網(wǎng)站名</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" >首頁(yè)</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">
<h3>關(guān)于我</h3>
<h6>我的照片:</h6>
<div class="fakeimg">這邊插入圖像</div>
<p>關(guān)于我的介紹..</p>
<h4>鏈接</h4>
<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">
<h3>標(biāo)題</h3>
<h6>副標(biāo)題</h6>
<div class="fakeimg">圖像</div>
<p>一些文本..</p>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想！??！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！</p>
<br>
<h3>標(biāo)題</h3>
<h6>副標(biāo)題</h6>
<div class="fakeimg">圖像</div>
<p>一些文本..</p>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想！?。〔锁B教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想！?。?lt;/p>
</div>
</div>
</div>
<div class="jumbotron text-center" >
<p>底部?jī)?nèi)容</p>
</div>
</body>
</html>當(dāng)然了，如果你想要使用Bootstrap的框架，那你實(shí)現(xiàn)要把Bootstrap框架的文件下載好，然后存放于public目錄下，才能使用。
然后我們?cè)趘iew目錄下創(chuàng)建一個(gè)名為Bstp.blade.php的視圖，將上面Bootstrap的代碼復(fù)制過去。
做到這，我們繼續(xù)在view目錄下午創(chuàng)建一個(gè)目錄，命名為Bstp，在往里面寫入一個(gè)文件，命名為Bstp.blade.php
這個(gè)時(shí)候，我們就要思考怎么才能繼承這個(gè)模板了。這個(gè)很簡(jiǎn)單，只需要用到上面我們提到的那幾個(gè)單詞知識(shí)點(diǎn)即可。
<!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" >
<h2>你好!這里是陳柴的系統(tǒng)</h2>
<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" >網(wǎng)站名</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" >首頁(yè)</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">
<h3>關(guān)于我</h3>
<h6>我的照片:</h6>
<div class="fakeimg">這邊插入圖像</div>
<p>關(guān)于我的介紹..</p>
<h4>鏈接</h4>
<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">
<h3>標(biāo)題</h3>
<h6>副標(biāo)題</h6>
<div class="fakeimg">圖像</div>
<p>一些文本..</p>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。。〔锁B教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！</p>
<br>
<h3>標(biāo)題</h3>
<h6>副標(biāo)題</h6>
<div class="fakeimg">圖像</div>
<p>一些文本..</p>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。。〔锁B教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。。〔锁B教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！</p>
</div>
</div>
</div>
@show
@section('footer')
<div class="jumbotron text-center" >
<p>底部?jī)?nèi)容</p>
</div>
@show
</body>
</html>@section(‘nav')
…
@show
@show
這里代表的是一個(gè)繼承某個(gè)代碼塊的開始以及結(jié)束，section開始，show結(jié)束，nav定義這個(gè)可以修改的代碼塊名字。方便子模板調(diào)用。
@yield(‘title')
這里和上面的定義差不多，唯一不同的是，他是不可擴(kuò)展的，也就是說，原來這個(gè)div有多大，你就只能多大，而上面那個(gè)不一樣，他的內(nèi)容只要超過了原本的div，那么原本的div會(huì)隨之增大
。@extends(‘Bstp')
這個(gè)代表著，你這個(gè)子模板繼承于誰(shuí)，我這里寫的是這個(gè)子模板繼承于view目錄下的Bstp.blade.php。
@parent
這個(gè)代表著，把你原本的一起繼承過來，覆蓋。
說了這么多，如果還不理解，那咱們就行動(dòng)證明
首先，我們驗(yàn)證第一個(gè)@extends
然后，打開我們view目錄下的Bstp目錄里的Bstp.blade.php文件，然后輸入@extends，并且給他賦予一個(gè)控制器和路由
子模板代碼如下:
@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，獲得效果如下
這里，我們是不是已經(jīng)輸出出來了？
(這里有個(gè)點(diǎn)值得注意，因?yàn)槲以?code><title></title>里輸入了@yield(‘title'),然后在，Bstp下又給他賦了個(gè)值，叫首頁(yè)，所以標(biāo)題就是首頁(yè))
然后如果我們想要把中間那塊“關(guān)于我”，“標(biāo)題”，“鏈接”，去掉怎么辦?
好，那么我們只需要，在Bstp.blade.php文件里(Bstp下的)，輸入一個(gè)空的
@section('box')
@stop即可，效果如下:
你們看，是不是沒有了?
那么好，問題又來了，有的小伙伴想在原來的基礎(chǔ)上再新增一點(diǎn)東西，能讓這個(gè)不消失，而且也能顯示新增的東西，要怎么辦呢？
這個(gè)問題僅僅只需要一個(gè)@parent
如下:
看完上述內(nèi)容，你們對(duì)怎么在Laravel框架中使用Blade模板有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼