Laravel使用記錄(三)

5.視圖

Laravel使用Blade作爲模板引擎,所有的Blade視圖文件均使用.blade.php爲文件擴展並存放在resources/views目錄下。

5.1如何引入視圖

我們在resources/views下新建一個index.blade.php文件,我們通過全局輔助函數view來引入它。

    public function index()
    {
        return view('index');
    }

在控制器章節中提到了分組,模板同樣需要分組,這樣結構才更加清晰明瞭。模板文件的目錄結構一般是“模塊名/控制器名/方法名”,例如Home模塊下的IndexController下的index方法引入模板,會新建resources/views/home/index/index.blade.php模板文件,引入方法如下。

    public function index()
    {
        return view('home.index.index');
    }
5.2佈局

我們製作頁面的時候,難免會有公共的部分需要提取出來公用,例如公共頭,公共底。在Laravel中如何提取呢?這就要說到Blade模板引擎的兩個主要優點:模板繼承和區塊。下面我們通過一個簡單的例子來看下。
首先我們在resources/views下新建一個layout文件夾,用於存放佈局文件,現在準備爲Home佈局,所以新增一個home.blade.php,路徑爲resources/views/layout/home.blade.php,內容如下。
Home模塊的佈局文件

<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
    	<div class="header">this is the public head</div>
        <div class="content">
            @yield('content')
        </div>
        <div class="footer">this is the public bottom</div>
    </body>
</html>

首頁模板文件路徑爲resources/views/home/index.blade.php,此時我們引入佈局文件,加入自定義內容。
Home模塊下的首頁

@extends('layout.home')
@section('title', 'this is the front page')
@section('content')
<div style="color:#f00;">this is the homepage content</div>
@endsection

基於該佈局,我們還可以定義很多其他界面,例如頻道頁,列表頁,內容頁,但是它們擁有公共的頭部和底部。

下面我們就來分析下這兩個文件,首先是佈局文件home.blade.php。在佈局文件中,基本上都是我們認識的HTML代碼,當然還有我們不認識的,也就是我們的主角@yield。如果對生成器比較瞭解的話,對這個關鍵字並不陌生,這裏暫時不要考慮生成器的概念,只考慮此處的含義和用法。@yield定義了佈局文件中的可變部分,對應了Blade的其中一個優點:區塊,而括號中的部分則是定義了可變部分的名稱。在<head>中title,keywords和description每個頁面都是不同的,此時我們就可以使用@yield(‘title’),@yield(‘keywords’),@yield(‘description’)來標識它們。
然後就是首頁文件index.blade.php了,這裏面我們居然沒有看到熟悉的html、head、body標籤,而是首先看到@extends,沒錯這就是Blade的另一個優點:繼承。我們通過@extends(‘layout.home’)繼承了home.blade.php,但是畢竟每個模板都需要有自定義的地方不是,此時我們可以通過@section來替換佈局文件中的@yield部分。例如我們替換title,只需要@section(‘title’, ‘this is index’),括號內分爲兩部分,第一部分對應了佈局文件@yield中的名稱,第二部分是替換該部分的具體內容,如果是字符串,可以如此使用,如果是更爲複雜的HTML代碼,可以換另一種方式。

@section('標識')
具體內容
@endsection
溫馨提示:繼承中的路徑是以resources/views爲根目錄
5.3流程控制

在模板中難免會寫一些判斷,循環甚至原生的PHP,Blade中也提供了常用的流程控制語句,這些語句與原生寫法類似,使得我們可以快速上手。
If語句

@if (條件)
輸出1
@elseif (條件)
輸出2
@else
輸出3
@endif

循環

//for循環
@for (條件)
輸出
@endfor
//foreach循環
@foreach (條件)
輸出
@endforeach

原生PHP

@php
原生PHP代碼
@endphp
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章