本文实例讲述了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;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. 效果图

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程序设计有所帮助。

laravel5.1框架基础之Blade模板继承简单使用方法分析的更多相关文章

  1. laravel中Blade模板继承

    Blade模板继承 和 区块 <!-- 文件保存于 resources/views/layouts/app.blade.php --> <html> <head> ...

  2. Laravel5.1学习笔记8 Blade模板

    简介 模板继承 定义一个页面布局模板 扩展一个页面布局模板 展示数据 控制语法的结构 Service Injection 扩展 Blade   简介 Blade 是 Laravel 提供的一个既简单又 ...

  3. tp框架---View视图层---模板继承（举例说明）

    当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ? 先看一下注意事项: (1)每个区块由<block></block>标签组成 ( ...

  4. tp框架视图层view——模板继承

    在做网站的时候,每个网站都有头部和尾部,也就是菜单栏和页脚,网站的各个子网页的头部和尾部基本就是一样的,所以tp框架提供了一种模板继承的方法: 1.首先在View的Main文件夹下建立一个base.h ...

  5. django基础知识之模板继承:

    模板继承 模板继承可以减少页面内容的重复定义,实现页面内容的重用 典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板中填 ...

  6. laravel框架总结(二) -- blade模板引擎

    ## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...

  7. Django框架(六) Django之模板继承

    模版导入和继承 模版导入 一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面 <% include "a.html" %> 可以引用多次 模板,i ...

  8. 测开之路三十：Flask基础之jinja2模板继承

    实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...

  9. tornado框架基础08-sqlalchemy表关系和简单登录注册

    01 一对一表关系 Module 需要先创建对应的 Module ,这里采用之前建立好的 User 和 UserDetails relationship from sqlalchemy.orm imp ...

随机推荐

  1. ASP.Net Core使用分布式缓存Redis从入门到实战演练

    一.课程介绍 人生苦短,我用.NET Core!缓存在很多情况下需要用到,合理利用缓存可以一方面可以提高程序的响应速度,同时可以减少对特定资源访问的压力.  所以经常要用到且不会频繁改变且被用户共享的 ...

  2. 深度学习 NI-DL 框架

    NI-DL 应用框架:图像分类,目标检测,分割提取. 底层:TensorFlow,Keras,Cuda,C/C++ 上层:C#.NET Winform [图像分类] 识别一张图片是否为某个类型的物体/ ...

  3. Atlassian JIRA 插件开发之二 安装和创建项目

    安装参考 https://developer.atlassian.com/server/framework/atlassian-sdk/install-the-atlassian-sdk-on-a-w ...

  4. 页面嵌入iframe关于父子传参调用

    1.首先来说一下iframe是干什么用的 IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架),通俗点说就是在一 ...

  5. AntDesign vue学习笔记（九）自定义文件上传

    第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用cus ...

  6. c++ 二维数组定义 二维数组首地址查询

    #include <iostream> using namespace std; int main() { ][] = { {,,}, {,,} }; cout << &quo ...

  7. ubuntu docker 搭建 mongodb，开启授权访问 redis，mysql mssql 备份还原

    命令安装docker 如果您想从Ubuntu存储库安装docker版本,则可以运行下面的apt命令. sudo apt install docker.io等到安装完成后,您可以启动Docker并使用s ...

  8. [CF24A]Ring road(2019-11-15考试)

    题目大意 给你一个\(n\)个点的环,每条边有方向,改变第\(i\)条边的方向代价为\(w_i\),问将其改为强连通图的最小代价.\(n\leqslant100\) 题解 求出把边全部改为顺时针和全部 ...

  9. JWT与RBAC权限模型

    JWT JWT是什么? Json web token (JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC7519),该token被设计为紧凑且安全的,特别适用于分布式站点 ...

  10. 完全图解 HTTPS

    安全基础 我们先来看下数据在互联网上数据传递可能会出现的三个比较有代表性的问题,其实后面提到的所有方法,都是围绕解决这三个问题而提出来的. 窃听 伪造 否认 对称密钥加密 假设 A 正在通过互联网向  ...