laravel5.1框架基础之Blade模板继承简单使用方法分析
本文实例讲述了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模板继承简单使用方法分析的更多相关文章
- laravel中Blade模板继承
Blade模板继承 和 区块 <!-- 文件保存于 resources/views/layouts/app.blade.php --> <html> <head> ...
- Laravel5.1学习笔记8 Blade模板
简介 模板继承 定义一个页面布局模板 扩展一个页面布局模板 展示数据 控制语法的结构 Service Injection 扩展 Blade 简介 Blade 是 Laravel 提供的一个既简单又 ...
- tp框架---View视图层---模板继承(举例说明)
当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ? 先看一下注意事项: (1)每个区块由<block></block>标签组成 ( ...
- tp框架视图层view——模板继承
在做网站的时候,每个网站都有头部和尾部,也就是菜单栏和页脚,网站的各个子网页的头部和尾部基本就是一样的,所以tp框架提供了一种模板继承的方法: 1.首先在View的Main文件夹下建立一个base.h ...
- django基础知识之模板继承:
模板继承 模板继承可以减少页面内容的重复定义,实现页面内容的重用 典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板中填 ...
- laravel框架总结(二) -- blade模板引擎
## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...
- Django框架(六) Django之模板继承
模版导入和继承 模版导入 一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面 <% include "a.html" %> 可以引用多次 模板,i ...
- 测开之路三十:Flask基础之jinja2模板继承
实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...
- tornado框架基础08-sqlalchemy表关系和简单登录注册
01 一对一表关系 Module 需要先创建对应的 Module ,这里采用之前建立好的 User 和 UserDetails relationship from sqlalchemy.orm imp ...
随机推荐
- Python【每日一问】29
问: [基础题]:给一个不多于 5 位的正整数,要求:一.求它是几位数,二.逆序印出各位数字[提高题]:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加 ...
- 在ensp上通过FTP进行文件操作
接下来的实验,我们使PC-1为用户端,需要访问FTP Server,不允许用户端上传到server. 在R1上员工不能上传文件到server,但是可以下载文件.同时R1也需要作为用户端从server下 ...
- 第十五节:Asp.Net Core中的各种过滤器(授权、资源、操作、结果、异常)
一. 简介 1. 说明 提到过滤器,通常是指请求处理管道中特定阶段之前或之后的代码,可以处理:授权.响应缓存(对请求管道进行短路,以便返回缓存的响应). 防盗链.本地化国际化等,过滤器用于横向处理业务 ...
- Angular的Observable可观察对象(转)
原文:https://blog.csdn.net/qq_34414916/article/details/85194098 Observable 在开始讲服务之前,我们先来看一下一个新东西——Obse ...
- K8S学习笔记之使用Fluent-bit将容器标准输入和输出的日志发送到Kafka
0x00 概述 K8S内部署微服务后,对应的日志方案是不落地方案,即微服务的日志不挂在到本地数据卷,所有的微服务日志都采用标准输入和输出的方式(stdin/stdout/stderr)存放到管道内,容 ...
- AQS原理解析 AbstractQueuedSynchronizer
AQS实现原理 https://blog.csdn.net/ym123456677/article/details/80381354 https://www.cnblogs.com/keleli ...
- 解决 win10 家庭版环境下 MySQL 的ODBC驱动下载及安装
目录 写在前面 下载安装 1.首先,我们需要去官网下载ODBC驱动. 配置 1.打开控制面板.查看方式:选择大图标. 2.选择管理工具的ODBC 数据源(64 位). 3.在驱动程序目录下.我们可以看 ...
- 2019 满帮java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.满帮等公司offer,岗位是Java后端开发,因为发展原因最终选择去了满帮,入职一年时间了,也成为了面试官,之 ...
- 爬虫--selenium之 chromedriver与chrome版本映射表(最新至v2.46版本chromedriver)
本文主要整理了selenium的chromedriver与chrome版本映射表,并且持续更新中..... 1.selenium之 chromedriver与chrome版本映射表(最新至v2.46版 ...
- Matlab命令模式
命令模式(Command)将命令封装为对象,实现命令发送者和命令接收者的解耦.线程池.MVC框架用到了命令模式,本文根据以下类图,用matlab实现命令模式. Invoker.m (传递命令对象Inv ...