充分利用 Blade：Laravel 的模板引擎

什么是模板引擎？

模板引擎就像一个工具，可以帮助您将内容和布局分开。这使您的代码更干净且更易于管理。您无需将 HTML 与数据混合，而是创建定义内容外观的模板，然后引擎负责填写详细信息。

什么是刀片？

Blade 是 Laravel 自己的模板引擎，它旨在让您的生活更轻松。 Blade 模板存储在 resources/views 目录中，每个模板都有一个 .blade.php 扩展名。语法简单明了，允许您轻松地将 HTML 与 PHP 混合。例如：

<h1 id="Hello-name">Hello, {{ $name }}!</h1>

但是 Blade 不仅仅用于显示数据。您还可以在模板中添加逻辑，例如循环和条件。这是一个例子：

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

看看根据用户是否登录显示不同的内容是多么容易？下次您需要循环访问用户列表时，请尝试使用 Blade 的 @foreach 指令。它很简单并且可以让你的代码保持整洁。

模板继承

Blade 最好的功能之一是它如何帮助您重用布局。您可以为您的网站创建一个主模板，然后只需填写每个页面的唯一内容。这是一个简单的例子：

<!-- layout.blade.php -->


    <title>@yield('title')</title>


    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1 id="Welcome-to-the-Home-Page">Welcome to the Home Page!</h1>
@endsection

通过使用@extends，您可以链接到布局，而@section允许您使用特定内容填充占位符。这使您的代码保持干燥（不要重复）并且超级易于管理。 Blade 简化了您的工作流程，让您能够更加专注于重要的事情——构建出色的 Web 应用程序。

叶片组件

刀片组件就像 UI 的小构建块。将它们想象成乐高积木——您可以创建界面的一个可重复使用的小部分，并可以将其卡入您需要的任何位置。这使您的代码更干净且更易于维护。

您可以定义一次组件并在整个应用程序中使用它。需要一个在不同页面上看起来相同的按钮吗？为它创建一个 Blade 组件！更好的是，您可以将属性传递给这些组件，使它们灵活且适应性强。

这是一个按钮组件的简单示例：

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

您可以使用组件类使组件动态化。这允许您传入类型或类等属性来自定义按钮的行为或样式。

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Get The Most From Blade: Laravel"></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false">

@csrf @method('PUT') Submit

需要更多定制的东西吗？您可以创建自己的 Blade 指令以实现可重用逻辑。

例如，假设您经常需要格式化日期。您可以像这样定义自定义指令：

<h1 id="Hello-name">Hello, {{ $name }}!</h1>

其他特点

Blade 配备了一些非常方便的功能，可以让您作为开发人员的生活更加顺利。让我们深入研究其中的一些。

管理资产 URL

需要链接您的 CSS 或 JavaScript 文件吗？ asset() 辅助函数可以满足您的需求。它会为您的资源生成正确的 URL，因此您不必担心路径：

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

处理空数组或集合

Blade 的 @forelse 指令在处理空数组或集合时是一个救星。它可以让您循环遍历项目，还可以优雅地处理没有项目的情况：

<!-- layout.blade.php -->


    <title>@yield('title')</title>


    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1 id="Welcome-to-the-Home-Page">Welcome to the Home Page!</h1>
@endsection

有条件的内容显示

Blade 提供了多种指令来根据条件显示内容：

@isset：检查变量是否已设置
@empty：检查变量是否为空
@unless：与 if 类似，但相反
这是使用 @isset 的示例：

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

防范 XSS

Blade 自动转义输出以保护您的应用程序免受 XSS（跨站脚本）攻击。但有时，您可能想要输出原始 HTML。在这种情况下，请使用 {!! ！！}：

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Get The Most From Blade: Laravel"></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false">

@csrf @method('PUT') Submit

高级使用

需要包含包含 Blade 语法的原始 HTML 或 JavaScript？使用 @verbatim 指令阻止 Blade 尝试解析它：

// In a service provider
Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});

// Usage in Blade
@datetime($dateVariable)

使用 API？ Blade 可以轻松地直接在模板中渲染 JSON 数据：

<link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D">

如果您使用 Livewire，Blade 可以与其无缝协作。您可以将 Blade 组件与 Livewire 组件一起使用，以实现动态的交互式 UI，而无需编写太多 JavaScript。

@once 指令确保一段代码只运行一次。 Blade 允许您创建根据您传​​递的数据进行调整的动态组件。这对于灵活、可重用的 UI 片段来说非常有用：

@forelse ($items as $item)
    <p>{{ $item }}</p>
@empty
    <p>No items found.</p>
@endforelse

@error 指令可帮助您轻松显示特定字段的错误消息：

@isset($variable)
    <p>{{ $variable }}</p>
@endisset

---

当我第一次开始使用 Blade 时，我对自己有多少选择感到有点迷失，但不久之后，整个世界就向我敞开了。现在我无法想象没有它的多功能功能的编码。我希望这篇文章能帮助您找到进入这个令人惊叹的模板引擎的方法。