Laravel 學習筆記(12) - Blade 樣板系統

来源：互联网发布：新手开淘宝店视频教程编辑：程序博客网时间：2024/05/22 11:42

http://www.tuicool.com/articles/Y3Efm2M

Laravel - Blade

Blade 樣板系統

Laravel 使用 Blade 樣板系統，所有的 Blade 樣板都要以 .blade.php 結尾。

在「微型部落格」專案中，我們一共建立了 4 個 view：

home.blade.php
create.blade.php
edit.blade.php
show.blade.php

我們可以抽離共有的部份，這樣不僅維護容易，也可以少掉許多重覆的 HTML。這裡還會說明如何使用資料夾來分類 view，這樣當你的網站變大時，才會容易管理檔案。

首先在 app/views 下新增一個資料夾，名為 site，要用來放"前端"網頁的 view。

建議的作法：

site 放前端的 view
admin 放後端的 view

這只是建議，你可以依自己喜好調整。

在 site 下新增一個 layouts 資料夾，並在其中新增一個檔案 default.blade.php (app/views/site/layouts/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 則是在主樣板上先挖幾個洞，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

並新增一個 footer.blade.php 在 layouts 中 (app/views/site/layouts/footer.blade.php)：

<footer>    Powered by Laravel</footer>

在 default.blade.php 中

@include('site.layouts.footer')

用(點.)來指定 app/views 下的目錄，所以

site.layouts.footer

意思是

(app/views)/site/layouts/footer.blade.php

接下來就要把原本的 4 個頁面套用 default 樣板。

但是這裡要先修改 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')

套用樣板

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')    xxx@stop

區段，你會發現原本 default 中的 sidebar 區段被取代了。一個 blade 檔中，可以有多個 @section ... @stop 區塊。

樣板架構控制

輸出

3 種 echo 方法：

* @{{ ... }}：blade 不執行 echo，直接顯示 @ 符號後的內容。

* {{ ... }}：HTML有效的輸出。

* {{{ ... }}}：HTML無效的輸出。

範例：

@{{ '111' }}{{ '<h1>222</h1>' }}{{{ '<h1>333</h1>' }}}

結果：

{{ '111' }}222 (註:這裡會依h1的樣式顯示)<h1>333</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 及圖檔

還有一個一定需要的功能，CSS、Javascript 及圖檔要怎麼處理呢？

1.首先是檔案要放哪裡？

這些檔案要放在 public 目錄中，這個目錄不在 app 目錄之下，而是和它同一層。我們可以建立一個 css 目錄、js 目錄及 img 目錄，分別放不同類型的檔案。例如：

public/csspublic/jspublic/img

2.如何使用這些檔案？

在 view 中，使用 HTML 類別的方法來載入。

CSS

{{ HTML::style('css/site/main.css') }}

Javascript

{{ HTML::script('js/jquery.min.js') }}

圖檔

{{ HTML::image('img/logo.png') }}

Written by Tony at Tony Blog - http://blog.tonycube.com/

----

0 0