在使用 Laravel 開發網站時，我們常常會遇到這樣的需求：

  • 在某些頁面插入額外的 CSS 或 JavaScript

  • 不要修改主版面（layout）

  • 保持 Blade 模板整潔又彈性

這時候 Laravel Blade 提供的 @push 和 @stack 指令，就是最好的解決方案！

 

為什麼要用 @push 和 @stack？

假設你在一個網頁頁面中需要使用幻燈片插件（如 Glide.js），你可能會在 <head> 加上 <style>，在 <body> 底部加上 <script>。

但如果這些東西只是特定頁面才需要，硬寫在主版面會造成污染，也不利維護。

這時候你可以用：

  • @push('styles')：把 CSS 推進「樣式堆疊區」

  • @stack('styles')：在 <head> 中輸出這些堆疊的 CSS

 

基本範例

主版面：layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的 Laravel 網站</title>
    @stack('styles') {{-- 所有子頁面的 CSS 都會集中輸出在這裡 --}}
</head>
<body>

    @yield('content')

    @stack('scripts') {{-- 所有子頁面的 JS 都會集中輸出在這裡 --}}
</body>
</html>

 

子頁面：例如 resources/views/home.blade.php

@extends('layouts.app')

@section('content')
    <h1>首頁</h1>

    <div class="glide">
        <!-- 幻燈片內容 -->
    </div>
@endsection

{{-- 推送 CSS 到 styles 區塊 --}}
@push('styles')
<style>
  .glide { width: 100%; }
  .glide__slide { background: #eee; padding: 50px; text-align: center; }
</style>
@endpush

{{-- 推送 JS 到 scripts 區塊 --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Glide('.glide').mount();
  });
</script>
@endpush

 

多個區塊都可以 @push

你可以在一個頁面中多次使用 @push('scripts')，Blade 會自動依照順序「累加」進同一個 @stack 裡，而不會覆蓋彼此。

@push('scripts')
<script src="js/one.js"></script>
@endpush

@push('scripts')
<script src="js/two.js"></script>
@endpush

這樣在主版面 @stack('scripts') 就會輸出兩個 <script>。

 

結合 @include 更好用

你甚至可以在 @include 的元件中寫 @push，達到元件化時自動帶入所需的 CSS/JS。

例如 resources/views/components/slider.blade.php：

<div class="glide">
    <!-- 幻燈片內容 -->
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Glide('.glide').mount();
  });
</script>
@endpush

 

小提醒

  • 如果 @push 了某個區塊，但主版面沒有對應的 @stack，那內容就不會輸出。

  • 你也可以搭配 @once 使用，避免重複輸出相同資源。

@once
@push('scripts')
<script src="..."></script>
@endpush
@endonce

 

結語

使用 @push 和 @stack 可以讓你的 Laravel Blade 更加模組化與乾淨，特別是當你在開發大型網站、或有很多子元件需要引入各自的資源時。

這個技巧非常適合與元件搭配使用，讓 CSS、JS 不再集中在 layout 裡，也不會污染其他頁面！