所有页面都会继承共有的模板，所以作为一个模板，至少得具备，因为一个网站，头部，底部，还有一些公共的 CSS 和 JS 都是可以复用的，不用每个页面都去引入，只需要继承模板，即可。
在 view 目录下，创建 layout 目录，在 layout 目录里面创建 app.blade.php 文件中，写入代码：
<html>
<head>
<title>@yield('title', '个人博客')</title>
@include('layout.style')
</head>
<body>
{{-- 在这里引入头部样式 --}}
@include('layout.header')
<div class="container-fluid px-0">
@yield('content')
</div>
{{-- 在这里引入底部样式 --}}
@include('layout.footer', ['date' => date('Y-m-d H:i:s')])
{{-- 在这里引入外部JS --}}
@include('layout.script')
</body>
</html>
再在 view 目录下，创建 index 目录，在 layout 目录里面创建 index.blade.php 文件,写入代码：
@extends('layout.app')
@section('title', '首页')
@section('style')
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
<style>
</style>
@endsection
@section('content')
<div class="jumbotron jumbotron-fluid px-0">
<div class="container text-center text-white">
<h4 class="display-6">基于Laravel的博客项目</h4>
<p class="lead">项目仅用于学习</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="card">
<div class="card-body">
@foreach(range(1, 10) as $v)
<div class="article-body">
<div>
<span class="article-author">小明</span>
<span class="article-time">6个月前</span>
</div>
<h2 class="font-weight-bold my-3 article-title">博客博客博客博客博客</h2>
<div class="article-des">博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述博客描述</div>
<div>
<a href="#" class="badge badge-warning mt-3 article-category">前端</a>
</div>
</div>
<hr>
@endforeach
<nav class="d-flex justify-content-center mt-4">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-sm-3 p-0">
@include('common.right-card', [
'imgUrl' => 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa593d002-6538-40f4-a5dc-1ed95835ac1e%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693903082&t=8fd8a3b0c06bed250ce989baee7aa861',
'title' => '博客网站',
'content' => '一个用来学习Laravel的博客项目, 基于Bootstrap4.0开发',
'count' => '121',
])
</div>
</div>
</div>
@endsection
@section('script')
<script>
</script>
@endsection
完善各个拆分出去的子组件
在 layout 目录下创建 header.blade.php 子组件文件，用来完整的头部导航：
<header class="header">
<div class="container bg-light d-flex justify-content-between align-items-center">
<div class="d-flex">
<a class="logo">Laravel</a>
<form class="form-inline my-2 my-lg-0 ml-3">
<input class="form-control form-control-sm" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-sm btn-outline-success ml-2 px-4" type="submit">搜索</button>
</form>
</div>
<div class="right-btn">
<button type="button" class="btn btn-sm btn-primary">登录</button>
<button type="button" class="btn btn-sm btn-outline-success ml-2">注册</button>
</div>
</div>
</header>
在 layout 目录下创建 footer.blade.php 子组件文件，用来完整的底部：
<footer class="footer">
<div class="blue">
<div class="container text-white">终身学习</div>
</div>
<div class="des">
网站由 Luwnto 完成，基于 PHP 框架 Laravel 和 CSS 框架 Bootstrap 开发。
</div>
</footer>
在 layout 目录下创建 script.blade.php 子组件文件，用来完整外部JS：
{{-- 在这里引入第三方js --}}
<script src="{{ asset('js/jquery.slim.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
{{-- 在这里写去全局js --}}
<script>
</script>
@yield('script')
在 layout 目录下创建 style.blade.php 子组件文件，用来完整外部样式：
{{-- 在这里引入外部样式 --}}
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/common.css') }}">
{{-- 在这里写一写全局的样式 --}}
<style>
</style>
@yield('style')
然后在 view 目录下，创建 common 目录，在 common 目录里面创建 right-card.blade.php 文件，写入代码：
<style>
.left-card > h5 {
font-size: 1.15rem !important;
font-weight: 600;
}
.left-card > p {
font-size: 14px;
margin-top: 20px;
}
.left-card > button {
color:#3273dc;
border-color: #3273dc;
}
.left-card > button:hover {
color: white;
background: #3273dc;
}
</style>
<div class="card">
<img src="{{ $imgUrl }}" class="card-img-top" alt="...">
<div class="card-body left-card">
<h5 class="card-title text-center">{{ $title }}</h5>
<p class="card-text">{{ $content }}</p>
<hr>
<button class="btn btn-outline-primary btn-sm w-100">文章数量 {{ $count }}</button>
</div>
</div>
同时在 public 目录下，创建 模板公共 CSS 目录，在 CSS 目录里面引入 模板需要的CSS，并且在 public 目录下，创建 模板公共 JS 目录，在 JS 目录里面引入 模板需要的JS。如下图：
控制器方法
来到 IndexController.php 首页控制器，引入首页模板，代码如下：
/****
* 博客首页
*/
public function index()
{
return view('index.index');
}
