Laravel中如何发送带Gmail样式按钮的自定义邮件模板？

阿华AIGC实验室

2026-5-15

在Laravel中发送带Gmail风格按钮的自定义邮件模板

我来一步步教你实现这个需求，Laravel的邮件系统灵活性很强，完全能自定义出和Gmail风格一致的按钮模板。

1. 生成邮件类与基础模板

首先用Laravel的Artisan命令快速生成邮件类和对应的视图模板：

php artisan make:mail SupportIssueMail

执行后会得到两个核心文件：

app/Mail/SupportIssueMail.php：负责邮件的逻辑处理与数据传递
resources/views/emails/support-issue.blade.php：邮件内容的可视化模板

2. 配置邮件类的基础逻辑

打开SupportIssueMail.php，在build()方法里指定要使用的视图，同时通过构造函数传递模板需要的动态数据（比如按钮跳转的问题链接）：

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class SupportIssueMail extends Mailable
{
    use Queueable, SerializesModels;

    public $issueUrl;

    /**
     * 初始化邮件实例，接收问题链接
     */
    public function __construct(string $issueUrl)
    {
        $this->issueUrl = $issueUrl;
    }

    /**
     * 定义邮件信封（主题等）
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: '你的问题有新进展',
        );
    }

    /**
     * 指定邮件使用的视图模板
     */
    public function content(): Content
    {
        return new Content(
            view: 'emails.support-issue',
        );
    }

    /**
     * 邮件附件（这里不需要，返回空数组）
     */
    public function attachments(): array
    {
        return [];
    }
}

3. 编写带Gmail风格按钮的邮件模板

邮件模板的兼容性很关键，不同邮件客户端对CSS支持差异大，所以我们用内联样式+表格布局来实现Gmail的按钮效果。打开resources/views/emails/support-issue.blade.php，替换成以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>问题进展通知</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5;">
    <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <tr>
            <td style="padding: 24px;">
                <h1 style="font-size: 20px; color: #202124; margin: 0 0 16px 0;">你的问题有新的更新</h1>
                <p style="font-size: 14px; color: #5f6368; line-height: 1.5; margin: 0 0 24px 0;">我们已收到你的问题反馈，点击下方按钮查看详细进展或回复：</p>
                
                <!-- 模仿Gmail的「查看问题」按钮 -->
                <table cellpadding="0" cellspacing="0" style="margin: 24px 0;">
                    <tr>
                        <td style="background-color: #1a73e8; border-radius: 4px;">
                            <a href="{{ $issueUrl }}" style="display: inline-block; padding: 12px 24px; color: white; text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 4px;">
                                查看问题
                            </a>
                        </td>
                    </tr>
                </table>

                <p style="font-size: 12px; color: #5f6368; line-height: 1.5; margin: 16px 0 0 0;">如果无法点击按钮，可复制以下链接到浏览器打开：</p>
                <p style="font-size: 12px; color: #1a73e8; word-break: break-all;">{{ $issueUrl }}</p>
            </td>
        </tr>
    </table>
</body>
</html>

这个按钮完全复刻了Gmail的风格：

用Gmail主题蓝#1a73e8作为背景色
白色文字+中等字重，保证可读性
4px圆角+合适内边距，视觉上和Gmail按钮一致
表格包裹确保在所有邮件客户端都能正常渲染

4. 发送邮件

最后，你可以在控制器、命令或者业务逻辑中调用这个邮件类发送邮件：

use App\Mail\SupportIssueMail;
use Illuminate\Support\Facades\Mail;

// 示例：在控制器方法中发送
public function sendIssueNotification()
{
    $issueUrl = 'https://your-domain.com/issues/123'; // 替换为实际的问题链接
    Mail::to('user@example.com')->send(new SupportIssueMail($issueUrl));
    
    return redirect()->back()->with('success', '通知邮件已发送');
}