创建局部视图

注意，操作之前，先运行以下命令：

cd ~/Code/sample
npm run watch-poll

头部视图文件

resources/views/layouts/_header.blade.php

  

    

      Sample App
      

        

          
帮助
          
登录
        
      
    
  

头部视图文件命前面加了下划线 _，这样做是为了指定该视图文件为局部视图，为局部视图增加前缀下划线是『约定俗成』的做法，方便了其它人快速地理解该文件的实际作用。

底部视图文件

resources/views/layouts/_footer.blade.php

为了防止编辑器自动下载代码中的图片，从而造成代码错误，故意给 加了空格，在使用的时候请删掉空格。

  

    
      < img class="brand-icon" src="https://dn-phphub.qbox.me/uploads/images/201612/12/1/iq7WQc2iuW.png?imageView2/1/w/34/h/34">
      
        优帆远扬 | 创造不息，交付不止
      
    
    

      

        
关于
      
    
  

样式优化

针对底部视图进行样式优化。

resources/assets/sass/app.scss

...
/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;

  a {
    color: #555;
  }

  a:hover {
    color: #222;
  }

  small {
    float: left;
  }

  ul {
    float: right;
    list-style: none;

    li {
      float: left;
      margin-left: 15px;
    }
  }

  img.brand-icon {
    width: 17px;
    height: 17px;
  }

  .slogon {
    font-size: 13px;
    font-weight: bold;
  }
}

引入局部视图

在 default 视图中引用这两个视图。

resources/views/layouts/default.blade.php

  
    
    
  
  
    @include('layouts._header')

    

      

        @yield('content')
        @include('layouts._footer')
      
    
  

@include 是 Blade 提供的视图引用方法，可通过传参一个具体的文件路径名称来引用视图。

刷新页面：http://sample.app/