页面布局组件

布局前言

在上一篇呢，我们已经可以正常访问 Laravel 的页面了，这一篇章，我们来学习一下如何组织整个页面布局。在将这一篇内容之前呢，我们先来看下网站的一般布局入什么样子呢？就以我们这个Laravel CatchAdmin 开源后台的官网来说明一下页面布局-Laravel入门教程

官网有一个公共的导航栏，就是不论他进入哪个页面，这个导航其实是不会变化的
变化的实际是内容区域

页面布局的作用说的直白点，就是将公共的部分抽离出来，因为公共的部分呢，是所有页面共享的。我们将会在下面通过一个例子来说明。为了很好的说明这个问题啊，我们需要再创建一个 contact 页面。因为布局的作用只有在页面较多的情况下才能体现出来。先来看一下没有使用布局组件的情况下

首先创建 resources/views/contact.blade.php 文件，然后定义下路由

php

Route::get('/contact', function () {
    // 使用 view 函数来渲染 contact blade 页面
    return view('contact');
});

resources/views/contact.blade.php 内容如下

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
    <h1>这是个人联系页面</h1>
</body>
</html>

然后通过访问 虚拟域名/contact 访问会正常输出页面，这里就不做展示了。这样的情况下，我们只能通过修改浏览的地址来访问这两个页面，所以现在我们需要一个导航，可以在各自的页面互相访问。为了更直观一点，我们在创建一个 resources/views/home.blade.php 文件吧，作为项目首页

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
<h1>这是首页</h1>
</body>
</html>

修改一下对应的路由，把首页访问的 welcome 的页面换成自己的 home 页面

php

Route::get('/', function () {
    return view('welcome') 
    return view('home'); 
});

ok，这样我们就有三个页面了，分别是

resources/views/home.blade.php
resources/views/profile.blade.php
resources/views/contact.blade.php

然后我们在三个页面创建导航栏目，可以同意点击在分别访问它们。

home.blade.phpprofile.blade.phpcontact.blade.php

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
    <nav>  // [!code ++]
        <a href="/">首页</a> // [!code ++]
        <a href="/profile">个人信息</a> // [!code ++]
        <a href="/contact">联系我们</a> // [!code ++]
    </nav> // [!code ++]
    <h1>这是首页</h1>
</body>
</html>

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
    <nav> // [!code ++]
        <a href="/">首页</a> // [!code ++]
        <a href="/profile">个人信息</a> // [!code ++]
        <a href="/contact">联系我们</a> // [!code ++]
    </nav> // [!code ++]
    <h1>这是个人信息页面</h1>
</body>
</html>

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
    <nav> // [!code ++]
        <a href="/">首页</a> // [!code ++]
        <a href="/profile">个人信息</a> // [!code ++]
        <a href="/contact">联系我们</a> // [!code ++]
    </nav> // [!code ++]
    <h1>这是个人联系页面</h1>
</body>
</html>

我们在三个页面分别都添加了 <nav> 导航，这样的话就可以导航各个页面了，如图所示 Laravel 入门学习，页面布局

到这里，你有没有看出这有啥问题呢？在页面展示上的确没有任何问题，但是在代码组织上出现了很大的问题。你一定也想到了，如果需要在加一个页面，那么 <nav> 导航需要修改四个页面，随着数量的变多，nav 需要不停被全量修改。那么有没有办法将这部分代码抽成公共部分呢？答案是可以。通过 Laravel 的 blade layout 组件即可

实现布局

首先在 resources/views 目录下创建一个 components 目录，然后在 components 目录下创建一个 layout.blade.php 文件。我们需要将上面三个页面的公共部分抽离出来，抽离出来的 html 如下，三个页面不同的地方在内容区域，也就是页面展示的东西。代码如下

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
    <nav>
        <a href="/">首页</a>
        <a href="/profile">个人信息</a>
        <a href="/contact">联系我们</a>
    </nav>
    <!-- 内容插槽 -->
    {{ $slot}}
</body>
</html>

这里呢使用一个 slot 插槽。稍微来理解一下，Layout 组件写好之后，组件的使用是和 html 标签一样的，有开关合标签

TIP

插槽文档

html

<x-layout>// 标签内的内容会被替换到插槽内</x-layout>

当然这个概念可以先不用管，你只需要知道最后这个插槽会被替换成对应页面的内容区域即可。

重新写一下这三个页面布局，来看下更新后的页面代码，是不是变得很简洁了。

home.blade.phpprofile.blade.phpcontact.blade.php

html

<x-layout>
  // 这里就替换 {{$slot}}
  <h1>这是首页</h1>
</x-layout>

html

<x-layout>
  // 这里就替换 {{$slot}}
  <h1>这是个人信息页面</h1>
</x-layout>

html

<x-layout>
  // 这里就替换 {{$slot}}
  <h1>这是个人联系页面</h1>
</x-layout>

这里要说明的一点哈，对于 blade 模板组件呢，你需要手动创建名为components目录，这里面的组件都会被 Laravel 框架自动加载。然后关于组件的名称，例如教程使用是 layout.blade.php, 那么你到页面上是用的时候，就要以x- + layout这样使用。为了加强一下大家的理解，我们将导航在变成一个组件。创建一个 resources/views/components/nav.blade.php 文件，然后内容如下

html

<nav>
  <a href="/">首页</a>
  <a href="/profile">个人信息</a>
  <a href="/contact">联系我们</a>
</nav>

创建好了之后呢，需要修改 layout.balde.php, 讲里面的导航代码替换成 <x-nav> 组件即可

html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
</head>
<body>
    <nav> // [!code --]
        <a href="/">首页</a> // [!code --]
        <a href="/profile">个人信息</a> // [!code --]
        <a href="/contact">联系我们</a> // [!code --]
    </nav> // [!code --]
    <x-nav /> // [!code ++]
    <!-- 内容插槽 -->
    {{ $slot}}
</body>
</html>

回到浏览器，访问下，还是会看到和之前一样儿页面。very nice👍 Laravel 入门学习，页面布局

这一节我们学习了如何创建布局，还学习了 Laravel 中 Blade 组件的使用。

页面布局组件 ​

布局前言 ​

实现布局 ​

页面布局组件

布局前言

实现布局