Laravel 在樣板的運作上,除了有傳統的MVC架構中透過Controller來驅動的方式外,另外還多了一種blade template

由於上一次學習MVC架構失敗的陰影太深,我決定先求有再求好,所以就先挑了Blade來做使用

再次聲明~本文章觀念不一定正確(應該說有極大的機率不正確),一切只按照個人喜好與容易上手程度來做介紹


首先我們先來找找Laravel的view放在哪裡,他們被存放在project\resources\views 底下

剛安裝完的Laravel會內建一個welcome.blade.php的view,這個default的首頁

所有的blade樣板,在檔名與php當中都必須有.blade這個詞,這樣Laravel才能吃得到這些樣板

要運用這些樣板,就要搞懂他的幾項用法,截至目前為止我接觸到覺得最有用的氛圍以下幾種

 @include @yield @extends @section

下面我們就用修改welcome樣板來做個範例,看看這些機制是怎麼運作的吧!


@include

最開始的welcome樣板長的其實跟一般html完全一樣,我們先試著透過@include的方式把bootstrap整合進來

首先,先建立一個新的檔案叫做link.blade.php,內容為

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

然後在welcom.blade.php的<head></head>之間插入

@include('link')

這時候Laravel就會自己去找名字叫做link.blade.php的檔案,並且把這個檔案的內容寫入我們指定的位置上

這時候再次開啟瀏覽器看看網頁,如果原本首頁中的 Laravel 5 的字型已經改變了,就代表我們成功了

2.PNG 

@include 的運作方式就是把來源檔案的程式碼,一字不漏的加到我們指定的位置上

主要的用法可以做為網頁的header和header這類每頁都有而且不會改變的東西上,日後維護的時候也只需要修改一份code即可

這邊我們再來建立一個footer來做測試,一樣建立一個名為footer.blade.php的檔案

<div class="col-xs-12" style="background-color: black;color:antiquewhite;position:absolute;bottom:0;height:100px;">
    <div class="row">
        <div class="col-md-3 col-md-offset-1">
            <h2>My Laravel 5</h2>
        </div>
        <div class="col-md-3">
            <span style="color:#ffc733;"><strong>Author Information</strong></span>
        </div>
        <div class="col-md-3">
            <span style="color:#ffc733;"><strong>Footer Information</strong></span>
        </div>
    </div>
</div>

然後在</body>之前include這個footer

@include('footer')

然後我們就可以看到我們有一個固定footer在這個頁面底下了

3.PNG 


@extends

接下來這個功能,我姑且把他稱之為繼承,是由一個頁面繼承某一個頁面的全部內容

假設我們有一個網頁,想要長得跟welcome一樣,那我們可以這樣做

首先我們先建立一個名為page1.blade.php的網頁,內容只需要加上

@extends('welcome')

就可以完整複製一個welcome網頁過來,這時候我們先到project/app/Https/routes.php增加設定讓我們可以看到page1這個view

Route::get('/1', function () {
    return view('page1');
});

在網址列上輸入127.0.0.1:8080/1 即可看到這個長得跟welcome完全一樣的網頁了,至於我們為什麼要這樣做?

這樣做看起來跟include完全一樣啊!@yield跟@section就是我們要這樣做的原因


@yield跟@section

這兩個標籤基本上都是成對的,一個像是在標記內容,一個像是在定位內容的位置

直接用例子說明可能會比較清楚一些,首先我們先來修改welcome.blade.php的檔案

我們先把body跟body之間的內容替換成

<div class="row">
    <div class="col-md-12">
        <div class="title">Laravel 5</div>
    </div>
    @yield('content')
</div>
@INCLUDE('footer')

主要是在原本的Laravel 5文字底下,加入了@yield('content') 這行程式

這表示的是這裡是個保留的區域,如果有content這個標籤的內容的話,會塞在這裡,如果沒有,也不會造成網頁出錯

然後我們回來先前建立的page1.blade.php 將檔案內容改成

@extends('welcome')
@section('content')
<div class="col-md-12" style="font-family: Lato:100;padding-top: 30px;text-align: center">
    Laravel X Vagrant 2016
</div>
@stop

上面程式碼的意思為,我繼承了welcome的所有內容,並且建立了一個叫做content的section,要放在繼承來的內容當中

這時候就是系統會自動尋找原本被繼承物件當中,標記@yield('content')的地方,並且把 @section('content') 到 @stop 之間的內容插入

這時候我們再到瀏覽器來看看,在127.0.0.1:8080/1 的網頁上,Laravel 5 的底下是不是多了這行文字

4.PNG 

在同一個位置上,可以有複數個@yield的decoration,當這個樣板被不同對象載入時

可以依照載入對象文件中設定的section不同,做不同內容的顯示


以下一張圖大致整理了這篇所提到的@include , @yield , @section 的相互關係

laravel_structure.png 


到此,這幾種標籤最基本的用法我們就算略懂了,至於真正的應用方法和適用情境,就有待各位自行體會了XD

創作者介紹

Mok's - 墨客工坊

deepviator 發表在 痞客邦 留言(0) 人氣()