Laravel Blade模板引擎创建布局全面教程

Laravel新手一般都会先接触到Blade，它是创建和管理网站HTML布局的最简单方法，可以帮助生成简洁的设计和主题，帮助复用相同的代码（例如页眉和页脚），从而节省时间并保持代码的条理性。下文主要分享创建主布局、页面拆分、扩展布局等使用Blade构建Laravel应用的前端。

一、基本Laravel Blade模板结构示例

可以将Blade模板想象成用乐高积木搭建模型。首先，你需要一个底板（你的布局文件），它将所有内容整合在一起，然后在上面添加不同的组件（你的视图）。

基础页面 (layout.blade.php)：

<!DOCTYPE html>
<html>
<head>
<title>@yield(‘page_title’, ‘默认标题’)</title>
</head>
<body>
<header>@yield(‘header_content’)</header>
<main>
@yield(‘main_content’)
</main>
<footer>@yield(‘footer_content’, ‘默认页脚文本’)</footer>
</body>
</html>

关键部分：

@yield() – 这些是等待填充的占位符；
默认内容（可选）– 如果未提供某个部分，则显示此内容；
通用元素 – 例如所有页面使用的 CSS/JS 文件。

二、前提条件

在开始之前，请确保已安装 PHP 8.2+ 和 Composer：

1、安装Laravel项目

可以通过运行以下命令来创建一个新的Laravel项目：

composer create-project laravel/laravel laravel-blade-layouts

然后进入项目目录：

cd laravel-blade-layouts

相关参考：《Laravel安装教程》

2、启动本地开发服务器

项目设置完成后，可以启动Laravel内置的开发服务器：

php artisan serve

在浏览器中访问http://127.0.0.1:8000。应该会看到Laravel欢迎页面。

三、设置路由

让我们定义要创建的页面：首页和联系页面。默认情况下，Laravel可能有一个如下所示的默认路由：

Route::get(‘/’, function () {
return view(‘welcome’);
});
让我们来改变一下。
打开routes/web.php文件并将其内容替换为以下内容：
<?php
使用Illuminate\Support\Facades\Route;
Route::get(‘/’, function () {
返回视图(‘pages.home’);
});
Route::get(‘/contact’, function () {
return view(‘pages.contact’);
});

这些路由指示Laravel在用户访问首页 (/) 时加载 resources/views/pages/home.blade.php，在用户访问 /contact 时加载 resources/views/pages/contact.blade.php。

但在这些路由生效之前，我们需要实际创建这些视图以及它们将使用的布局。

四、创建视图目录结构

在 resources/views/ 目录下，我们将创建三个文件夹：

layouts ：用于存放我们的主模板
includes ：用于存放可重用部分，例如页眉、页脚和元标签
pages：用于存放各个页面，例如首页和联系页面

进入 resources/views/ 目录并创建以下三个文件夹：

现在开始将所需的文件填充到这些文件夹中。

五、创建Blade包含文件

Blade包含文件有助于将布局拆分成可重用的组件，它可以保持代码简洁并遵循DRY（Don’t Repeat Yourself，不要重复自己）原则。。

接下来创建一个头部区域、一个页眉栏和一个页脚。

1、创建 <head> 部分

这将包含元数据、标题和 CSS 链接。在 resources/views/includes 目录下创建一个名为 head.blade.php 的文件，并将以下内容粘贴到该文件中：

<title>Laravel Blade Layout</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #f4f4f4;
padding: 1em;
text-align: center;
}
main {
padding: 2em;
}
</style>

这是每个网页“<head>”部分的标准代码。它执行一些重要操作，例如：

设置页面的字符编码（确保字母正确显示）
使页面在手机和电脑上都能正常显示
添加一个显示在浏览器标签页中的标题
（可选）添加Bootstrap CSS样式

2、创建页眉（导航栏）

现在，在同一个 includes/ 文件夹中，创建 header.blade.php 文件，并将以下代码粘贴到该文件中：

<h2>My Site Header</h2>
<nav>
<a href=”/”>Home</a> |
<a href=”/contact”>Contact</a>
</nav>

现在有了一个简单的Bootstrap导航栏，可以链接到我们的首页和联系我们页面。

3、创建页脚

仍然在includes/目录下，创建footer.blade.php文件，并粘贴以下代码：

<p>© 2025 Laravel Blade Example</p>

六、创建主布局文件

现在将这些包含的文件合并到一个主布局文件中。在 layouts/ 文件夹中，创建一个名为 default.blade.php 的文件：

<!DOCTYPE html>
<html>
<head>
@include(‘includes.head’)
</head>
<body>
<header>
@include(‘includes.header’)
</header>
<main>
@yield(‘content’)
</main>
<footer>
@include(‘includes.footer’)
</footer>
</body>
</html>