Dapatkan Maksimum Daripada Blade: Enjin Templat Laravel

Apakah itu Enjin Templat?

Enjin templat adalah seperti alat yang membantu anda memastikan kandungan dan reka letak anda berasingan. Ini menjadikan kod anda lebih bersih dan lebih mudah untuk diurus. Daripada mencampurkan HTML dengan data anda, anda membuat templat yang mentakrifkan rupa kandungan anda dan enjin akan menguruskan mengisi butiran.

Apakah Blade?

Blade ialah enjin templat Laravel sendiri, dan ia direka untuk menjadikan hidup anda lebih mudah. Templat bilah disimpan dalam direktori sumber/pandangan, dan setiap satu mempunyai sambungan .blade.php. Sintaksnya mudah dan bersih, membolehkan anda mencampurkan HTML dengan PHP dengan mudah. Contohnya:

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

Tetapi Blade bukan sahaja untuk memaparkan data. Anda juga boleh menambah logik, seperti gelung dan bersyarat, terus dalam templat anda. Berikut ialah contoh:

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

Lihat betapa mudahnya untuk menunjukkan kandungan yang berbeza berdasarkan sama ada pengguna log masuk? Lain kali anda perlu menyemak senarai pengguna, cuba gunakan arahan @foreach Blade. Ia mudah dan memastikan kod anda sentiasa kemas.

Pewarisan Templat

Salah satu ciri terbaik Blade ialah cara ia membantu anda menggunakan semula reka letak. Anda boleh membuat templat induk untuk tapak anda dan kemudian hanya mengisi kandungan unik untuk setiap halaman. Berikut ialah contoh mudah:

<!-- 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

Dengan menggunakan @extends, anda memaut ke reka letak dan @section membenarkan anda mengisi ruang letak dengan kandungan khusus anda. Ini memastikan kod anda KERING (Jangan Ulangi Sendiri) dan sangat mudah diurus. Blade memudahkan aliran kerja anda, membolehkan anda menumpukan lebih pada perkara yang penting—membina aplikasi web yang hebat.

Komponen Bilah

Komponen bilah adalah seperti blok binaan kecil untuk UI anda. Bayangkan ia sebagai kepingan Lego—anda mencipta bahagian kecil yang boleh digunakan semula antara muka anda dan boleh memasukkannya ke tempat di mana sahaja anda memerlukannya. Ini menjadikan kod anda lebih bersih dan lebih boleh diselenggara.

Anda boleh menentukan komponen sekali dan menggunakannya sepanjang aplikasi anda. Perlukan butang yang kelihatan sama pada halaman yang berbeza? Buat komponen Blade untuknya! Lebih baik lagi, anda boleh menghantar atribut kepada komponen ini untuk menjadikannya fleksibel dan boleh disesuaikan.

Berikut ialah contoh mudah komponen butang:

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

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

Anda boleh menjadikan komponen anda dinamik dengan menggunakan kelas komponen. Ini membolehkan anda memasukkan atribut seperti jenis atau kelas untuk menyesuaikan gelagat atau gaya butang.

// 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

Perlukan sesuatu yang lebih disesuaikan? Anda boleh mencipta arahan Blade anda sendiri untuk logik boleh guna semula.

Sebagai contoh, katakan anda sering perlu memformat tarikh. Anda boleh menentukan arahan tersuai seperti ini:

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

Ciri-ciri lain

Blade datang dengan beberapa ciri yang sangat berguna yang menjadikan kehidupan anda sebagai pembangun lebih lancar. Mari kita selami beberapa daripadanya.

Menguruskan URL Aset

Perlu memautkan fail CSS atau JavaScript anda? Fungsi pembantu asset() telah anda lindungi. Ia menjana URL yang betul untuk aset anda, jadi anda tidak perlu risau tentang laluan:

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

Mengendalikan Tatasusunan atau Koleksi Kosong

Arahan @forelse Blade ialah penyelamat nyawa apabila berurusan dengan tatasusunan atau koleksi kosong. Ia membolehkan anda mengulangi item dan juga mengendalikan kes di mana tiada item dengan elegan:

<!-- 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

Paparan Kandungan Bersyarat

Blade menawarkan beberapa arahan untuk menunjukkan kandungan berdasarkan syarat:

@isset: menyemak sama ada pembolehubah ditetapkan
@kosong: menyemak sama ada pembolehubah kosong
@kecuali: berfungsi seperti jika, tetapi secara terbalik
Berikut ialah contoh menggunakan @isset:

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

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

Melindungi Terhadap XSS

Blade secara automatik melepaskan output untuk melindungi apl anda daripada serangan XSS (Cross-Site Skrip). Tetapi kadangkala, anda mungkin mahu mengeluarkan HTML mentah. Dalam kes itu, gunakan {!! !!}:

// 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

Penggunaan lanjutan

Perlu memasukkan HTML mentah atau JavaScript yang mengandungi sintaks Blade? Gunakan arahan @verbatim untuk menghentikan Blade daripada cuba menghuraikannya:

// 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)

Bekerja dengan API? Blade memudahkan untuk memaparkan data JSON terus dalam templat anda:

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

Jika anda menggunakan Livewire, Blade berfungsi dengan lancar dengannya. Anda boleh menggunakan komponen Blade bersama komponen Livewire untuk UI yang dinamik dan interaktif tanpa menulis banyak JavaScript.

Arahan @once memastikan blok kod berjalan sekali sahaja. Blade membolehkan anda membuat komponen dinamik yang menyesuaikan diri berdasarkan data yang anda hantar. Ini bagus untuk kepingan UI yang fleksibel dan boleh diguna semula:

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

Arahan @error membantu anda menunjukkan mesej ralat untuk medan tertentu dengan mudah:

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

---

Apabila saya mula menggunakan Blade, saya agak tersesat tentang berapa banyak pilihan yang saya ada, tetapi tidak lama selepas seluruh dunia terbuka untuk saya. Sekarang saya tidak dapat membayangkan pengekodan tanpa ciri serba boleh. Saya harap artikel ini membantu anda mencari jalan masuk ke enjin templat yang menakjubkan ini.