上一篇 Ruby 程序员学习 laravel 框架笔记 (10)-blade layout 有讲到关于 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>&copy; 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>&copy; 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

results matching ""

    No results matching ""