Laravel 的模板引擎支持 React、Vue 和其他库。然而，开发者最喜欢的还是 Laravel Blade 引擎的强大功能，它可以快速创建模块化、可重用的视图。Blade 可以让你毫不费力地扩展布局、定义版块，并使用控制结构生成数据驱动的内容。
这篇实践文章将探讨 Blade 是什么、如何工作以及如何增强你的 Laravel 应用程序。
使用 Laravel Blade 所需的一切
Laravel Blade 是 Laravel 框架的默认模板引擎。它能让你在 HTML 代码中直接使用变量、循环、条件语句和其他 PHP 功能。要创建 Blade 文件，只需在 Laravel 项目的 resources/views 目录下创建扩展名为 .blade.php 的文件，定义 Blade 视图，然后在这些文件中构建你喜欢的动态页面。
为什么要使用 Blade？
Blade的一个主要优点是它的模块化代码组织。Blade可以将代码组织成可重复使用的模块，您可以轻松地添加、删除或更新这些模块，而不会影响应用程序的其他部分。
代码封装是 Blade 的另一个优势。Blade 可帮助封装功能，使测试、调试和代码维护更加易于管理。这种方法有利于大型应用程序，因为没有组织的应用程序很快就会变得难以管理。
Blade 的模板引擎性能卓越，是我们测试过的速度最快的 PHP 框架。该引擎会将所有 Blade 视图编译成纯 PHP 代码，然后缓存起来，直到你修改它们。这种方法提高了渲染速度和整体性能。
如何使用 Laravel Blade
在本教程中，我们将创建一个 Laravel 应用程序来体验 Blade 模板的实际应用。学习定义和扩展 Blade 布局、在 Blade 视图之间传递数据、使用各种可用的控制结构，以及创建自己的 Blade。
先决条件
要学习本教程，请确保您具备以下条件：
- 熟悉 PHP
- 已安装 Composer。运行
composer -V验证系统中是否安装了 Composer。
请查看完整的教程代码，以便在工作时获得指导。
如何创建 Laravel 应用程序
要创建 Laravel 应用程序示例，请运行：
composer create-project laravel/laravel my-app
按照终端上的提示完成应用程序的制作。
接下来，进入应用程序目录，使用此命令为其提供服务：
cd my-app php artisan serve
点击终端中的链接，在浏览器上打开 Laravel 欢迎页面。
如何定义布局
布局可让您配置网络应用程序的各个部分，以便在多个页面之间共享。例如，如果您的应用程序在各个页面中使用一致的导航栏和页脚，那么一次创建比为每个页面重新创建更有效。
在学习逐步说明之前，请先看看下面的骨架演示。
创建无布局网站的代码如下所示。它要求你为每个页面重新编写导航栏和页脚代码。
<!-- Page 1 --> <nav>. . . </nav> Content for page 1 <footer> . . . </footer>
<!-- Page 2 --> <nav>. . . </nav> Content for page 2 <footer> . . . </footer>
相反，您可以使用布局轻松构建应用程序，在单个代码块中共享相同的组件：
<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>
一旦定义了布局，就可以在任何页面上使用：
<!-- Page 1 or Page n --> <main-layout> Content for page n </main-layout>
在旧版本的 Laravel 中，你必须使用模板继承来创建布局。然而，当公司添加了组件功能后，创建强大的布局就变得容易多了。
要使用 Laravel Blade 创建一个新布局，首先要运行这条命令来创建布局的组件：
php artisan make:component Layout
该命令会生成一个新的 layout.blade.php 文件，该文件位于 resources/views/ 目录下名为 components 的新文件夹中。打开该文件并粘贴以下代码：
<html>
<head>
<title>{{ $title ?? 'Example Website' }}</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
<nav>
<h3>Welcome to my website</h3>
<hr>
</nav>
{{ $slot }}
<footer>
<hr />
© 2023 example.com
</footer>
</body>
</html>
这段代码将创建一个具有简单导航栏和页脚的布局组件。 slot 函数定义了在扩展布局组件时传递主要内容的位置。
如何扩展布局
您可以使用标签在 blade 视图中轻松导入组件。此方法同样适用于你之前创建的布局组件。
要查看扩展布局的效果，请打开默认的 resources/views/welcome.blade.php 文件，并用以下代码替换该文件的内容：
<x-layout> <div> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p> <button class="btn">Get Started</button> </div> </x-layout>
这种方法可以更新欢迎页面以使用布局组件，同时传递一个标题元素和一段模拟文本作为其内容。重新加载之前打开的链接，查看更改。
在布局定义中，请注意如果代码不传递标题数据，则会呈现默认为 “Example Website” 的标题数据。您可以通过 <x-slot name="slotName" /> 代码在视图中以命名槽的形式传递这些数据，在本例中就是 <x-slot name="title" /> 。用下面的代码更新 welcome.blade.php 文件，然后重新加载页面：
<x-layout> <x-slot name="title"> Home | Example Website </x-slot> <div> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p> <button class="btn">Get Started</button> </div> </x-layout>
接下来，添加一些样式来增强应用程序的外观。在 /public/css 目录下新建一个 app.css 文件，然后粘贴该文件中的代码。
完成所有这些更新后，您在 http://127.0.0.1:8000/ 上预览应用程序时应该会看到以下输出。
Hello world
如何加入后台数据
在前面的示例中，你通过插槽在组件和视图之间轻松地共享了数据。不过，从数据库或其他远程源加载数据有更好的方法。
在这种情况下，可以直接从路由器定义中加载和传递数据，并像访问前例中的命名槽一样访问数据。为此，请打开 routes/web.php 文件，并用以下代码替换其内容：
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$name = "John Doe";
return view('welcome', ['name' => $name]);
});
在上面的代码中，您更新了网络路由，将名称 ” John Doe ” 传递给了欢迎视图。现在，像这样在 blade 视图中访问这个值：
<div>
Hello, {{ $name }}
<!-- Outputs: Hello, John Doe -->
</div>
您可以使用这种方法从数据库加载数据。例如，假设您有一个包含待办事项列表的待办事项表。使用 DB facade 加载这些待办事项，并将它们传递给视图：
<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$todos = DB::table('todos')->get();
return view('welcome', ['todos' => $todos]);
});
不过，如果您没有数据库，可更新网络入口路由以传递静态待办事项数组。打开 routes/web.php 文件，用下面的代码更新默认 ( / ) 路由：
Route::get('/', function () {
$todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
return view('welcome', ['todos' => $todos]);
});
用下面的代码替换 welcome.blade.php 文件的内容，以 JSON 编码数组的形式访问待办事项。
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<p>{{ json_encode($todos) }}</p>
<!-- Output: ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>
如何使用控制快捷键
Blade 模板引擎还支持多个指令，以有条件地呈现各种数据类型。例如，要遍历传给欢迎视图的 to-dos 返回数组，可在 welcome.blade.php 文件中粘贴以下代码，应用 foreach 循环：
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<ul>
@foreach ($todos as $todo)
<li>{{ $todo }}</li>
@endforeach
</ul>
</x-layout>
这一更改将以无序列表的形式显示待办事项，就像下面的截图一样。
无序列表中的待办事项
要构建条件语句块，可使用 @if 、 @elseif 、 @else 和 @endif 指令。例如
@if (count($todos) === 1) <p>I have one task!</p> @elseif (count($todos) > 1) <p>I have multiple tasks!</p> @else <p>I don't have any tasks!</p> @endif
用上述代码替换 welcome.blade.php 文件的内容。各种 if-else 指令会计算待办事项，并在不同情况下显示自定义信息。如果您的待办事项数组中包含多个任务，您就会在浏览器中看到输出 “I have multiple tasks!”（我有多个任务！）。
你可以在 Laravel 文档中找到更多支持的指令。
如何构建自定义扩展
您也可以编写与上例类似的自定义指令。要探索这种技术，请创建一个自定义文本截断指令。
首先，运行以下命令创建一个新的服务提供器：
php artisan make:provider TruncateTextServiceProvider
该命令会生成一个新的服务提供器文件，文件名为 app/Providers/TruncateTextServiceProvider.php。打开该文件并将其内容替换为
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class TruncateTextServiceProvider extends ServiceProvider
{
public function register()
{
//
}
public function boot()
{
Blade::directive('truncate', function ($expression) {
list($text, $length) = explode(',', $expression);
return "<?php echo Str::limit($text, $length); ?>";
});
}
}
代码导入了 Blade Facade，并定义了一个名为 @truncate 的新自定义指令。该指令接受两个参数： $text 和 $length 。它使用 Str::limit() 方法将文本截断到指定长度。
最后，将服务提供者添加到 config/app.php 配置文件中的提供者数组中，注册服务提供者：
'providers' => [ // Other service providers App\Providers\TruncateTextServiceProvider::class, ],
在 Blade 模板（welcome.blade.php）中使用自定义指令，通过 @truncate 语法调用它。
<div>
@truncate('Lorem ipsum dolor sit amet', 10)
<!-- Outputs: Lorem ipsu... -->
</div>
小结
本文探讨了 Laravel Blade 如何帮助你简化开发流程，同时为网络应用程序创建模块化和可重用的视图。然而，你的 Laravel 开发之旅不应该就此结束。
评论留言