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 相关文章推荐
快速配置PHPMyAdmin方法
Jun 05 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
Sep 30 PHP
php Static关键字实用方法
Jun 04 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
Aug 09 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
Jul 01 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
Jul 03 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
Oct 23 PHP
phpMyAdmin安装并配置允许空密码登录
Jul 04 PHP
Laravel中如何增加自定义全局函数详解
May 09 PHP
PHP二维关联数组的遍历方式(实例讲解)
Oct 18 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
Mar 22 PHP
php文件上传原理与实现方法详解
Dec 20 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
PHP 中dirname(_file_)讲解
2007/03/18 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
php Static关键字实用方法
2010/06/04 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python列表去重的二种方法
2014/02/14 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
大学生个人事迹材料
2014/01/21 职场文书
教师简历自我评价
2014/02/03 职场文书
岗位廉政承诺书
2014/03/27 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
个人合伙协议书范本
2014/10/14 职场文书
依法行政工作汇报
2014/10/28 职场文书
调解书格式范本
2015/05/20 职场文书
走进科学观后感
2015/06/18 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书