Blade は、Laravel が提供するシンプルで強力なテンプレート エンジンです。他のよく知られた PHP テンプレート エンジンと比較して、Blade ではビューでの PHP コードの使用が制限されません。すべての Blade ビューは、変更されるまでコンパイルされ、プレーンな PHP コードにキャッシュされます。これは、Blade がアプリケーションにほとんど負担をかけないことを意味します。ブレード ビュー ファイルは拡張子として .blade.php を使用し、通常は resource/views フォルダーに保存されます。
# ページ レイアウトを定義する
Blade テンプレートを使用する 2 つの主な利点は、テンプレートの継承とブロックです。簡単な例から始めましょう。まず、「メイン」ページのレイアウトを確認する必要があります。ほとんどの Web アプリケーションは、さまざまなページで同じレイアウトを維持します。このレイアウトは、次の単一の Blade ビューで簡単に定義できます。 .
<!-- 文件保存于 resources/views/master.blade.php --><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> @yield('title') </title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"></head><body><nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @if(Auth::guest()) <a class="navbar-brand" href="/">学生成绩管理</a> @else @if (Auth::user()->is_admin) <a class="navbar-brand" href="/admin">学生成绩管理</a> @else <a class="navbar-brand" href="/">学生成绩管理</a> @endif @endif </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="http://www.golaravel.com" target="__blank">Power by laravel5</a></li> </ul> <ul class="nav navbar-nav navbar-right"> @if (Auth::guest()) @else <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="{{ url('/logout') }}">退出</a></li> </ul> </li> @endif </ul> </div> </div></nav><!-- <div>{{-- <!-- @include('flash') --}} </div> -->@yield('content') <!-- script --><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></body></html>
ご覧のとおり、このファイルには従来の HTML 構文が含まれています。ただし、@section および @yield コマンドに注意してください。名前が示すように、@section コマンドはコンテンツ セクションを定義し、@yield コマンドは「指定されたセクションのコンテンツを表示する」ために使用されます。
@yield() [単にエリアとして理解できます] と @extends() は、通常、レイアウトと呼ばれるものを実現するために組み合わせて使用されます。レイアウトとは、Web 開発のプロセスで、ヘッダー、フッターなどのいくつかの共通部分をビュー ファイルに直接配置し、それを使用するときに (@extends を使用して) 直接継承を使用することを意味します。 / views/ フォルダーの下に master.blade.php を作成します。
このアプリケーションのレイアウトを定義したので、このレイアウトを継承するサブページを定義しましょう。
ウェルカム ホーム ページはメイン ページを継承します
<!-- 文件保存于 resources/views/welcome.blade.php -->@extends('master') {{-- 继承master模版，注意：此处米有结束符分号 --}}@section('title') {{-- 对应@yield('title') --}} {{-- 也可以这样写：@section('title', '页面标题') --}} 学生成绩管理系统-测试-@stop@section('content') {{-- 对应@yield('content') --}} <div class="container"> <div class="jumbotron"> <h2><div class="quote">{{ Inspiring::quote() }}</div></h2> <p>同学们登录后先修改相关资料</p> <p>查询分数,有疑问咨询管理员</p> <p><a class="btn btn-primary btn-lg" href="/login" role="button">点击登录</a></p> </div> </div>@stop
1 つ目の方法 コンテンツが比較的短い場合は、@stop 終了記号を付けずに直接記述することができます
@section('title', '页面标题')2 つ目の方法は、表示するコンテンツが多い場合、個別に記述することができます。つまり、次のようになります。
@section('content') // 这部分替换app里的代码，有开始就会有结束，所以一个section 对应一个stop <h1>生如夏花之绚烂</h1> <p>死如秋叶之静美</p>@stop
ブラウザ表示:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
