LaravelDocs(中文)

視圖 (Views)

Laravel 的視圖(Views)負責應用程式的 HTML 呈現,將控制器/應用程式邏輯與呈現邏輯分離。視圖檔案通常存放於 resources/views 目錄下。

介紹 (Introduction)

當然,直接從路由和 controller 回傳完整的 HTML 文件字串並不實用。值得慶幸的是,views 提供了一種便利的方式來將所有 HTML 放在獨立的檔案中。

Views 將你的 controller / 應用程式邏輯與你的呈現邏輯分離,並儲存在 resources/views 目錄中。在使用 Laravel 時,view 樣板通常使用 Blade 樣板語言 撰寫。一個簡單的 view 可能看起來像這樣:

<!-- View stored in resources/views/greeting.blade.php -->

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

由於這個 view 儲存在 resources/views/greeting.blade.php,我們可以使用全域 view 輔助函式來回傳它,如下所示:

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

[!NOTE] 尋找更多關於如何撰寫 Blade 樣板的資訊?查看完整的 Blade 文件 開始使用。

使用 React / Vue 撰寫 Views (Writing Views In React Or Vue)

許多開發者已經開始偏好使用 React 或 Vue 來撰寫他們的樣板,而不是透過 Blade 在 PHP 中撰寫前端樣板。Laravel 透過 Inertia 讓這變得輕而易舉,這是一個函式庫,可以輕鬆地將你的 React / Vue 前端連接到你的 Laravel 後端,而不需要建構 SPA 的典型複雜性。

我們的 React 和 Vue 應用程式入門套件 為你的下一個由 Inertia 驅動的 Laravel 應用程式提供了一個很好的起點。

建立與渲染 Views (Creating And Rendering Views)

你可以透過在應用程式的 resources/views 目錄中放置一個副檔名為 .blade.php 的檔案來建立 view,或者使用 make:view Artisan 指令:

php artisan make:view greeting

.blade.php 副檔名告訴框架該檔案包含一個 Blade 樣板。Blade 樣板包含 HTML 以及 Blade 指令,讓你可以輕鬆地輸出值、建立 "if" 陳述式、迭代資料等等。

一旦你建立了一個 view,你可以使用全域 view 輔助函式從應用程式的路由或 controller 中回傳它:

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

Views 也可以使用 View facade 回傳:

use Illuminate\Support\Facades\View;

return View::make('greeting', ['name' => 'James']);

如你所見,傳遞給 view 輔助函式的第一個參數對應於 resources/views 目錄中 view 檔案的名稱。第二個參數是一個應該提供給 view 的資料陣列。在這個例子中,我們傳遞了 name 變數,它在 view 中使用 Blade 語法 顯示。

巢狀 View 目錄 (Nested View Directories)

Views 也可以巢狀在 resources/views 目錄的子目錄中。「點」符號可以用來參照巢狀的 views。例如,如果你的 view 儲存在 resources/views/admin/profile.blade.php,你可以從應用程式的路由 / controller 中這樣回傳它:

return view('admin.profile', $data);

[!WARNING] View 目錄名稱不應包含 . 字元。

建立第一個可用的 View (Creating The First Available View)

使用 View facade 的 first 方法,你可以建立在給定的 views 陣列中存在的第一個 view。如果你的應用程式或套件允許 views 被自訂或覆寫,這可能很有用:

use Illuminate\Support\Facades\View;

return View::first(['custom.admin', 'admin'], $data);

判斷 View 是否存在 (Determining If A View Exists)

如果你需要判斷 view 是否存在,你可以使用 View facade。exists 方法會在 view 存在時回傳 true

use Illuminate\Support\Facades\View;

if (View::exists('admin.profile')) {
    // ...
}

傳遞資料到 Views (Passing Data To Views)

如你在先前的範例中所見,你可以傳遞一個資料陣列給 views 來讓 view 可以使用這些資料:

return view('greetings', ['name' => 'Victoria']);

以這種方式傳遞資訊時,資料應該是一個具有鍵 / 值配對的陣列。在將資料提供給 view 後,你可以在 view 中使用資料的鍵來存取每個值,例如 <?php echo $name; ?>

