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 的部份:

最後,新增一個 footer.blade.php 在 layouts 中:

footer.blade.php 內容如下:

Powered by Laravel

在 Blade 樣版系統中,使用(點.)來對應 app/views 下的目錄,所以

意思是

套用樣板

接下來就要執行樣板切割手術,把原本的 4 個頁面套用 default 樣板。

編輯 app/views/site/home.blade.php 修改如下:

首先把 body 之外的內容刪除,只保留 body 內的內容。在最上方加入:

@extends 表示要繼承哪個樣板,這裡當然是我們前面建立的 default.blade.php。

然後把原本 body 包住的部份改為用 @section('content') ... @stop 來包住。這裡的 'content' 名稱要和 default.blade.php 中的 @yield('content') 相同,表示要填補這個洞。

現在可以在瀏覽器上看看原本的 post 頁面,應該會在上面多出 "這是側選單";下面多出 "Powered by Laravel" 的文字,這些都是在 default 中設定的。其他 3 個頁面修改方法都一樣,請自行修改。

你可以自己試試看額外增加一個

區塊,你會發現原本 default 中的 sidebar 區塊被取代了。

樣板架構控制

輸出

3 種 echo 方法:

範例:

結果:

註:222 會以 h1 的樣式顯示,這裡看不出效果。

條件控制

或(除非為真)

isset() 是 PHP 的函式。其實這些@開頭的敍述最後都會被 Blade 轉成 PHP。本質上還是 PHP,只是用一個比較簡潔的方式表達。

重覆執行

或之前我們用過的

註解

載入 CSS、Javascript 及圖檔

在介紹了那麼多 Blade 的功能後,怎麼都沒提到 CSS、Javascript 及圖檔的使用方式,因為很簡單。

  • 第一個要問的問題是,這些檔案要在放哪裡?

  • 然後我要怎麼使用它?

檔案要放在哪裡?

這些檔案要放在 public 目錄中,public 是 Laravel 框架中,唯一對外公開的目錄。我們可以建立一個 css 目錄、js 目錄及 img 目錄,分別放不同類型的檔案。例如:

如何使用這些檔案?

在 View 中,可以使用 HTML 類別的方法來載入:

CSS

Javascript

圖檔

Last updated

Was this helpful?