laravel5.1框架基础之Blade模板继承简单使用方法分析


Posted in PHP onSeptember 05, 2019

本文实例讲述了laravel5.1框架基础之Blade模板继承简单使用方法。分享给大家供大家参考,具体如下:

模板继承什么用? 自然是增强基础页面的复用,有利于页面文档的条理,也便于更改多处使用的内容,如页头、页脚

1.用法概要

  • @include('common.header') 包含子视图
  • @extends('article.common.base') 继承基础模板
  • @yield('content') 视图占位符
  • @section('content') @endsection继承模板后向视图占位符中填入内容
  • {{-- 注释 --}} Blade模板中注释的使用

2.具体使用

2.1 新建Article基础模板base.blade.php

直接使用Bootstrap4模板代码及CDN,新建视图基础模板
路径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" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
{{-- 包含页头 --}}
@include('article.common.header')
{{-- 继承后插入的内容 --}}
@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 即可继承模板,实现复用

新建主页文件在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 如何访问?

需要路由以及控制器配合,这里简单只用路由实现,详细内容请点击,以及接下来的其它文段

在app/Http/routes.php 路由注册文件写上如下代码

Route::get('/',function(){
  return view('article.index');
});

启动你的配置的laravel跑的服务器,比如我在目录地址下php artisan serve

浏览器输入 : localhost:8000,即可看到效果图

3. 效果图

laravel5.1框架基础之Blade模板继承简单使用方法分析

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" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" 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>

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

PHP 相关文章推荐
用PHP连接Oracle for NT 远程数据库
Oct 09 PHP
动态新闻发布的实现及其技巧
Oct 09 PHP
来自PHP.NET的入门教程
Oct 09 PHP
收藏的PHP常用函数 推荐收藏保存
Feb 21 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
Apr 07 PHP
PHP合并数组+与array_merge的区别分析
Aug 01 PHP
php ci框架中加载css和js文件失败的原因及解决方法
Jul 29 PHP
PHP防盗链的基本思想 防盗链的设置方法
Sep 25 PHP
CodeIgniter框架验证码类库文件与用法示例
Mar 18 PHP
关于PHP中协程和阻塞的一些理解与思考
Aug 11 PHP
Laravel基础-关于引入公共文件的两种方式
Oct 18 PHP
PHP实现创建以太坊钱包转账等功能
Apr 21 PHP
Laravel5.4框架中视图共享数据的方法详解
Sep 05 #PHP
php生成微信红包数组的方法
Sep 05 #PHP
Laravel框架创建路由的方法详解
Sep 04 #PHP
Laravel框架查询构造器 CURD操作示例
Sep 04 #PHP
Yii框架操作cookie与session的方法实例详解
Sep 04 #PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
Sep 04 #PHP
Yii框架响应组件用法实例分析
Sep 04 #PHP
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
flash用php连接数据库的代码
2011/04/21 PHP
php中设置多级目录session的问题
2011/08/08 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
js查错流程归纳
2012/05/04 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
给Python入门者的一些编程建议
2015/06/15 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
通过cmd进入python的实例操作
2019/06/26 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
双十佳事迹材料
2014/01/29 职场文书
小学生操行评语
2014/04/22 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
限期整改通知书
2015/04/22 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python