Laravel - Blade 模板：初学者指南

你好，有抱负的网页开发者们！今天，我们将深入 Laravel 的 Blade 模板引擎的奇妙世界。如果你之前从未编写过代码，也不用担心——我将作为你友好的向导，一步一步地带你进行这次旅程。

Laravel - Blade Templates

什么是 Blade？

Blade 是 Laravel 的强大模板引擎。把它想象成一个神奇的工具，可以帮助我们创建动态和可重用的 HTML 模板。这就像有一个超级聪明的助手，可以在你的网页中填入真实数据。

为什么使用 Blade？

它简单且易于学习
它可以使你的代码更清洁、更易读
它帮助你避免重复（记住，开发者们喜欢偷懒——但这是一种好的偷懒方式！）

现在，让我们卷起袖子开始吧！

创建 Blade 模板布局的步骤

1. 创建一个主布局

首先，我们需要创建一个主布局。这就像是你网站的骨架——它包含在每一页上都保持不变的部件。

在 resources/views 目录下创建一个名为 layout.blade.php 的新文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>我的超级网站</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 我的超级网站</p>
</footer>
</body>
</html>

让我们分解一下：

@yield('title')：这告诉 Blade，“嘿，我们稍后会为每个页面填入标题。”
@yield('content')：这就是每个页面的主要内容将会放置的位置。

2. 创建子模板

现在，让我们创建一个使用我们布局的子模板。创建一个名为 home.blade.php 的新文件：

@extends('layout')

@section('title', '首页')

@section('content')
<h2>欢迎来到我的超级网站！</h2>
<p>这是首页的内容。</p>
@endsection

这里发生了什么：

@extends('layout')：这告诉 Blade 使用我们的 layout.blade.php 文件作为基础。
@section('title', '首页')：这填入了我们之前留空的标题。
@section('content')：这是我们放置这个页面独特内容的地方。

3. 显示数据

Blade 在显示数据方面非常出色。假设我们想要展示一个水果列表。我们将更新我们的 home.blade.php：

@extends('layout')

@section('title', '首页')

@section('content')
<h2>欢迎来到我的超级网站！</h2>
<p>这是首页的内容。</p>

<h3>我们的水果选择：</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>抱歉，我们的水果已经售罄！</p>
@endif
@endsection

在这个例子中：

@if 和 @else：这些让我们在模板中做出决策。
@foreach：这帮助我们在水果列表中循环。
{{ $fruit }}：双花括号告诉 Blade 显示变量的值。

4. 使用 Blade 组件

Blade 组件就像是网站的乐高积木。它们是可以跨不同页面重用的部件。让我们创建一个简单的按钮组件。

在 resources/views/components/button.blade.php 中创建一个新文件：

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

现在我们可以在 home.blade.php 中使用这个按钮：

@extends('layout')

@section('title', '首页')

@section('content')
<h2>欢迎来到我的超级网站！</h2>
<p>这是首页的内容。</p>

@component('components.button', ['type' => 'success'])
点击我！
@endcomponent
@endsection

这将创建一个带有文本 "点击我！" 和成功样式的按钮。

Blade 指令速查表

以下是一些常见的 Blade 指令的便捷表格：

指令	用途
@if	条件语句
@else	@if 的备选
@elseif	另一个条件
@foreach	循环遍历数组
@for	for 循环
@while	while 循环
@switch	switch 语句
@yield	在布局中定义一个区域
@section	在布局中定义内容
@extends	指定使用哪个布局
@include	包含另一个视图
@auth	检查用户是否已认证
@guest	检查用户是否是访客

记住，熟能生巧！不要害怕尝试这些指令并创建你自己的模板。在你意识到之前，你将成为一个 Blade 高手，像热刀切黄油一样轻松处理 HTML！

在我多年的教学经验中，我发现最好的学习方式是通过实践。那么，为什么不尝试使用我们学到的知识创建一个简单的博客布局呢？从一个主布局开始，创建首页、关于页面和博客文章页，并使用 Blade 的强大功能让你的代码保持清洁和 DRY（Don't Repeat Yourself）。

快乐编码，愿 Blade 与你同在！?

Credits: Image by storyset