Skip to content

Views

Introduction

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

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

1<!-- View stored in resources/views/greeting.blade.php -->
2 
3<html>
4    <body>
5        <h1>Hello, {{ $name }}</h1>
6    </body>
7</html>

由於此視圖儲存在 resources/views/greeting.blade.php，我們可以使用全域 view 輔助函式來返回它，如下所示

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

正在尋找有關如何編寫 Blade 模板的更多資訊嗎？ 查看完整的 Blade 文件以開始使用。

Writing Views in React / Vue

許多開發人員已開始傾向於使用 React 或 Vue 編寫模板，而不是通過 Blade 在 PHP 中編寫前端模板。 感謝 Inertia，一個可以輕鬆將您的 React / Vue 前端連接到 Laravel 後端的函式庫，而無需構建 SPA 的典型複雜性，Laravel 使這變得輕鬆。

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

Creating and Rendering Views

您可以通過將具有 .blade.php 副檔名的文件放置在應用程式的 resources/views 目錄中，或使用 make:view Artisan 命令來建立視圖

1php artisan make:view greeting

.blade.php 副檔名告知框架該文件包含 Blade 模板。 Blade 模板包含 HTML 以及 Blade 指令，這些指令可讓您輕鬆回顯值、建立「if」語句、迭代數據等等。

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

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

視圖也可以使用 View facade 返回

1use Illuminate\Support\Facades\View;
2 
3return View::make('greeting', ['name' => 'James']);

如您所見，傳遞給 view 輔助函式的第一個參數對應於 resources/views 目錄中視圖文件的名稱。 第二個參數應該是提供給視圖使用的數據陣列。 在這種情況下，我們正在傳遞 name 變數，該變數使用 Blade 語法顯示在視圖中。

Nested View Directories

視圖也可以巢狀在 resources/views 目錄的子目錄中。 「點」表示法可用於引用巢狀視圖。 例如，如果您的視圖儲存在 resources/views/admin/profile.blade.php，您可以從應用程式的路由/控制器之一返回它，如下所示

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

視圖目錄名稱不應包含 . 字元。

Creating the First Available View

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

1use Illuminate\Support\Facades\View;
2 
3return View::first(['custom.admin', 'admin'], $data);

Determining if a View Exists

如果您需要確定視圖是否存在，您可以使用 View facade。 如果視圖存在，exists 方法將返回 true

1use Illuminate\Support\Facades\View;
2 
3if (View::exists('admin.profile')) {
4    // ...
5}

Passing Data to Views

正如您在前面的範例中所看到的，您可以將數據陣列傳遞給視圖，以使該數據可供視圖使用

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

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

作為將完整的數據陣列傳遞給 view 輔助函式的替代方法，您可以使用 with 方法將單獨的數據片段添加到視圖中。 with 方法返回視圖物件的實例，以便您可以在返回視圖之前繼續鏈式方法

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

Sharing Data With All Views

有時，您可能需要與應用程式呈現的所有視圖共享數據。 您可以使用 View facade 的 share 方法來做到這一點。 通常，您應該將對 share 方法的呼叫放置在服務提供者的 boot 方法中。 您可以自由地將它們添加到 App\Providers\AppServiceProvider 類別，或產生一個單獨的服務提供者來容納它們

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Illuminate\Support\Facades\View;
 6 
 7class AppServiceProvider extends ServiceProvider
 8{
 9    /**
10     * Register any application services.
11     */
12    public function register(): void
13    {
14        // ...
15    }
16 
17    /**
18     * Bootstrap any application services.
19     */
20    public function boot(): void
21    {
22        View::share('key', 'value');
23    }
24}

View Composers

視圖組合器是在呈現視圖時呼叫的回呼或類別方法。 如果您有想要在每次呈現視圖時綁定到視圖的數據，則視圖組合器可以幫助您將該邏輯組織到單個位置。 如果同一個視圖由應用程式中的多個路由或控制器返回，並且始終需要特定的數據片段，則視圖組合器可能會特別有用。

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

我們將使用 View facade 的 composer 方法來註冊視圖組合器。 Laravel 不包含基於類別的視圖組合器的預設目錄，因此您可以自由地組織它們。 例如，您可以建立一個 app/View/Composers 目錄來容納您的所有應用程式的視圖組合器

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use App\View\Composers\ProfileComposer;
 6use Illuminate\Support\Facades;
 7use Illuminate\Support\ServiceProvider;
 8use Illuminate\View\View;
 9 
10class AppServiceProvider extends ServiceProvider
11{
12    /**
13     * Register any application services.
14     */
15    public function register(): void
16    {
17        // ...
18    }
19 
20    /**
21     * Bootstrap any application services.
22     */
23    public function boot(): void
24    {
25        // Using class based composers...
26        Facades\View::composer('profile', ProfileComposer::class);
27 
28        // Using closure based composers...
29        Facades\View::composer('welcome', function (View $view) {
30            // ...
31        });
32 
33        Facades\View::composer('dashboard', function (View $view) {
34            // ...
35        });
36    }
37}

現在我們已經註冊了組合器，每次呈現 profile 視圖時，都會執行 App\View\Composers\ProfileComposer 類別的 compose 方法。 讓我們看一下組合器類別的範例

 1<?php
 2 
 3namespace App\View\Composers;
 4 
 5use App\Repositories\UserRepository;
 6use Illuminate\View\View;
 7 
 8class ProfileComposer
 9{
10    /**
11     * Create a new profile composer.
12     */
13    public function __construct(
14        protected UserRepository $users,
15    ) {}
16 
17    /**
18     * Bind data to the view.
19     */
20    public function compose(View $view): void
21    {
22        $view->with('count', $this->users->count());
23    }
24}

如您所見，所有視圖組合器都通過 服務容器解析，因此您可以在組合器的建構函式中類型提示您需要的任何依賴項。

將組合器附加到多個視圖

您可以通過將視圖陣列作為第一個參數傳遞給 composer 方法，一次將視圖組合器附加到多個視圖

1use App\Views\Composers\MultiComposer;
2use Illuminate\Support\Facades\View;
3 
4View::composer(
5    ['profile', 'dashboard'],
6    MultiComposer::class
7);

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

1use Illuminate\Support\Facades;
2use Illuminate\View\View;
3 
4Facades\View::composer('*', function (View $view) {
5    // ...
6});

View Creators

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

1use App\View\Creators\ProfileCreator;
2use Illuminate\Support\Facades\View;
3 
4View::creator('profile', ProfileCreator::class);

Optimizing Views

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

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

1php artisan view:cache

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

1php artisan view:clear

Laravel 是最有效率的方式來
建構、部署和監控軟體。

Products

Packages

Resources