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 相关文章推荐
在数据量大(超过10万)的情况下
Jan 15 PHP
php执行sql语句的写法
Mar 10 PHP
火车采集器 免费版使出收费版本功能实现原理
Sep 17 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
Nov 12 PHP
让PHP更快的提供文件下载的代码
Jun 13 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
Dec 15 PHP
实例讲解PHP验证邮箱是否合格
Jan 28 PHP
使用laravel指定日志文件记录任意日志
Oct 17 PHP
php和js实现根据子网掩码和ip计算子网功能示例
Nov 09 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
Mar 02 PHP
laravel框架select2多选插件初始化默认选中项操作示例
Feb 18 PHP
PHP autoload使用方法及步骤详解
Sep 05 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 处理图片的类实现代码
2009/10/23 PHP
理解PHP中的stdClass类
2014/04/18 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python 正则式使用心得
2009/05/07 Python
Python序列操作之进阶篇
2016/12/08 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
捐书活动总结
2014/05/04 职场文书
评先进个人材料
2014/12/29 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Java数组详细介绍及相关工具类
2022/04/14 Java/Android