Laravel Blade模板

发布时间：2026-01-16 浏览：91

Laravel

类型：后端开发

Laravel是一款基于PHP的开源Web开发框架，由TaylorOtwell创建并于2011年发布。提供了一套简洁、富有表现力的语法，能够通过编写较少的代码来实现复杂的任务。本套Laravel教程内容详尽，涵盖从Laravel的基本概念介绍、环境安装、配置设置到深入应用开发的各个方面。无论是新手入门还是进阶提升，都能在本教程中找到相应的指导和灵感。

百科词条访问网站

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

安装Laravel项目

然后进入项目目录：

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>

解释：@include() 用于引入局部文件，例如 header、footer 和 head 部分；@yield('content') 是一个占位符。每个页面都会使用 @section('content') 将其独特的内容插入到此处。