本文實例講述了laravel5.1框架基礎(chǔ)之Blade模板繼承簡單使用方法。分享給大家供大家參考，具體如下：
模板繼承什么用？ 自然是增強基礎(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|標題在此/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">注冊/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 即可繼承模板，實現(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 如何訪問？
需要路由以及控制器配合，這里簡單只用路由實現(xiàn)，詳細內(nèi)容請點擊,以及接下來的其它文段
在app/Http/routes.php 路由注冊文件寫上如下代碼
Route::get('/',function(){
return view('article.index');
});
啟動你的配置的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框架入門與進階教程》、《php優(yōu)秀開發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計入門教程》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家基于Laravel框架的PHP程序設(shè)計有所幫助。
您可能感興趣的文章:- 分享5個非常有用的Laravel Blade指令
- Laravel 5框架學(xué)習(xí)之Blade 簡介
- laravel 5 實現(xiàn)模板主題功能（續(xù)）
- laravel 5 實現(xiàn)模板主題功能
- Laravel框架基礎(chǔ)語法與知識點整理【模板變量、輸出、include引入子視圖等】
- Laravel框架Blade模板簡介及模板繼承用法分析
- Laravel實現(xiàn)通過blade模板引擎渲染視圖
- PHP的Laravel框架中使用AdminLTE模板來編寫網(wǎng)站后臺界面
- Laravel框架中Blade模板的用法示例
- Laravel中的Blade模板引擎示例詳解
- Laravel框架之blade模板新手入門教程及小技巧
- Laravel 5.1 框架Blade模板引擎用法實例分析
