# 11. 使用 @include 来整理 view 上一篇 [Ruby 程序员学习 laravel 框架笔记 (10)-blade layout](https://www.rails365.net/articles/ruby-cheng-xu-yuan-xue-xi-laravel-kuang-jia-bi-ji-10-blade) 有讲到关于 layout 的知识,这一篇是对上一篇的细化,对上面的代码进行优化整理。 而使用的 view 的指令是 `@include`。 回到 `resources/views/layouts` 目录,找到 layout 文件 `master.blade.php`,它的内容我现在就不全列出来了,因为实在太长了,只列出 `body` 标签的内容,如下: ``` ... <body> <div class="container"> <div class="header clearfix"> <nav> <ul class="nav nav-pills float-right"> <li class="nav-item"> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> <h3 class="text-muted">Project name</h3> </div> @yield('body') <footer class="footer"> <p>© Company 2017</p> </footer> </div> <!-- /container --> </body> ... ``` 现在我们要把这段代码整理一下。 下面请睁大你的眼睛看清楚,以 `@yield('body')` 这条指令为分割线,分别以它上面和下面的内容抽成两个文件,也就是说 `class` 等于 `header` 这个 div 部分抽成 `menu.blade.php` 文件,而 `footer` 这个标签部分抽成 `footer.blade.php`,这两个文件都放到 `resources/views/layouts` 目录下。 目录结构如下: ``` resources/views/layouts ├── app.blade.php ├── footer.blade.php ├── master.blade.php └── menu.blade.php ``` 最后 `resources/views/layouts/menu.blade.php` 的内容如下: ``` // resources/views/layouts/menu.blade.php <div class="header clearfix"> <nav> <ul class="nav nav-pills float-right"> <li class="nav-item"> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> <h3 class="text-muted">Project name</h3> </div> ``` 而 `resources/views/layouts/footer.blade.php` 的内容如下: ``` // resources/views/layouts/footer.blade.php <footer class="footer"> <p>© Company {{ date('Y') }}</p> </footer> ``` 而在 `master` layout 如何引用这两个文件呢,很简单,就是使用 `@include` 指令。 最终 `master.blade.php` 的 body 部分的内容会如下面这样: ``` ... <body> <div class="container"> @include('layouts.menu') @yield('body') @include('layouts.footer') </div> <!-- /container --> </body> ... ``` 效果是一样,但是代码文件被很好地整理了起来,看着也舒服。 完结。 下一篇:[Ruby 程序员学习 laravel 框架笔记 (12)-Blade if/else/unless/or](https://www.rails365.net/articles/ruby-cheng-xu-yuan-xue-xi-laravel-kuang-jia-bi-ji-12-blade)