Blade 樣板系統

Search…
Blade 樣板系統
Laravel 使用 Blade 樣板系統來建立 View，所有的 Blade 樣板檔名都要以 .blade.php 結尾。
在迷你部落格專案中，我們一共建立了 4 個 View：
home.blade.php
create.blade.php
edit.blade.php
show.blade.php
在這些 View 中，很多內容都是重覆的，因此我們可以抽離共有的部份，成為一個獨立的檔案，這樣不僅維護容易，也讓內容更加清楚。
使用目錄
當一個網站內容很豐富時，View 也會非常多，我們可以藉由目錄來分類各個不同功能的 View。
首先在 app/views 目錄下新增一個目錄，名為 site，要用來放"前端"網頁的 view。這裡提供一個建議的作法，site 放前端的 view；admin 放後端的 view (這只是建議，你可以依自己需求調整)。
在 site 目錄下新增一個 layouts 目錄，並在其中新增一個檔案 default.blade.php，結果：
app/views/site/layouts/default.blade.php
default.blade.php 檔案內容如下：
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ $title }}</title>
</head>
<body>
    @section('sidebar')
        這是側選單
    @show
​
    <div class="container">
        @yield('content')
    </div>
​
    @include('site.layouts.footer')
</body>
</html>
@section ... @show 區塊
用來表示一個區塊，我們給這個區塊一個名稱 sidebar(名稱可自定) 表示要放側選單的內容。你可以在這個區段中加入 HTML，而在繼承它的子樣板中，可以重新定義(即覆蓋)這個區段的內容。
@yield
表示一個交由繼承它的子樣板定義的區段，如果子樣板未定義，就不會顯示任何內容。
@include
表示目前這個樣板將包含其他的"片段樣板"。片段樣板不會有完整的 HTML，而是代表某個部份的 HTML 片段，它會被包含進這個主樣板中。片段樣版通常不會獨立使用。
簡單的說，include 像是把主樣板切成幾個部份，把它分開放在幾個外部檔案中。而 section 和 yield 則是在主樣板上先挖幾個洞，準備放東西進來。
現在把原本的 blade 檔移到 site 目錄下：
app/views/site/home.blade.php
app/views/site/create.blade.php
app/views/site/edit.blade.php
app/views/site/show.blade.php
接著修改 app/controllers/HomeController.php 中有關 view 的部份：
View::make('home')      改為 View::make('site.home')
View::make('create')    改為 View::make('site.create')
View::make('show')      改為 View::make('site.show')
View::make('edit')      改為 View::make('site.edit')
最後，新增一個 footer.blade.php 在 layouts 中：
app/views/site/layouts/footer.blade.php
footer.blade.php 內容如下：
 Powered by Laravel
在 Blade 樣版系統中，使用(點.)來對應 app/views 下的目錄，所以
site.layouts.footer
意思是
(app/views)/site/layouts/footer.blade.php
套用樣板
接下來就要執行樣板切割手術，把原本的 4 個頁面套用 default 樣板。
編輯 app/views/site/home.blade.php 修改如下：
@extends('site.layouts.default')
​
@section('content')
    <h1>{{ $title }}</h1>
    <div>{{ link_to('post/create', '新增') }}</div>
    @if (isset($posts))
        <ol>
        @foreach ($posts as $post)
            <li>
            {{-- HTML::linkRoute('post.show', $post->title, ['id'=>$post->id]) --}}
            {{ HTML::link('post/'.$post->id, $post->title) }}
            ({{ HTML::link('post/'.$post->id.'/edit', '編輯') }})</li>
        @endforeach
        </ol>
    @endif
@stop
首先把 body 之外的內容刪除，只保留 body 內的內容。在最上方加入：
@extends('site.layouts.default')
@extends 表示要繼承哪個樣板，這裡當然是我們前面建立的 default.blade.php。
然後把原本 body 包住的部份改為用 @section('content') ... @stop 來包住。這裡的 'content' 名稱要和 default.blade.php 中的 @yield('content') 相同，表示要填補這個洞。
現在可以在瀏覽器上看看原本的 post 頁面，應該會在上面多出 "這是側選單"；下面多出 "Powered by Laravel" 的文字，這些都是在 default 中設定的。其他 3 個頁面修改方法都一樣，請自行修改。
你可以自己試試看額外增加一個
@section('sidebar')
    ...
@stop
區塊，你會發現原本 default 中的 sidebar 區塊被取代了。
樣板架構控制
輸出
3 種 echo 方法：
@{{ xxx }}：blade 不執行 echo，直接顯示 @ 符號後的內容。
{{ xxx }}：HTML有效的輸出。
{{{ xxx }}}：HTML無效的輸出。
範例：
@{{ '111' }}
{{ '<h1>222</h1>' }}
{{{ '<h1>333</h1>' }}}
結果：
{{ '111' }}
222
<h1>333</h1>
註：222 會以 h1 的樣式顯示，這裡看不出效果。
條件控制
@if (isset($title))
    ...
@endif
或
@if (isset($title))
    ...
@elseif(isset($content))
    ...
@else
    ...
@endif
或(除非為真)
@unless (isset($title))
    ...
@endunless
isset() 是 PHP 的函式。其實這些@開頭的敍述最後都會被 Blade 轉成 PHP。本質上還是 PHP，只是用一個比較簡潔的方式表達。
重覆執行
@for ($i = 0; $i < 10; $i++)
       第 {{ $i }} 圈。
@endfor
或之前我們用過的
@foreach ($posts as $post)
    {{ $post->id }}
@endforeach
註解
{{-- 這是註解，不會產生 HTML 碼 --}}
載入 CSS、Javascript 及圖檔
在介紹了那麼多 Blade 的功能後，怎麼都沒提到 CSS、Javascript 及圖檔的使用方式，因為很簡單。
第一個要問的問題是，這些檔案要在放哪裡？
然後我要怎麼使用它？
檔案要放在哪裡？
這些檔案要放在 public 目錄中，public 是 Laravel 框架中，唯一對外公開的目錄。我們可以建立一個 css 目錄、js 目錄及 img 目錄，分別放不同類型的檔案。例如：
public/css
public/js
public/img
如何使用這些檔案？
在 View 中，可以使用 HTML 類別的方法來載入：
CSS
{{ HTML::style('css/site/main.css') }}
Javascript
{{ HTML::script('js/jquery.min.js') }}
圖檔
{{ HTML::image('img/logo.png') }}
動手做－進階 - Previous
Route 進階
Next - 動手做－進階
Form 進階
Last modified 2yr ago
Copy link
Outline
使用目錄
@section ... @show 區塊
載入 CSS、Javascript 及圖檔