本文實(shí)例講述了laravel5.1框架基礎(chǔ)之Blade模板繼承簡(jiǎn)單使用方法。分享給大家供大家參考，具體如下：
模板繼承什么用？ 自然是增強(qiáng)基礎(chǔ)頁面的復(fù)用，有利于頁面文檔的條理，也便于更改多處使用的內(nèi)容，如頁頭、頁腳
1.用法概要
@include('common.header') 包含子視圖@extends('article.common.base') 繼承基礎(chǔ)模板@yield('content') 視圖占位符@section('content') @endsection繼承模板后向視圖占位符中填入內(nèi)容{{-- 注釋 --}} Blade模板中注釋的使用2.具體使用
2.1 新建Article基礎(chǔ)模板base.blade.php
直接使用Bootstrap4模板代碼及CDN,新建視圖基礎(chǔ)模板
路徑resources/views/article/common/base.blade.php
!DOCTYPE html>html lang="en">
head>
title>Artilce|標(biāo)題在此/title>
meta charset="utf-8">
meta name="viewport" content="width=device-width, initial-scale=1">
meta http-equiv="x-ua-compatible" content="ie=edge"> link rel="stylesheet" rel="external nofollow" rel="external nofollow" >
/head>
body>
{{-- 包含頁頭 --}}
@include('article.common.header')
{{-- 繼承后插入的內(nèi)容 --}}
@yield('content')
{{-- 包含頁腳 --}}
@include('article.common.footer')
script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js">/script>
script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js">/script>
/body>
/html>
2.2. 建子視圖文件 頁頭和頁腳
頁頭文件 resources/views/article/common/header.blade.php
nav class="navbar navbar-light bg-faded">
div class="container">
a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" >Articles/a>
ul class="nav navbar-nav">
li class="nav-item active">
a class="nav-link" href="/article" rel="external nofollow" >首頁 span class="sr-only">(current)/span>/a>
/li>
li class="nav-item">
a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" >寫文章/a>
/li>
/ul>
ul class="nav navbar-nav pull-right">
li class="nav-item">
a href="" class=" rel="external nofollow" rel="external nofollow" btn btn-primary-outline">登錄/a>
/li>
li class="nav-item">
a href="" class=" rel="external nofollow" rel="external nofollow" btn btn-success-outline">注冊(cè)/a>
/li>
/ul>
/div>
/nav>
頁腳文件 resources/views/article/common/footer.blade.php
div class="footer"
style="width: 100%;height: 300px;background-color: #00B388;padding-top: 50px;">
div class="container">
h1 style="color: #FFFFFF;font-size: 1.5em;">Articles/h1>
/div>
/div>
2.3 即可繼承模板，實(shí)現(xiàn)復(fù)用
新建主頁文件在resources/views/article/index.blade.php
@extends('article.common.base')
@section('content')
div class="container" style="height: 500px;text-align: center;">
h1 style="position: absolute;left: 35%;top: 30%;">繼承模板的主頁搞定了！/h1>
{{-- 這里是Blade注釋 --}}
/div>
@endsection
2.4 如何訪問？
需要路由以及控制器配合，這里簡(jiǎn)單只用路由實(shí)現(xiàn)，詳細(xì)內(nèi)容請(qǐng)點(diǎn)擊,以及接下來的其它文段
在app/Http/routes.php 路由注冊(cè)文件寫上如下代碼
Route::get('/',function(){
return view('article.index');
});
啟動(dòng)你的配置的laravel跑的服務(wù)器，比如我在目錄地址下php artisan serve
瀏覽器輸入 ： localhost:8000，即可看到效果圖
3. 效果圖
articles效果圖|色彩 #00B388
X bootstrap4起始模板代碼
bootstrap4文檔
!DOCTYPE html> html lang="en"> head> !-- Required meta tags always come first --> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> meta http-equiv="x-ua-compatible" content="ie=edge"> !-- Bootstrap CSS --> link rel="stylesheet" rel="external nofollow" rel="external nofollow" > /head> body> h1>Hello, world!/h1> !-- jQuery first, then Bootstrap JS. --> script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js">/script> script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js">/script> /body> /html>
更多關(guān)于Laravel相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Laravel框架入門與進(jìn)階教程》、《php優(yōu)秀開發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php+mysql數(shù)據(jù)庫(kù)操作入門教程》及《php常見數(shù)據(jù)庫(kù)操作技巧匯總》
希望本文所述對(duì)大家基于Laravel框架的PHP程序設(shè)計(jì)有所幫助。
標(biāo)簽：湘西 海北 文山 濮陽 梅河口 廈門 惠州 黔東
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《laravel5.1框架基礎(chǔ)之Blade模板繼承簡(jiǎn)單使用方法分析》，本文關(guān)鍵詞 laravel5.1,框架,基礎(chǔ),之,Blade,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
