:::

4-4 Blade 樣板語法(自訂導覽列選項)

詳細 Blade 樣板語法請參考:https://learnku.com/docs/laravel/5.8/blade/3902

一、Blade 樣板的輸出

Blade語法 說明或用法 控制器對應
{{-- 註解 --}} 就是註解  
{!!$content!!}} 輸出$content內容(不會過濾) return view('welcome', ['content' => $content]);
{{$content}} 經過htmlentities過濾的內容(<會變成&lt; return view('welcome', ['content' => $content]);

二、Blade 樣板的邏輯控制

Blade語法 說明或用法

@if(條件)

@elseif(條件)

@else

@endif

if 判斷

@unless(條件)

@endunless

當條件為false時才成立

@for(起始值;條件;變化量)

@endfor

for迴圈

@while(條件)

@endwhile

while迴圈

@foreach(陣列 as 鍵值)

@endforeach

foreach迴圈,可用 $loop->first以及$loop->last變數

@forelse(陣列 as 鍵值)

@empty

@endforelse

效果同foreach迴圈,只是會檢查陣列是否為空,若為空會執行@empty以下的內容

三、Blade 樣板佈局控制語法

@extends('樣板名稱')

將指定的樣板中的區塊及內容繼承過來

@include('樣板名稱')

引入樣板

@yield('名稱', '預設值')

定義一個區塊,預設值非必須。若是沒預設值,則使用以下方式來定義其值

@section('名稱', '值')

使用名稱來定義一個區塊內容,亦可顯示或繼承內容

@section('名稱') + @endsection 或 @stop

標記區塊的結束,通常作為@section的結束標籤,例如:這樣只是定義content的內容,並不會直接呈現,需利用@yield('content')才能顯示。

@section('content')
    <h1>商品一覽</h1>
@endsection

@section('名稱') + @show

  1. 標記區塊的結束並顯示,例如:這樣就會直接顯示。
  2. 修改專案\resources\views\layouts\nav.blade.php,在@else下方多一個 @section('my_menu'),也就是自定義一個樣板變數my_menu並直接顯示。
    @guest
        <li class="nav-item">
            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
        </li>
        @if (Route::has('register'))
            <li class="nav-item">
                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
            </li>
        @endif
    @else
        @section('my_menu')
            <li class="nav-item">
                <a class="nav-link" href="/">回首頁</a>
            </li>
        @show
        <li class="nav-item dropdown">
            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                {{ Auth::user()->name }} <span class="caret"></span>
            </a>
    
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{{ route('logout') }}"
                    onclick="event.preventDefault();
                                    document.getElementById('logout-form').submit();">
                    {{ __('Logout') }}
                </a>
    
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
            </div>
        </li>
    @endguest
  3. 看起來會像這樣:

 @section('名稱') + @parent

  1. 會將此定義的內容附加進去
  2. 修改專案\resources\views\welcome.blade.php,在最後加上:
    @extends('layouts.app')
    @section('content')
        <h1>商品一覽</h1>
    @endsection
    
    @section('my_menu')
        <li class="nav-item">
            <a class="nav-link" href="/home">回控制台</a>
        </li>
        @parent
    @stop
  3. 如此,只要到首頁,就會多出一個「回控制台」的連結
  4. 若將@parent刪除,則會以「回控制台」取代原有選項,如:

到GitHub觀看此單元程式異動  


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D43%26tbdsn%3D1394

計數器

今天: 1486148614861486
昨天: 1416141614161416
總計: 7340133734013373401337340133734013373401337340133