本文實(shí)例講述了Laravel框架Blade模板及模板繼承用法.分享給大家供大家參考,具體如下:
本章知識(shí)點(diǎn)主要如下:
- Blade模板簡(jiǎn)介
- Blade模板繼承使用
NO.1Blade模板簡(jiǎn)介
問(wèn): 什么是Blade模板?
答: Blade模板是Laravel提供一個(gè)既簡(jiǎn)單又強(qiáng)大的模板引擎;
和其他流行的PHP模板引擎不一樣,他并不限制你在視圖里使用原生PHP代碼;
所有Blade視圖頁(yè)面都將被編譯成原生的PHP代碼并緩存起來(lái),除非你的模板文件被修改,否則不會(huì)重新編譯。
而這些都意味著B(niǎo)lade不會(huì)給我們?cè)黾尤魏呜?fù)擔(dān)。
NO.2Blade模板繼承使用
先說(shuō)一下這里我們會(huì)用到的知識(shí)點(diǎn)
- section
- yield
- extends
- parent
問(wèn): Blade模板繼承使用的優(yōu)勢(shì)在哪?為什么要使用它?
答:
Blade模板繼承的優(yōu)勢(shì)在于,你寫(xiě)一個(gè)管理系統(tǒng)或者別的系統(tǒng)的時(shí)候,如果某部分樣式不變,你可能會(huì)因?yàn)檫@個(gè)寫(xiě)一個(gè)又一個(gè)頁(yè)面,就很麻煩,而且代碼量多,做的時(shí)間久,別人接手也會(huì)抓狂,代碼觀賞性不強(qiáng)。但是你要是用到了Blade模板繼承,你就可以省掉那些一樣板塊代碼的數(shù)量;
為什么要使用它?因?yàn)榉奖憔S護(hù),也節(jié)省代碼量。 多說(shuō)無(wú)益,我們拿出事實(shí)說(shuō)話。
這里,我們先拿出一個(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" 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" >網(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">
h2>關(guān)于我/h2>
h5>我的照片:/h5>
div class="fakeimg">這邊插入圖像/div>
p>關(guān)于我的介紹../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>標(biāo)題/h2>
h5>副標(biāo)題/h5>
div class="fakeimg">圖像/div>
p>一些文本../p>
p>菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想!??!/p>
br>
h2>標(biāo)題/h2>
h5>副標(biāo)題/h5>
div class="fakeimg">圖像/div>
p>一些文本../p>
p>菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。。〔锁B(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想!?。?p>
/div>
/div>
/div>
div class="jumbotron text-center" style="margin-bottom:0">
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ù)制過(guò)去。
做到這,我們繼續(xù)在view目錄下午創(chuàng)建一個(gè)目錄,命名為Bstp,在往里面寫(xiě)入一個(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" 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" >網(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">
h2>關(guān)于我/h2>
h5>我的照片:/h5>
div class="fakeimg">這邊插入圖像/div>
p>關(guān)于我的介紹../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>標(biāo)題/h2>
h5>副標(biāo)題/h5>
div class="fakeimg">圖像/div>
p>一些文本../p>
p>菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想!??!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。。?p>
br>
h2>標(biāo)題/h2>
h5>副標(biāo)題/h5>
div class="fakeimg">圖像/div>
p>一些文本../p>
p>菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!菜鳥(niǎo)教程,學(xué)的不僅是技術(shù),更是夢(mèng)想!?。?p>
/div>
/div>
/div>
@show
@section('footer')
div class="jumbotron text-center" style="margin-bottom:0">
p>底部?jī)?nèi)容/p>
/div>
@show
/body>
/html>
@section(‘nav')
…
@show
@show
這里代表的是一個(gè)繼承某個(gè)代碼塊的開(kāi)始以及結(jié)束,section開(kāi)始,show結(jié)束,nav定義這個(gè)可以修改的代碼塊名字。方便子模板調(diào)用。
@yield(‘title')
這里和上面的定義差不多,唯一不同的是,他是不可擴(kuò)展的,也就是說(shuō),原來(lái)這個(gè)div有多大,你就只能多大,而上面那個(gè)不一樣,他的內(nèi)容只要超過(guò)了原本的div,那么原本的div會(huì)隨之增大
。@extends(‘Bstp')
這個(gè)代表著,你這個(gè)子模板繼承于誰(shuí),我這里寫(xiě)的是這個(gè)子模板繼承于view目錄下的Bstp.blade.php。
@parent
這個(gè)代表著,把你原本的一起繼承過(guò)來(lái),覆蓋。
說(shuō)了這么多,如果還不理解,那咱們就行動(dòng)證明
首先,我們驗(yàn)證第一個(gè)@extends
然后,打開(kāi)我們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)輸出出來(lái)了?
(這里有個(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è)空的
即可,效果如下:
你們看,是不是沒(méi)有了?
那么好,問(wèn)題又來(lái)了,有的小伙伴想在原來(lái)的基礎(chǔ)上再新增一點(diǎn)東西,能讓這個(gè)不消失,而且也能顯示新增的東西,要怎么辦呢?
這個(gè)問(wèn)題僅僅只需要一個(gè)@parent
如下:
你看,左下角是不是有個(gè)abc啊。
更多關(guān)于Laravel相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《Laravel框架入門(mén)與進(jìn)階教程》、《php優(yōu)秀開(kāi)發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門(mén)教程》、《php+mysql數(shù)據(jù)庫(kù)操作入門(mén)教程》及《php常見(jiàn)數(shù)據(jù)庫(kù)操作技巧匯總》
希望本文所述對(duì)大家基于Laravel框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- laravel5.1框架基礎(chǔ)之Blade模板繼承簡(jiǎn)單使用方法分析
- 分享5個(gè)非常有用的Laravel Blade指令
- Laravel 5框架學(xué)習(xí)之Blade 簡(jiǎn)介
- laravel 5 實(shí)現(xiàn)模板主題功能(續(xù))
- laravel 5 實(shí)現(xiàn)模板主題功能
- Laravel框架基礎(chǔ)語(yǔ)法與知識(shí)點(diǎn)整理【模板變量、輸出、include引入子視圖等】
- Laravel實(shí)現(xiàn)通過(guò)blade模板引擎渲染視圖
- PHP的Laravel框架中使用AdminLTE模板來(lái)編寫(xiě)網(wǎng)站后臺(tái)界面
- Laravel框架中Blade模板的用法示例
- Laravel中的Blade模板引擎示例詳解
- Laravel框架之blade模板新手入門(mén)教程及小技巧
- Laravel 5.1 框架Blade模板引擎用法實(shí)例分析