視圖

📝 此頁面為 Laravel 官方文檔的繁體中文翻譯。查看原始英文版本

視圖

簡介

當然，直接從路由和控制器傳回完整的 HTML 文件字串是不切實際的。幸運的是，視圖提供了一種便利的方式來將所有 HTML 放置在單獨的文件中。

視圖將您的控制器/應用程式邏輯與呈現邏輯分離，並存儲在 resources/views 目錄中。使用 Laravel 時，視圖模板通常使用 Blade 模板語言來編寫。一個簡單的視圖可能看起來像這樣：

<!-- 視圖存儲在 resources/views/greeting.blade.php -->

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

由於此視圖存儲在 resources/views/greeting.blade.php，我們可以使用全域 view 輔助函數來傳回它，像這樣：

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

[!NOTE] 想了解更多關於如何編寫 Blade 模板的資訊嗎？請查看完整的 Blade 文檔來開始使用。

使用 React / Svelte / Vue 編寫視圖

許多開發者開始不再透過 Blade 使用 PHP 編寫前端模板，而是更喜歡使用 React、Svelte 或 Vue 來編寫模板。Laravel 透過 Inertia 讓這變得非常簡單，Inertia 是一個庫，讓您可以輕鬆地將 React / Svelte / Vue 前端與 Laravel 後端連接，而無需建立 SPA 的典型複雜性。

我們的 React、Svelte 和 Vue 應用程式入門套件為您的下一個由 Inertia 驅動的 Laravel 應用程式提供了絕佳的起點。

建立和渲染視圖

您可以透過在應用程式的 resources/views 目錄中放置帶有 .blade.php 擴展名的文件或使用 make:view Artisan 命令來建立視圖：

php artisan make:view greeting

.blade.php 擴展名通知框架該文件包含 Blade 模板。Blade 模板包含 HTML 以及 Blade 指令，允許您輕鬆地顯示值、建立「if」語句、迭代資料等。

建立視圖後，您可以使用全域 view 輔助函數從應用程式的路由或控制器中傳回它：

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

視圖也可以使用 View 外觀來傳回：

use Illuminate\Support\Facades\View;

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

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

嵌套視圖目錄

視圖也可以嵌套在 resources/views 目錄的子目錄中。可以使用「點」記法來引用嵌套視圖。例如，如果您的視圖存儲在 resources/views/admin/profile.blade.php，您可以從應用程式的路由/控制器中像這樣傳回它：

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

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

建立第一個可用視圖

使用 View 外觀的 first 方法，您可以建立給定視圖陣列中存在的第一個視圖。如果您的應用程式或套件允許視圖被自訂或覆蓋，這可能會很有用：

use Illuminate\Support\Facades\View;

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

判斷視圖是否存在

如果您需要判斷視圖是否存在，可以使用 View 外觀。exists 方法在視圖存在時將傳回 true：

use Illuminate\Support\Facades\View;

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

向視圖傳遞資料

正如您在前面的範例中所見，您可以向視圖傳遞資料陣列，以使該資料可供視圖使用：

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

以這種方式傳遞資訊時，資料應該是一個包含鍵/值對的陣列。向視圖提供資料後，您可以使用資料的鍵在視圖中存取每個值，例如 <?php echo $name; ?>。

作為向 view 輔助函數傳遞完整資料陣列的替代方案，您可以使用 with 方法向視圖添加單個資料。with 方法傳回視圖物件的實例，以便您可以在傳回視圖之前繼續鏈式呼叫方法：

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

與所有視圖共享資料

有時您可能需要與應用程式渲染的所有視圖共享資料。您可以使用 View 外觀的 share 方法來執行此操作。通常，您應該在服務提供者的 boot 方法中放置對 share 方法的呼叫。您可以自由地將它們添加到 App\Providers\AppServiceProvider 類別中，或生成一個單獨的服務提供者來容納它們：

<?php

namespace App\Providers;

use Illuminate\Support\Facades\View;

class AppServiceProvider extends ServiceProvider
{
    /**
     * 註冊任何應用程式服務。
     */
    public function register(): void
    {
        // ...
    }

    /**
     * 啟動任何應用程式服務。
     */
    public function boot(): void
    {
        View::share('key', 'value');
    }
}

視圖合成器

視圖合成器是在渲染視圖時被呼叫的回呼或類別方法。如果您有想要在每次渲染視圖時綁定到視圖的資料，視圖合成器可以幫助您將該邏輯組織到一個位置。如果同一視圖被應用程式中的多個路由或控制器傳回，並且總是需要特定的資料，視圖合成器可能特別有用。

通常，視圖合成器將在您應用程式的服務提供者之一中註冊。在此範例中，我們將假設 App\Providers\AppServiceProvider 將容納此邏輯。

我們將使用 View 外觀的 composer 方法來註冊視圖合成器。Laravel 不包含用於基於類別的視圖合成器的預設目錄，因此您可以自由地按照您希望的方式組織它們。例如，您可以建立一個 app/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
{
    /**
     * 註冊任何應用程式服務。
     */
    public function register(): void
    {
        // ...
    }

    /**
     * 啟動任何應用程式服務。
     */
    public function boot(): void
    {
        // 使用基於類別的合成器...
        Facades\View::composer('profile', ProfileComposer::class);

        // 使用基於閉包的合成器...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });

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

現在我們已經註冊了合成器，每次渲染 profile 視圖時，App\View\Composers\ProfileComposer 類別的 compose 方法都將被執行。讓我們來看看合成器類別的範例：

<?php

namespace App\View\Composers;

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

class ProfileComposer
{
    /**
     * 建立一個新的 Profile 合成器。
     */
    public function __construct(
        protected UserRepository $users,
    ) {}

    /**
     * 將資料綁定到視圖。
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

如您所見，所有視圖合成器都透過服務容器解析，因此您可以在合成器的構造函數中鍵入提示您需要的任何依賴。

將合成器附加到多個視圖

您可以透過將視圖陣列作為第一個參數傳遞給 composer 方法，將視圖合成器同時附加到多個視圖：

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

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

composer 方法還接受 * 字元作為萬用字元，允許您將合成器附加到所有視圖：

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

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

視圖建立器

視圖「建立器」與視圖合成器非常相似；但是，它們在視圖實例化後立即執行，而不是等到視圖即將渲染時。要註冊視圖建立器，請使用 creator 方法：

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

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

優化視圖

預設情況下，Blade 模板視圖是按需編譯的。當執行渲染視圖的請求時，Laravel 將判斷視圖的編譯版本是否存在。如果文件存在，Laravel 將判斷未編譯的視圖是否比編譯的視圖更新。如果編譯的視圖不存在，或未編譯的視圖已被修改，Laravel 將重新編譯視圖。

在請求期間編譯視圖可能對效能產生輕微的負面影響，因此 Laravel 提供了 view:cache Artisan 命令來預編譯應用程式使用的所有視圖。為了提高效能，您可能希望將此命令作為部署過程的一部分來執行：

php artisan view:cache

您可以使用 view:clear 命令來清除視圖快取：

php artisan view:clear