> 백엔드 개발 > PHP 튜토리얼 > Blade: Laravel의 템플릿 엔진 최대한 활용하기

Blade: Laravel의 템플릿 엔진 최대한 활용하기

Patricia Arquette
풀어 주다: 2024-11-16 11:31:03
원래의
179명이 탐색했습니다.

템플릿 엔진이란 무엇입니까?

템플릿 엔진은 콘텐츠와 레이아웃을 별도로 유지하는 데 도움이 되는 도구와 같습니다. 이렇게 하면 코드가 더 깔끔하고 관리하기 쉬워집니다. HTML을 데이터와 혼합하는 대신 콘텐츠의 모양을 정의하는 템플릿을 생성하면 엔진이 세부 사항을 채워줍니다.

블레이드란 무엇입니까?

Blade는 Laravel의 자체 템플릿 엔진으로, 여러분의 삶을 더욱 편리하게 만들어줍니다. 블레이드 템플릿은 resources/views 디렉토리에 저장되며 각 템플릿은 .blade.php 확장자를 갖습니다. 구문은 간단하고 깔끔하므로 HTML과 PHP를 쉽게 혼합할 수 있습니다. 예:

<h1>Hello, {{ $name }}!</h1>
로그인 후 복사
로그인 후 복사

하지만 블레이드는 단지 데이터 표시만을 위한 것이 아닙니다. 템플릿에 바로 루프 및 조건과 같은 논리를 추가할 수도 있습니다. 예는 다음과 같습니다.

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif
로그인 후 복사
로그인 후 복사

사용자의 로그인 여부에 따라 다양한 콘텐츠를 표시하는 것이 얼마나 쉬운지 확인해 보세요. 다음에 사용자 목록을 반복해야 할 경우 Blade의 @foreach 지시문을 사용해 보십시오. 간단하고 코드를 깔끔하게 유지합니다.

Get The Most From Blade: Laravel

템플릿 상속

Blade의 가장 뛰어난 기능 중 하나는 레이아웃을 재사용하는 데 도움이 된다는 것입니다. 사이트에 대한 마스터 템플릿을 만든 다음 각 페이지에 고유한 콘텐츠를 입력할 수 있습니다. 간단한 예는 다음과 같습니다.

<!-- 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는 워크플로우를 단순화하여 훌륭한 웹 애플리케이션 구축이라는 중요한 일에 더 집중할 수 있도록 해줍니다.

Get The Most From Blade: Laravel

블레이드 구성 요소

블레이드 구성요소는 UI를 위한 작은 구성 요소와 같습니다. 이를 레고 조각이라고 상상해 보세요. 인터페이스의 작고 재사용 가능한 부분을 만들고 필요할 때마다 제자리에 고정할 수 있습니다. 이렇게 하면 코드가 더 깔끔하고 유지 관리가 쉬워집니다.

구성요소를 한 번 정의하면 애플리케이션 전체에서 사용할 수 있습니다. 여러 페이지에서 동일하게 보이는 버튼이 필요하십니까? 이를 위한 블레이드 구성 요소를 만들어보세요! 더 나아가 이러한 구성요소에 속성을 전달하여 유연하고 적응 가능하게 만들 수 있습니다.

다음은 버튼 구성 요소의 간단한 예입니다.

<!-- 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>
로그인 후 복사
로그인 후 복사

좀 더 맞춤화된 정보가 필요하신가요? 재사용 가능한 논리를 위해 자체 블레이드 지시어를 생성할 수 있습니다.

예를 들어 날짜 형식을 자주 지정해야 한다고 가정해 보겠습니다. 다음과 같이 사용자 정의 지시문을 정의할 수 있습니다.

<h1>Hello, {{ $name }}!</h1>
로그인 후 복사
로그인 후 복사

Get The Most From Blade: Laravel

기타 기능

Blade에는 개발자로서의 삶을 더욱 원활하게 만들어 주는 몇 가지 정말 편리한 기능이 포함되어 있습니다. 그 중 몇 가지를 살펴보겠습니다.

자산 URL 관리

CSS 또는 JavaScript 파일을 연결해야 합니까? 자산() 도우미 함수를 다루었습니다. 자산에 대한 올바른 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(Cross-Site Scripting) 공격으로부터 앱을 보호하기 위해 출력을 자동으로 이스케이프합니다. 그러나 때로는 원시 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

고급 사용

블레이드 구문이 포함된 원시 HTML 또는 JavaScript를 포함해야 합니까? Blade가 구문 분석을 시도하는 것을 중지하려면 @verbatim 지시문을 사용하십시오.

// 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가 원활하게 작동합니다. JavaScript를 많이 작성하지 않고도 동적 대화형 UI를 위해 Livewire 구성 요소와 함께 Blade 구성 요소를 사용할 수 있습니다.

@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를 사용하기 시작했을 때 옵션이 얼마나 많은지 조금 헤매었지만, 얼마 지나지 않아 온 세상이 나에게 열렸습니다. 이제는 다재다능한 기능 없이 코딩하는 것을 상상할 수 없습니다. 이 기사가 이 놀라운 템플릿 엔진을 찾는 데 도움이 되었기를 바랍니다.

위 내용은 Blade: Laravel의 템플릿 엔진 최대한 활용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