블레이드 템플릿
ㅋㅋ
- 블레이드 및 JavaScript 프레임워크
- Switch 문
- Loop
- 루프 변수
- PHP
- Stack Custom If 문
- IntroductionBlade은 Laravel에서 제공하는 간단하면서도 강력한 템플릿 엔진입니다. 다른 널리 사용되는 PHP 템플릿 엔진과 달리 Blade는 보기에서 기본 PHP 코드를 사용하는 것을 제한하지 않습니다. 모든 블레이드 뷰 파일은 기본 PHP 코드로 컴파일되고 캐시되며 수정되지 않는 한 다시 컴파일되지 않습니다. 즉, 블레이드는 기본적으로 애플리케이션에 어떤 부담도 추가하지 않습니다. 블레이드 보기 파일은 디렉터리를 사용합니다.
Define Layout
Blade의 두 가지 주요 장점은 템플릿 상속과 블록입니다. 시작하려면 간단한 예부터 시작해 보겠습니다. 먼저 "기본" 페이지 레이아웃을 살펴보겠습니다. 대부분의 웹 애플리케이션은 여러 페이지에서 동일한 레이아웃을 사용하므로 단일 블레이드 레이아웃 보기를 정의하는 것이 쉽습니다. 模板继承和区块。为方便入门，让我们先通过一个简单的例子来上手。首先，我们来研究一个「主」页面布局。因为大多数 web 应用会在不同的页面中使用相同的布局方式，因此可以很方便地定义单个 Blade 布局视图：
<!-- 保存在 resources/views/layouts/app.blade.php 文件中 -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>如你所见，该文件包含了典型的 HTML 语法。不过，请注意 @section 和 @yield 指令。 @section 指令定义了视图的一部分内容，而 @yield 指令是用来显示指定部分的内容。
现在，我们已经定义好了这个应用程序的布局，接下来，我们定义一个继承此布局的子页面。
扩展布局
在定义一个子视图时，使用 Blade 的 @extends 指令指定子视图要「继承」的视图。扩展自 Blade 布局的视图可以使用 @section 指令向布局片段注入内容。就如前面的示例中所示，这些片段的内容将由布局中的显示在布局中 @yield 指令控制显示：
<!-- 保存在 resources/views/child.blade.php 中 -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection在这个示例中， sidebar 片段利用 @parent 指令向布局的 sidebar 追加（而非覆盖）内容。 在渲染视图时，@parent 指令将被布局中的内容替换。
{tip} 和上一个示例相反，这里的
sidebar片段使用@endsection代替@show来结尾。@endsection指令仅定义了一个片段，@show则在定义的同时 立即 yield 这个片段。
Blade 视图可以使用全局 view 助手自路由中返回：
Route::get('blade', function () {
return view('child');
});组件 & 插槽
组件和插槽提供了与片段和布局类似的好处；不过组件和插槽的思维模型更易于理解。我们先来看一个可复用的「alert」组件，我们想在应用中复用它：
<!-- /resources/views/alert.blade.php -->
<div class="alert alert-danger">
{{ $slot }}
</div>{{ $slot }} 变量将包含我们想要注入到组件的内容。现在，我们使用 Blade 的 @component 指令构建这个组件：
@component('alert')
<strong>Whoops!</strong> Something went wrong!
@endcomponent有时候为一个组件定义多个插槽是很有用的。修改 alert 组件以允许其注入 「title」。命名插槽可以通过与其匹配的 「回显」 变量显示：
<!-- /resources/views/alert.blade.php -->
<div class="alert alert-danger">
<div class="alert-title">{{ $title }}</div>
{{ $slot }}
</div>现在，我们能够使用 @slot 指令向命名插槽注入内容。不在 @slot 指令内的内容都将传递给组件中的 $slot
@component('alert')
@slot('title')
Forbidden
@endslot
You are not allowed to access this resource!@endcomponent보시다시피 이 파일에는 일반적인 HTML 구문이 포함되어 있습니다. 그러나 @section 및 @yield 지시어에 유의하세요. @section 지시문은 뷰의 일부를 정의하고 @yield 지시문은 지정된 섹션의 내용을 표시하는 데 사용됩니다. 이제 이 애플리케이션의 레이아웃을 정의했으므로 다음으로 이 레이아웃을 상속하는 하위 페이지를 정의합니다. 🎜🎜🎜@section 지시문을 사용하여 레이아웃 섹션에 콘텐츠를 삽입할 수 있습니다. 이전 예에서 볼 수 있듯이 이러한 조각의 내용은 레이아웃의 @yield 지시문에 의해 표시됩니다. 🎜@component('alert', ['foo' => 'bar'])
...
@endcomponent🎜이 예에서 sidebar 조각은 < code>@parent 지시어는 레이아웃의 사이드바에 콘텐츠를 추가(덮어쓰는 대신)합니다. 뷰가 렌더링되면 @parent 지시문이 레이아웃의 콘텐츠로 대체됩니다. 🎜🎜{tip} 이전 예와 달리 여기서🎜블레이드 뷰는 전역sidebar조각은@show대신@endsection로 끝납니다.@endsection지시문은 섹션만 정의하는 반면,@show는 정의하는 동안 즉시 이 섹션을 생성합니다. 🎜
view 도우미를 사용하여 경로에서 반환될 수 있습니다: 🎜use Illuminate\Support\Facades\Blade;
Blade::component('components.alert', 'alert');🎜🎜구성 요소 및 슬롯
🎜구성 요소와 슬롯은 조각 및 레이아웃에 유사한 이점을 제공하지만 구성 요소 및 슬롯의 정신 모델은 이해하기 더 쉽습니다. 먼저 애플리케이션에서 재사용하려는 재사용 가능한 "경고" 구성 요소를 살펴보겠습니다. 🎜@alert(['type' => 'danger']) You are not allowed to access this resource!@endalert🎜
{{ $slot }} 변수에는 구성 요소에 삽입하려는 콘텐츠가 포함됩니다. 이제 Blade의 @comComponent 지시문을 사용하여 이 구성 요소를 빌드합니다. 🎜@alert You are not allowed to access this resource!@endalert🎜때때로 구성 요소에 대해 여러 슬롯을 정의하는 것이 유용할 때가 있습니다. "제목"을 삽입할 수 있도록 경고 구성 요소를 수정합니다. 명명된 슬롯은 일치하는 "echo" 변수를 통해 표시될 수 있습니다: 🎜
Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});🎜 이제 @slot 지시어를 사용하여 명명된 슬롯에 콘텐츠를 삽입할 수 있습니다. @slot 지시어 내에 없는 콘텐츠는 구성 요소의 $slot 변수로 전달됩니다: 🎜Hello, {{ $name }}.🎜🎜구성 요소에 추가 데이터 전달
때때로 구성 요소에 추가 데이터를 전달해야 할 수도 있습니다. 이 경우 포함된 데이터는 @comComponent 지시문의 두 번째 매개변수로 배열로 구성될 수 있습니다. 모든 데이터는 변경 사항으로 구성 요소 템플릿에 제공됩니다. @component 指令的第二个参数。所有的数据将作为变更提供给组件模板：
The current UNIX timestamp is {{ time() }}.给组件起别名
如果组件存储在子目录中，你可能希望给它们起个别名以方便访问。举例来说，如果一个 Blade 组件存储在 resources/views/components/alert.blade.php 中，. 就可以使用 component 方法将 components.alert 的别名命名为 alert。. 通常情况下，这一过程将在 AppServiceProvider 的 boot 方法中完成：
Hello, {!! $name !!}.一旦组件有了别名，就可以使用一条指令渲染它：
<script> var app = <?php echo json_encode($array); ?>; </script>
如果没有额外的插槽，还可以省略组件参数：
<script> var app = @json($array); </script>
显示数据
可以通过包裹在双花括号内的变量显示传递给 Blade 视图的数据。比如给出如下路由：
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider{
/**
* 引导任意应用服务。
*
* @return void
*/
public function boot()
{
Blade::withoutDoubleEncoding();
}
}就可以这样利用 name 变量显示其内容：
<h1>Laravel</h1>Hello, @{{ name }}.{tip} Blade
{{ }}语句是自动经过 PHP 的htmlspecialchars函数传递来防范 XSS 攻击的。
不限于显示传递给视图的变量的内容，你还可以显示任一 PHP 函数的结果。实际上，你可以在 Blade 的回显语句中放置你想要的任意 PHP 代码：
@verbatim
<div class="container">
Hello, {{ name }}.
</div>@endverbatim显示非转义字符
默认情况下， Blade 中 {{ }} 语句自动经由 PHP 的 htmlspecialchars 函数传递以防范 XSS 攻击。如果不希望数据被转义，可以使用下面的语法：
@if (count($records) === 1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif
{note} 在回显应用的用户提供的内容时需要谨慎小心。在显示用户提供的数据时，有必要一直使用双花括号语法转义来防范 XSS 攻击。
渲染 JSON
有时，为了初始化一个 JavaScript 变量，你可能会向视图传递一个数据，并将其渲染成 JSON：
@unless (Auth::check()) You are not signed in.@endunless
不过，你可以使用 @json Blade 指令代替手动调用 json_encode 函数：
@isset($records) // $records 被定义且不是 null... @endisset @empty($records) // $records 为空... @endempty
HTML 实体编码
默认情况下，Blade （以及 Laravel 的 e 助手）将对 HTML 实体双重编码。如果要禁用双重编码，可以在 AppServiceProvider 的 boot 中调用 Blade::withoutDoubleEncoding
@auth // 此用户身份已验证...@endauth @guest // 此用户身份未验证...@endguest
구성 요소 별칭 구성 요소가 하위 디렉터리에 저장되어 있는 경우 다음을 원할 수 있습니다. 더 쉽게 접근할 수 있도록 별칭을 부여합니다. 예를 들어 블레이드 구성 요소가 resources/views/comComponents/alert.blade.php에 저장된 경우 comComponent 메서드를 사용하여 comComponents.alert를 업데이트할 수 있습니다. 의 별칭은 alert로 지정됩니다. 일반적으로 이 프로세스는 AppServiceProvider의 boot 메서드에서 수행됩니다.
@auth('admin') // 此用户身份已验证...@endauth
@guest('admin') // 此用户身份未验证...@endguest@hasSection('navigation')
<div class="pull-right">
@yield('navigation')
</div>
<div class="clearfix">
</div>
@endif 🎜추가 슬롯이 없으면 구성요소 매개변수를 생략할 수도 있습니다. 🎜@switch($i) @case(1) First case... @break @case(2) Second case... @break @default Default case...@endswitch🎜🎜🎜
표시 data
🎜블레이드 뷰에 전달된 데이터는 이중 중괄호로 묶인 변수를 통해 표시될 수 있습니다. 예를 들어 다음 경로가 있다고 가정해 보겠습니다. 🎜@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile🎜 name 변수를 사용하여 해당 내용을 표시할 수 있습니다. 🎜@foreach ($users as $user)
@if ($user->type == 1)
@continue
@endif
<li>{{ $user->name }}</li>
@if ($user->number == 5)
@break
@endif@endforeach🎜{tip} Blade🎜뷰에 전달된 변수의 내용을 표시하는 것에만 국한되지 않고 모든 PHP 함수의 결과도 표시할 수 있습니다. 실제로 Blade의 echo 문에 원하는 PHP 코드를 넣을 수 있습니다. 🎜{{ }}문은 XSS 공격을 방지하기 위해 PHP의htmlspecialchars함수를 통해 자동으로 전달됩니다. 🎜
@foreach ($users as $user)
@continue($user->type == 1)
<li>{{ $user->name }}</li>
@break($user->number == 5)
@endforeach{{ } Blade의 } 문은 XSS 공격을 방지하기 위해 PHP의 htmlspecialchars 함수를 통해 자동으로 전달됩니다. 데이터가 이스케이프되는 것을 원하지 않으면 다음 구문을 사용할 수 있습니다. 🎜@foreach ($users as $user)
@if ($loop->first)
This is the first iteration.
@endif
@if ($loop->last)
This is the last iteration.
@endif
<p>This is user {{ $user->id }}</p>
@endforeach🎜{note} 애플리케이션에서 사용자 제공 콘텐츠를 에코할 때 주의하세요. 사용자 제공 데이터를 표시할 때 XSS 공격으로부터 보호하기 위해 항상 이중 중괄호 구문 이스케이프를 사용해야 합니다. 🎜
@foreach ($users as $user) @foreach ($user->posts as $post) @if ($loop->parent->first) This is first iteration of the parent loop. @endif @endforeach@endforeach🎜그러나
json_encode 함수를 수동으로 호출하는 대신 @json 블레이드 지시문을 사용할 수 있습니다. 🎜{{-- This comment will not be present in the rendered HTML --}}e 도우미)는 HTML 엔터티를 이중으로 인코딩합니다. 이중 인코딩을 비활성화하려면 AppServiceProvider의 boot에서 Blade::withoutDoubleEncoding 메서드를 호출하면 됩니다. 🎜@php //@endphp🎜🎜🎜🎜 🎜🎜
Blade & JavaScript Framework
많은 JavaScript 프레임워크도 중괄호를 사용하여 주어진 표현식이 브라우저에 표시될 것임을 나타내므로 @ 기호를 사용하여 블레이드 렌더링 엔진에 특정 표현식이 표시됨을 알릴 수 있습니다. 표현식은 변경되지 않아야 합니다. 예는 다음과 같습니다. @ 符号通知 Blade 渲染引擎某个表达式应保持不变。示例如下：
<form method="POST" action="/profile"> @csrf ... </form>
在这个例子中， @ 符号将被 Blade 删除；在 Blade 引擎中 {{ name }} 表达式将保持不变，取而代之的是 JavaScript 引擎将渲染该表达式。
@verbatim 指令
如果要在大段的模板中 JavaScript 变量，可以将 HTML 包裹在 @verbatim 指令中，这样就不需要为每个 Blade 回显语句添加 @ 符号:
<form action="/foo/bar" method="POST">
@method('PUT')
...
</form>控制结构
除了模板继承和数据显示， Blade 还为分支和循环等 PHP 控制结构提供了方便的快捷方式。这些快捷方式提供了干净、简捷地处理 PHP 控制结构的方法，同时保持了与 PHP 中的对应结构的相似性。
If 语句
可以使用 @if、 @elseif、 @else 和 @endif 指令构造 if 语句。这些指令的功能与相应的 PHP 指令相同：
<div>
@include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>方便起见， Blade 还提供了 @unless 指令：
@include('view.name', ['some' => 'data'])除了已经讨论过的条件指令， @isset 和 @empty 指令可以作为各自对应的 PHP 函数的快捷方式：
@includeIf('view.name', ['some' => 'data'])身份验证指令
@auth 和 @guest 指令能够用于快速确定当前用户是经过身份验证的，还是一个访客：
@includeWhen($boolean, 'view.name', ['some' => 'data'])
如果需要，可以在使用 @auth 和 @guest 指令时指定应被校验的 身份 ：
@includeFirst(['custom.admin', 'admin'], ['some' => 'data'])
片段指令
可以使用 @hasSection 指令检查片断是否存在内容：
<input type="{{ $type ?? 'text' }}">Switch 指令
可以使用 @switch、 @case、 @break、 @default 和 @endswitch
use Illuminate\Support\Facades\Blade;
Blade::include('includes.input', 'input');이 예에서 @ 기호는 Blade 엔진에서 Blade에 의해 제거되고 {{ name }} 표현식은 그대로 유지됩니다. 변경되지 않고 대체됩니다. 표현식을 렌더링하는 것은 JavaScript 엔진입니다. @verbatim 지시문
대형 템플릿에서 JavaScript 변수를 사용하려면 다음을 래핑할 수 있습니다. HTML @verbatim 지시문에서는 각 블레이드 에코 문에 @ 기호를 추가할 필요가 없습니다. @input(['type' => 'email'])🎜
제어 구조
🎜 템플릿 상속 및 데이터 표시 외에도 Blade는 분기 및 루프와 같은 PHP 제어 구조에 대한 편리한 단축키도 제공합니다. . 이러한 단축키는 PHP 제어 구조와 유사성을 유지하면서 PHP 제어 구조로 작업할 수 있는 깔끔하고 간단한 방법을 제공합니다. 🎜🎜🎜🎜@if, 를 사용할 수 있습니다. @elseif, @else 및 @endif 지시문은 if 문을 구성합니다. 이러한 지시문은 해당 PHP 지시문과 동일하게 작동합니다: 🎜@each('view.name', $jobs, 'job')🎜편의를 위해 Blade는 @unless 지시문도 제공합니다: 🎜@each('view.name', $jobs, 'job', 'view.empty')🎜이미 설명한 조건부 지시문 외에도 @isset 및 @empty 지시문은 해당 PHP 기능에 대한 바로가기로 사용할 수 있습니다: 🎜@push('scripts')
<script src="/example.js">
</script>
@endpush🎜인증 지시문🎜@auth 및 @guest 지시어를 사용하면 현재 사용자가 인증되었는지 게스트인지 빠르게 확인할 수 있습니다. 🎜<head>
<!-- 头部内容 -->
@stack('scripts')
</head>🎜필요한 경우 < 코드를 사용할 수 있습니다. >@auth 및 @guest 지시문은 확인해야 하는 ID를 지정합니다: 🎜@push('scripts')
This will be second...@endpush// 然后...
@prepend('scripts')
This will be first...
@endprepend🎜 조각 명령< /h4>🎜 @hasSection 명령을 사용하여 섹션에 콘텐츠가 있는지 확인할 수 있습니다: 🎜@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.</div>🎜🎜🎜🎜🎜스위치 명령 🎜🎜은 @switch, @case, @break, @default<를 사용할 수 있습니다. /code > 및 @endswitch 명령어는 스위치 문을 구성합니다. 🎜<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider{
/**
* 执行注册后引导服务.
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
/**
* 在容器中注册绑定.
*
* @return void
*/
public function register()
{
//
}
}🎜🎜🎜🎜🎜🎜Loops
Blade는 분기문 외에도 PHP의 루프 구조와 동일한 간단한 지침을 제공합니다. 이 명령어의 기능은 해당 PHP 명령어와도 동일합니다.
<?php echo ($var)->format('m/d/Y H:i'); ?>{tip} 루프에서 루프 변수를 사용하여 첫 번째 반복인지 또는 첫 번째 반복인지와 같은 루프에 대한 평가 가능한 정보를 얻을 수 있습니다. 루프의 마지막 반복:
루프에서는 루프를 종료하거나 이 반복을 통과할 수도 있습니다.
use Illuminate\Support\Facades\Blade;
/**
* 执行注册后引导服务
*
* @return void
*/
public function boot(){
Blade::if('env', function ($environment) {
return app()->environment($environment);
});
} 한 줄에 조건이 포함된 명령을 선언할 수도 있습니다:
@env('local')
// 应用在本地环境中运行...
@elseenv('testing')
// 应用在测试环境中运行...
@else
// 应用没有在本地和测试环境中运行...
@endenvLoop 변수
루프 중에 루프 본문 내에서 사용할 수 있는 $loop 변수가 있습니다. 이 변수는 현재 루프의 인덱스 및 첫 번째 루프인지 마지막 루프인지와 같은 소량의 유용한 정보에 대한 액세스를 제공합니다. $loop 变量。该变量提供了用于访问诸如当前循环的索引、当前是否为第一次或最后一次循环之类的少数有用的信息的途径：
rrreee在嵌套循环中，可以借助 parent 属性访问父循环的 $loop 变量：
rrreee$loop 变量还包含其它几种有用的属性：
