ブレードテンプレートとは何ですか?-Laravel-php.cn

ブレードテンプレートとは何ですか?

coldplay.xixi

リリース： 2020-07-02 10:55:48

オリジナル

3284 人が閲覧しました

Blade テンプレートは、Laravel によって提供されるテンプレートエンジンです。シンプルかつ強力です。Blade を使用すると、ビューでネイティブ PHP コードを使用できます。Laravel はビュー自体の代わりにコンパイルされたキャッシュファイルを使用するため、Blade は次のような場合に非常に役立ちますオーバーヘッドはゼロです。

ブレードテンプレートとは何ですか?

Blade テンプレートは:

Blade は Laravel が提供するテンプレートエンジンで、シンプルかつ強力です。他の PHP テンプレートエンジンとは異なり、Blade ではビューでネイティブ PHP コードを使用できます。

実際、すべての Blade ビューは最終的にネイティブ PHP コードにコンパイルされ、storage/framework/views フォルダーにキャッシュされます。

Laravel はビュー自体ではなく、これらのコンパイルされたキャッシュファイルを使用するため、Blade はアプリケーションのオーバーヘッドがゼロです。ビューファイルを変更すると、使用できるように再コンパイルされてキャッシュされます。ブレードビューのサフィックス名は Blade.php で、通常は resources/views フォルダーに保存されます。

テンプレートの継承:

1. レイアウトファイルの定義

ブレードテンプレートエンジンの主な 2 つの利点は、「テンプレートの継承」です。「」と「ブロック」。簡単な例を挙げると、プロジェクトでは、ほぼすべてのページが同じレイアウトになっています。このとき、このレイアウトを抽出してマスターページとして使用できます。このマスターページを継承するすべてのページは、同じレイアウト効果を持ちます。マスターページの子ページ。マスターページはレイアウトファイルとも呼ばれ、レイアウトファイルはブレードビューです。

<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
       <head>
             <title>App Name - @yield(&#39;title&#39;)</title>
       </head>
       <body>
         @section(&#39;sidebar&#39;)
               This is the master sidebar.
         @show
         <div class="container">
              @yield(&#39;content&#39;)
         </div>
       <body>
</html>

ログイン後にコピー

基本的な HTNL タグに加えて、レイアウトファイルでは @section と @yield という 2 つの命令も使用されます。 @section はブロックを定義し、@yield はブロック内のコンテンツを定義します。＃＃＃＃＃＃下。レイアウトファイルのサブページを定義します。

2. レイアウトファイルの継承

サブページで、Blade の @extends ディレクティブを使用して「継承」レイアウトファイルを指定し、@section ディレクティブを使用して「継承」レイアウトファイルを指定します。レイアウトファイル内の「継承された」レイアウトファイル @section および @yield ディレクティブが使用されている場所にコンテンツを挿入します:

<!-- Stored in resources/views/child.blade.php -->
@extends(&#39;layouts.app&#39;)
@section(&#39;title&#39;,&#39;Page Title&#39;)
@section(&#39;sidebar&#39;)
       <p> This is appended to the master sideebar</p>
@endsection
@section(&#39;content&#39;)
         <p>This ismy body content. </p>
@endsection

ログイン後にコピー

レイアウトファイル内で @yield ディレクティブが使用されている場所では、@section が使用されていることがわかります。サブページにコンテンツを挿入するために引き続き使用されます。レイアウトファイルでは @section ディレクティブ定義の利点の 1 つは、子ページで @section インジェクションを使用するときに、@parent ディレクティブを使用してコンテンツを (上書きするのではなく) 追加できることです。レイアウトファイル内で @yield ディレクティブが使用されているレイアウトファイルでは実行できません。 @parent ディレクティブは、ビューがレンダリングされるときにレイアウトファイル内のコンテンツに置き換えられます。

ファイルレイアウトで定義されたサイドバーとは異なり、サブページは @show ではなく @endsection で終了することに注意してください。 @endsection はブロックを定義するためにのみ使用され、@show はブロックを定義してすぐに生成するために使用されるためです。

ルートからビューファイルを直接返すには、グローバル補助関数ヘルパーを使用する必要があります:

Route::get(&#39;blade&#39;, function(){
        return view(&#39;child&#39;);
})

ログイン後にコピー

3、コンポーネントとスロット

コンポーネントとスロットスロットは、レイアウトとブロックに同様の利点をもたらします。コンポーネントとスロットのメンタルモデルはより直感的です。プロジェクトに繰り返し可能な「ポップアップボックス」コンポーネントがあると想像してください。

<!-- Stored resource/views/alter.blade.php -->
<div class="alter alter-danger">
       {{ $slot }}
</div>

ログイン後にコピー

は、挿入されたコンポーネントのコンテンツを表します。このコンポーネントを構築するには、Blade の @component ディレクティブを使用します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@component(&#39;alter&#39;) <strong>Whoops!</strong> Something went wrong! @endcomponent</pre><div class="contentsignin">ログイン後にコピー</div></div>このシナリオでは、

変数の内容は次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><strong>Whoops! </strong> Something went wrong!</pre><div class="contentsignin">ログイン後にコピー</div></div>場合によっては 1 つコンポーネントには複数のスロットが必要です。現時点では、コンポーネントコードをわずかに変更して、名前付きスロットと呼ばれる「タイトル」スロットを定義するだけで済みます。名前付きスロットは、その名前に一致する変数を単純に「印刷」することでコンテンツを表示します。

<!-- Stored resources/views/alter.blade.php-->
<div class="alter alter-danger">
         <div class="alter-title">{{ $title }}</div>
            {{ $slot }}
</div>

ログイン後にコピー

コンテンツを名前付きスロットに挿入するには、@slot ディレクティブを使用します。 @slot ディレクティブにないコンテンツはすべて、コンポーネントの

$slot

変数に渡されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@compontent (&#39;alter&#39;) @slot(&#39;title&#39;) Forbidden @endslot You are not allowed to access this resource! @edcompontent~</pre><div class="contentsignin">ログイン後にコピー</div></div>

4. コンポーネントの追加データを渡す:

コンポーネントの追加データを渡すことが必要になる場合があります。これを行うには、2 番目の配列引数を @conponent ディレクティブに渡すことができます。渡すエクストラを指定します。過去のすべての追加データは、コンポーネントテンプレートの変数として使用できます:

@component
     <compontent(&#39;alter&#39;, [&#39;foo&#39; => &#39;bar&#39;);
         .....
@endCompontent

ログイン後にコピー

5. データの表示

渡してブレードビューにデータを転送します。変数は次のようにラップされます。

[ ]

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Route::get(&#39;greeting&#39;, function(){ return view(&#39;welcome&#39;, [ &#39;name&#39; => &#39;&#39;Samantha&#39;]); })</pre><div class="contentsignin">ログイン後にコピー</div></div>name 変数を使用して内容を表示できます:

Hello! {{ $name }}

ログイン後にコピー

Yes ブレードビューの print ステートメント。もちろん、print ステートメントは変数の内容を印刷することに限定されず、PHP の関数を使用することもできます。実際、ここの print ステートメントでは任意の PHP コードを使用できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">The current UNIX timestamp is {{ time() }}</pre><div class="contentsignin">ログイン後にコピー</div></div>

6. 転送されていないデータの表示

デフォルトでは、すべてが ## に渡されます。 #Blade {{ }}

ステートメントのコンテンツは、

htmlspecialchar 関数を使用して処理され、XSS 攻撃を回避するためにコンテンツがエスケープされます。出力コンテンツをエスケープする必要がない場合は、次の構文を使用できます: