TODO：Laravel 使用blade标签布局页面


本文主要介绍Laravel的标签使用，统一布局页面。主要用到到标签有@yield，@ stack，@extends，@section，@stop，@push。使代码精简、提高页面下载速度、表现和内容相分离。站在开发者的角度看，web页面都可以提取相同的内容进行分离，让每个页面代码尽显主题内容，简洁明快，干扰信息少。

1. Laravel的blade标签代码格式是”命名.blade.php”，这样是不是很简洁。

2. 创建统一布局风格的代码模板main.blade.php，使用HTML5的代码结构，有标签header，main，footer，35行的代码完成一个风格的布局.


3. 新建一个页面a.blade.php，使用这个@extends引用母模板main.blade.php，layouts是模板的路径。


4. 从这两个页面代码我们可以看到Laravel的blade基本使用方法，在子页面定义@section定义代码，在母模版使用@yield，就可以输出对应的代码，充分体系了Laravel的简洁优雅。

5. 在main.blade.php我们看到了@stack，这个要怎么用了，只要在a.blade.php创建@push即可使用了，进行更多的扩展。

6. 这是简单标签使用，和统一页面布局使用，希望对你有启蒙作用。

wxgzh:ludong86

TODO：Laravel 使用blade标签布局页面的更多相关文章

  1. 仿联想商城laravel实战---2、后端页面搭建（验证码如何在页面中使用）

    仿联想商城laravel实战---2.后端页面搭建(验证码如何在页面中使用) 一.总结 一句话总结: 放在img里面,img的src就是生产验证码的控制器路径: img src="/admi ...

  2. h1、h2、h3标签及strong标签对页面seo的影响

    今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...

  3. 仿联想商城laravel实战---3、前端页面搭建（什么情况下需要路由接参数）

    仿联想商城laravel实战---3.前端页面搭建(什么情况下需要路由接参数) 一.总结 一句话总结: 比如访问课程的时候,不同的课程(比如云知梦),比如访问不同的商品,比如访问不同的分类 //商品详 ...

  4. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  5. HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...

  6. blade模版之页面的嵌套

    blade模版 相关关键词:@section @yield @extends @extends @show @parent(追加内容而不是覆盖) 父页面view\layout\f.blade.php ...

  7. android 布局页面文件出错故障排除Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V

    今天在看布局文件的时候出现 android 布局页面文件出错故障排除Exception raised during rendering: java.lang.System.arraycopy([CI[ ...

  8. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  9. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. DailyTick 开发实录 —— 开始

    2009 年我读了李笑来老师的<把时间当朋友>,知识了柳比歇夫的时间记录法.当时激动坏了,马上动手实践起来.一开始的时候,是用一个小本子,走到哪儿都带着.完成一件事,就记录一下花费的时间. ...

  3. Java基础Map接口+Collections

    1.Map中我们主要讲两个接口 HashMap  与   LinkedHashMap (1)其中LinkedHashMap是有序的  怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...

  4. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  5. dubbox微服务实例及引发的“血案”

    Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. 主要核心部件: Remoting: 网络通信框架 ...

  6. angular 源码分析 1 - angularInit()

    angularjs 是个神奇的框架,由于我的好奇,想了解她的内部工作原理,只能一步一步的走进她,靠近她,和她深入的交流. angularjs 的入口是什么样子的呢?一起掀起她的盖头吧. 在这里我只讲方 ...

  7. 关于font-family

    在设置页面字体的时候,你会发现在 font-family 属性中会设置好多个字体,想看懂它们都是什么字体吗?不好意思,我不是搞设计的,我也不知道.那么,现在写的东西,只是对于一个前端人员来说,要了解的 ...

  8. JavaScript 正则表达式语法

    定义 JavaScript定义正则表达式有两种方法. 1.RegExp构造函数 var pattern = new RegExp("[bc]at","i"); ...

  9. Redis配置文件redis.conf

    1.地址 2.Units单位 1 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 2 对大小写不敏感 3.includes包含

  10. ReSharper详解Index0

    JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...