在使用 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 裡，也不會污染其他頁面！
![[PHP] strpos- 函數返回字串在另一個字串中第一次出現的位置](/assets/upload/1590906011930_0.jpg)
![[Laravel] 使用 offset，limit 或 skip，take 來設定取得資料的範圍](/assets/upload/1625921864379_0.jpg)
![[WordPress] 透過 Code Snippets 自訂 shortcode 內容](/assets/upload/1613481490813_0.png)
