如何修改Laravel Mailable中Header和Footer插槽的内容?
Got it, let's walk through how to tweak the Header and Footer slots in your Laravel Mailable. We've got two main approaches depending on whether you want changes to apply to all emails or just specific ones.
1. Publish Laravel's Mail Templates (Optional but Recommended)
First, if you haven't already, publish the default mail templates to your project so you can edit them directly. Run this command in your terminal:
php artisan vendor:publish --tag=laravel-mail
This copies all mail-related views to resources/views/vendor/mail/, including the layout and component files you're working with.
2. Customize Globally (For All Emails)
Edit your message.blade.php (now located at resources/views/vendor/mail/layouts/message.blade.php) to modify the Header and Footer slots:
Tweak the Header Slot
Replace the default header content with your custom setup. Here are two options:
{{-- Header --}} @slot('header') {{-- Option 1: Customize the default header component --}} @component('mail::header', ['url' => config('app.url')]) {{-- Swap $preheader with your logo or custom text --}} <img src="{{ asset('images/your-brand-logo.png') }}" alt="{{ config('app.name') }}" style="max-height: 60px;"> @endcomponent {{-- Option 2: Fully custom header HTML --}} {{-- <div style="background: #165DFF; padding: 20px; text-align: center;"> <h2 style="color: white; margin: 0;">Your Custom Header Text</h2> </div> --}} @endslot
Update the Footer Slot
Modify the footer section to fit your needs. Example:
{{-- Footer --}} @slot('footer') @component('mail::footer') <p style="color: #666; font-size: 14px;"> © {{ date('Y') }} {{ config('app.name') }}. All rights reserved.<br> Have questions? Reply to this email or reach us at support@yourdomain.com. </p> @endcomponent @endslot
3. Override Per Mailable (For Specific Emails)
If you only want to adjust the Header/Footer for one particular email, override the slots directly in your template.blade.php:
@component('mail::message') {{ $message }} {{-- Override the Header slot --}} @slot('header') <div style="background: #E64A19; padding: 18px; text-align: center;"> <h3 style="color: white; margin: 0;">Exclusive Offer Email Header</h3> </div> @endslot {{-- Override the Footer slot --}} @slot('footer') <div style="text-align: center; padding: 12px; border-top: 1px solid #eee;"> <small>This is a promotional email. Unsubscribe <a href="{{ route('unsubscribe') }}">here</a>.</small> </div> @endslot @endcomponent
Pass Dynamic Data to Slots
You can also send dynamic values from your Mailable class to the slots. In your Mailable's build() method:
public function build() { return $this->view('emails.template') ->with([ 'customHeaderText' => 'Welcome to Our Community!', 'customFooterNote' => 'Thanks for signing up.', ]); }
Then use these variables in your template or layout:
@slot('header') @component('mail::header', ['url' => config('app.url')]) {{ $customHeaderText }} @endcomponent @endslot
Pick the approach that fits your needs—global changes for all emails, or per-Mailable overrides for specific cases.
内容的提问来源于stack exchange,提问作者Maarten Raaijmakers

