ホームページ >バックエンド開発 >PHPチュートリアル >Blade を最大限に活用する: Laravel のテンプレートエンジン

Blade を最大限に活用する: Laravel のテンプレートエンジン

Patricia Arquetteオリジナル: 2024-11-16 11:31:03202ブラウズ

テンプレートエンジンとは何ですか?

テンプレートエンジンは、コンテンツとレイアウトを分離するのに役立つツールのようなものです。これにより、コードがクリーンになり、管理が容易になります。 HTML をデータと混合する代わりに、コンテンツの外観を定義するテンプレートを作成すると、エンジンが詳細の入力を処理します。

ブレードとは何ですか？

Blade は Laravel 独自のテンプレートエンジンであり、作業を容易にするように設計されています。ブレードテンプレートは resource/views ディレクトリに保存され、各テンプレートには .blade.php 拡張子が付いています。構文はシンプルで明確なので、HTML と PHP を簡単に組み合わせることができます。例:

<h1>Hello, {{ $name }}!</h1>

しかし、Blade はデータを表示するためだけのものではありません。ループや条件などのロジックをテンプレートに直接追加することもできます。以下に例を示します:

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

ユーザーがログインしているかどうかに基づいて異なるコンテンツを表示することがいかに簡単であるかがわかりますか?次回ユーザーのリストをループする必要がある場合は、Blade の @foreach ディレクティブを使用してみてください。これは簡単で、コードを整理した状態に保ちます。

Get The Most From Blade: Laravel

テンプレートの継承

Blade の最も優れた機能の 1 つは、レイアウトの再利用に役立つことです。サイトのマスターテンプレートを作成し、各ページに固有のコンテンツを入力するだけです。簡単な例を次に示します:

<!-- layout.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <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>Welcome to the Home Page!</h1>
@endsection

@extends を使用するとレイアウトにリンクし、@section を使用してプレースホルダーに特定のコンテンツを入力できます。これにより、コードが DRY (繰り返さない) 状態に保たれ、非常に管理しやすくなります。 Blade はワークフローを簡素化し、優れた Web アプリケーションの構築という重要なことに集中できるようにします。

Get The Most From Blade: Laravel

ブレードのコンポーネント

ブレードコンポーネントは、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="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></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"><form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

さらにカスタマイズしたものが必要ですか?再利用可能なロジック用に独自の Blade ディレクティブを作成できます。

たとえば、日付の書式設定が頻繁に必要になるとします。次のようにカスタムディレクティブを定義できます:

<h1>Hello, {{ $name }}!</h1>

Get The Most From Blade: Laravel

その他の機能

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 -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <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>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="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></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"><form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

Get The Most From Blade: Laravel

高度な使い方

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="{{ asset('css/app.css') }}">

Livewire を使用している場合、Blade は Livewire とシームレスに連携します。 JavaScript をあまり書かなくても、Blade コンポーネントを Livewire コンポーネントと併用して、動的でインタラクティブな UI を実現できます。

@once ディレクティブは、コードのブロックが 1 回だけ実行されるようにします。 Blade を使用すると、渡したデータに基づいて適応する動的コンポーネントを作成できます。これは、柔軟で再利用可能な UI 部分に最適です:

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

@error ディレクティブを使用すると、特定のフィールドのエラーメッセージを簡単に表示できます。

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

最初に Blade を使い始めたとき、どれだけのオプションがあるのか少し戸惑いましたが、すぐにまったくの世界が開かれました。今では、この多機能な機能なしでコーディングすることは考えられません。この記事が、この素晴らしいテンプレートエンジンへの道を見つけるのに役立つことを願っています。

以上がBlade を最大限に活用する: Laravel のテンプレートエンジンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript laravel json css html xss define if for foreach format include try Directory Error using class Interface Conditional function this display ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：GoDaddy のアンカー CMS で「入力ファイルが指定されていません」エラーを修正する方法?次の記事：GoDaddy のアンカー CMS で「入力ファイルが指定されていません」エラーを修正する方法?

続きを見る

Blade を最大限に活用する: Laravel のテンプレート エンジン

テンプレートエンジンとは何ですか?

ブレードとは何ですか？

テンプレートの継承

ブレードのコンポーネント

その他の機能

アセット URL の管理

空の配列またはコレクションの処理

条件付きコンテンツの表示

XSS からの保護

高度な使い方

関連記事

Blade を最大限に活用する: Laravel のテンプレートエンジン