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 相关文章推荐
第十四节 命名空间 [14]
Oct 09 PHP
php xml文件操作实现代码(二)
Mar 20 PHP
PHP 开发环境配置(Zend Server安装)
Apr 28 PHP
PHP中数组定义的几种方法
Sep 01 PHP
使用symfony命令创建项目的方法
Mar 17 PHP
PHP查看SSL证书信息的方法
Sep 22 PHP
php实现当前页面点击下载文件的简单方法
Sep 22 PHP
PHP数组操作简单案例分析
Oct 15 PHP
php中array_slice和array_splice函数解析
Oct 18 PHP
kindeditor 加入七牛云上传的实例讲解
Nov 12 PHP
laravel框架分组控制器和分组路由实现方法示例
Jan 25 PHP
php使用fputcsv实现大数据的导出操作详解
Feb 27 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可逆加密/解密函数分享
2012/09/25 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
python文件和目录操作函数小结
2014/07/11 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
py-charm延长试用期限实例
2019/12/22 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
阿里云:Aliyun.com
2017/02/15 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
法律专业自我鉴定
2013/10/03 职场文书
营业员演讲稿
2013/12/30 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
调解员先进事迹材料
2014/02/07 职场文书
新年爱情寄语
2014/04/08 职场文书
销售经理工作检讨书
2015/02/19 职场文书
担保贷款承诺书
2015/04/30 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js