3分钟短文：Laravel模板重用，构造你的页面布局

引言

编写代码的时候，我们总是追求写的最少，做的最多。能重用的就要重用， 
   
  避免后期更改一处修改，处处修改的困境。而对于模板文件内的HTML内容， 
   
  也完全可以如此构造。

本期就来说说模板的页面布局。 
 

单区块布局

很显然，我们不想每写一个页面，都要把logo，导航栏，尾部声明都重新写一遍，那样页面多了起来之后， 
   
  改一次头部文件，或者更换logo，或者修改网站的声明，都要把所有页面重新修改一次。

维护起来简直是灾难！ 
 

所以laravel blade模板提供了 layout 布局。在目录  
  resources/views/layouts/ 
   内添加blade模板文件即可。 
 

比如我们创建一个  
  app.blade.php 
   布局文件，并输入以下内容： 
 


   
   <!doctype html>
 
    
    
<html lang="en">
 
    
    
    <head>
 
    
    
        <meta charset="UTF-8">
 
    
    
        <title>Welcome to Laravel</title>
 
    
    
    </head>
 
    
    
    <body>
 
    
    
        @yield('content')
 
    
    
    </body>
 
    
    
</html>

其中， 
  @yield 
   指令用于区分当前模板内的section块的名称。我们现在开始使用这个布局。 
   
  修改上一章我们测试的  
  welcome.blade.php 
   页面模板文件： 
 


   
   @extends('layouts.app')
 
    
    

@section('content')
 
    
    
    <h1>Laravel Helps You Build Stuff Faster.</h1>
 
    
    
    <p>Learn, teach, hack, and make friends with developers in your city.</p>
 
    
    
@endsection

其中， 
  @extends 
   指令表名使用的布局文件，就是我们上面创建的文件。其中， 
  @section...@endsection 
   部分， 
   
  指定了该区域块所要渲染的布局内的位置。 
 

在浏览器打开根目录地址，正常路由到  
  welcome.blade.php 
   视图就可以看到输出页面了。 
 

多区块布局

既然单个区块的布局可以正常渲染，毫无疑问，多区块也没有问题。 
   
  通常页面会有一个侧边栏sidebar，和主体部分。对于头部和尾部的内容，往往是全局的内容， 
   
  而导航栏内可能就是动态变化的，根据用户权限进行选择性地展示。

我们把布局文件  
  layouts/app.blade.php 
   文件再增加一些内容： 
 


   
   <div>
 
    
    
    @yield('content')
 
    
    
</div>
 
    
    
<div>
 
    
    
    @section('advertisement')
 
    
    
        <p>Score some Laravel swag in our store!</p>
 
    
    
    @show
 
    
    
</div>

使用了  
  @show 
   指令，其实是一个快捷方式，等同于下面的书写方式： 
 


   
   @endsection
 
    
    
@yield('advertisement')

也就是关闭区块，并立即输出该块内容。上面的布局我们解决了一个场景问题，就是加入在侧边栏有一个广告位， 
   
  不同的页面路由会追加不同的内容，在模板内我们可以使用  
  @parent 
   指令，将内容追加到声明的区块内。 
 

在  
  welcome.blade.php 
   模板文件内实现下面的代码： 
 


   
   @extends('layouts.app')
 
    
    

@section('content')
 
    
    
<h1>Laravel Helps You Build Stuff Faster.</h1>
 
    
    
@endsection
 
    
    

@section('advertisement')
 
    
    

@parent
 
    
    
<p>Laravel members always get 10% off at Tron Cafe!</p>
 
    
    

@endsection

大家注意，在区块  
  advertisement 
   包裹的区域内使用了  
  @parent 
   指令，这会把其之后的内容， 
   
  追加到区块  
  advertisement 
   内，而不是覆盖区块布局的内容。 
 

写在最后

本文通过laravel模板布局的指令介绍，演示了单个和多个区块的用法， 
   
  以及如何在模板内引用布局并渲染。特别是对于区块的覆写，还有追加， 
   
  可以有效地降低代码冗余度，提升编程效能。

Happy coding :-) 
 

我是 @程序员小助手，专注编程知识，圈子动态的IT领域原创作者

本文分享自微信公众号 - 程序员小助手（mql45ea）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/4579344/blog/4651969

标签

blade

laravel

php