作為傳遞完整資料陣列給 view 輔助函式的替代方案,你可以使用 with 方法將個別資料片段加入到 view 中。with 方法會回傳 view 物件的實例,因此你可以在回傳 view 之前繼續串接方法:

return view('greeting')
    ->with('name', 'Victoria')
    ->with('occupation', 'Astronaut');

與所有 Views 共享資料 (Sharing Data With All Views)

有時候,你可能需要與應用程式渲染的所有 views 共享資料。你可以使用 View facade 的 share 方法來做到這一點。通常,你應該在 service provider 的 boot 方法中呼叫 share 方法。你可以將它們加入到 App\Providers\AppServiceProvider 類別中,或產生一個獨立的 service provider 來容納它們:

<?php

namespace App\Providers;

use Illuminate\Support\Facades\View;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        View::share('key', 'value');
    }
}

View Composers

View composers 是在渲染 view 時呼叫的回呼或類別方法。如果你有想要在每次渲染該 view 時綁定到 view 的資料,view composer 可以幫助你將該邏輯組織到一個單一位置。如果同一個 view 由應用程式中的多個路由或 controller 回傳,並且總是需要特定的資料片段,view composers 可能特別有用。

通常,view composers 會在應用程式的其中一個 service providers 中註冊。在這個範例中,我們假設 App\Providers\AppServiceProvider 將容納這個邏輯。

我們將使用 View facade 的 composer 方法來註冊 view composer。Laravel 不包含基於類別的 view composers 的預設目錄,所以你可以自由地以你想要的方式組織它們。例如,你可以建立一個 app/View/Composers 目錄來容納所有應用程式的 view composers:

<?php

namespace App\Providers;

use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Using class-based composers...
        Facades\View::composer('profile', ProfileComposer::class);

        // Using closure-based composers...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });

        Facades\View::composer('dashboard', function (View $view) {
            // ...
        });
    }
}

現在我們已經註冊了 composer,每次渲染 profile view 時都會執行 App\View\Composers\ProfileComposer 類別的 compose 方法。讓我們來看一個 composer 類別的範例:

<?php

namespace App\View\Composers;

use App\Repositories\UserRepository;
use Illuminate\View\View;

class ProfileComposer
{
    /**
     * Create a new profile composer.
     */
    public function __construct(
        protected UserRepository $users,
    ) {}

    /**
     * Bind data to the view.
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

如你所見,所有 view composers 都透過 service container 解析,因此你可以在 composer 的建構式中型別提示任何你需要的依賴項。

將 Composer 附加到多個 Views (Attaching A Composer To Multiple Views)

你可以透過傳遞一個 views 陣列作為 composer 方法的第一個參數,一次將 view composer 附加到多個 views:

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;

View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

composer 方法也接受 * 字元作為萬用字元,允許你將 composer 附加到所有 views:

use Illuminate\Support\Facades;
use Illuminate\View\View;

Facades\View::composer('*', function (View $view) {
    // ...
});

View Creators

View "creators" 與 view composers 非常相似;然而,它們在 view 實例化之後立即執行,而不是等到 view 即將渲染。要註冊 view creator,使用 creator 方法:

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;

View::creator('profile', ProfileCreator::class);

最佳化 Views (Optimizing Views)

預設情況下,Blade 樣板 views 會在需要時編譯。當執行渲染 view 的請求時,Laravel 會判斷 view 的已編譯版本是否存在。如果檔案存在,Laravel 會判斷未編譯的 view 是否比已編譯的 view 更近期被修改。如果已編譯的 view 不存在,或者未編譯的 view 已被修改,Laravel 會重新編譯該 view。

在請求期間編譯 views 可能會對效能產生些微的負面影響,因此 Laravel 提供了 view:cache Artisan 指令來預先編譯應用程式使用的所有 views。為了提升效能,你可能希望在部署過程中執行此指令:

php artisan view:cache

你可以使用 view:clear 指令來清除 view 快取:

php artisan view:clear