告别邮件布局噩梦：如何使用asahasrabuddhe/lar*el-mjml轻松构建响应式邮件
Composer在线学习地址：学习地址
邮件开发的痛点：一场与兼容性搏斗的持久战
我深有体会，每次接到需要发送营销邮件或通知邮件的需求时，心情总是复杂的。因为我知道，这不仅仅是写几行html那么简单。为了让邮件在outlook、gmail、apple mail等不同的邮件客户端上都能保持一致的显示效果，我们往往需要：
-
手动内联CSS： 许多邮件客户端会剥离
<style>
标签中的样式，迫使我们将所有CSS都写成内联样式，这让代码变得冗长且难以维护。 -
依赖表格布局： 为了实现复杂的布局，我们不得不回到上世纪的网页开发方式，大量使用
<table>
标签进行布局，这让HTML结构变得臃肿不堪。 - 响应式设计的挑战： 在手机和桌面端之间切换时，邮件布局经常会“崩坏”。为了实现响应式，我们需要编写大量的媒体查询，并进行反复测试和调整。
- 调试的煎熬： 邮件在不同客户端上的渲染差异，意味着我们需要在多个环境中进行测试，排查那些难以捉摸的兼容性问题，效率极其低下。
这些问题叠加在一起，让邮件开发成为一个效率低下、令人沮丧的过程。我一直在寻找一种更优雅、更高效的解决方案。
救星登场：Composer 与 asahasrabuddhe/lar*el-mjml
正当我被这些邮件布局问题折磨得焦头烂额时，我偶然发现了 MJML。MJML (Mailjet Markup Language) 是一个开源的标记语言，它旨在简化响应式邮件的开发。你用一套简洁的MJML语法来描述邮件结构，然后MJML编译器会将其转换为兼容性极佳的响应式HTML代码。这简直是邮件开发者的福音！
然而，如何在我的Lar*el项目中优雅地集成MJML呢？这时，Composer作为PHP的包管理器，再次展现了它的强大之处。通过
asahasrabuddhe/lar*el-mjml这个Composer包，MJML的能力被完美地引入到了Lar*el的Mailable系统中。
这个包的作用就像一座桥梁，连接了Lar*el的邮件发送机制和MJML的强大渲染能力。它允许你在Lar*el的邮件视图中直接编写MJML代码，并在发送前自动将其编译为标准的HTML，从而省去了手动编译和复制粘贴的麻烦。
如何使用 asahasrabuddhe/lar*el-mjml
解决问题
整个集成和使用过程非常顺畅，主要分为以下几个步骤：
1. 安装 Composer 包
首先，你需要通过Composer将
asahasrabuddhe/lar*el-mjml添加到你的项目中：
composer require asahasrabuddhe/lar*el-mjml
l-mjml2. 安装 MJML CLI
asahasrabuddhe/lar*el-mjml包本身是一个Lar*el集成层，它依赖于底层的MJML编译器。因此，你还需要通过npm安装MJML的命令行工具：
npm install --s*e mjml
安装完成后，你可以选择发布包的配置文件，尽管通常情况下，它会自动检测MJML CLI的路径：
Bertha.ai
一款专为WordPress打造的AI内容和图像创建工具
120
查看详情
php artisan vendor:publish
在列表中选择
lar*el-mjml。
3. 创建 MJML 邮件视图
现在，你可以在
resources/views目录下创建一个新的邮件视图文件，并以
.mjml扩展名保存（或者在配置中指定其他扩展名），在其中编写你的MJML代码。例如，
resources/views/emails/welcome.mjml：
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">
Hello, {{ $user->name }}!
</mj-text>
<mj-button href="https://your-app.com" background-color="#F45E43">
Explore Our App
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>4. 创建 Lar*el Mailable 类并集成
接下来，创建一个标准的Lar*el Mailable 类：
php artisan make:mail WelcomeEmail
然后，关键的一步是修改
WelcomeEmail类，使其继承
asahasrabuddhe\Lar*elMJML\Mail\Mailable而不是
Illuminate\Mail\Mailable。这将赋予你的Mailable类编译MJML的能力。
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
// use Illuminate\Mail\Mailable; // 注释或删除这行
use Asahasrabuddhe\Lar*elMJML\Mail\Mailable; // 使用这个新的 Mailable
use Illuminate\Mail\Mailables\Content; // Lar*el 9+
use Illuminate\Mail\Mailables\Envelope; // Lar*el 9+
use Illuminate\Queue\SerializesModels;
class WelcomeEmail extends Mailable
{
use Queueable, SerializesModels;
public $user;
/**
* Create a new message instance.
*/
public function __construct($user)
{
$this->user = $user;
}
/**
* Get the message envelope. (Lar*el 9+)
*/
public function envelope(): Envelope
{
return new Envelope(
subject: 'Welcome to Our App!',
);
}
/**
* Get the message content definition. (Lar*el 9+)
*/
public function content(): Content
{
return new Content(
view: $this->mjml('emails.welcome')->buildMjmlView()['html'], // 使用 mjml() 方法
);
}
/**
* Build the message. (Lar*el 8 及以下)
*/
public function build()
{
return $this->mjml('emails.welcome') // 使用 mjml() 方法
->subject('Welcome to Our App!');
}
}
注意：
- 对于 Lar*el 8 及以下版本，在
build
方法中使用$this->mjml('view.name')。 - 对于 Lar*el 9 及以上版本，在
content
方法中，你需要返回一个content
实例，其中view
属性的值是$this->mjml('view.name')->buildMjmlView()['html']。
优势与实际应用效果
使用
asahasrabuddhe/lar*el-mjml后，我的邮件开发体验得到了质的飞跃：
- 开发效率飙升： 我不再需要手动编写复杂的HTML表格和内联CSS。MJML的语义化标签让邮件结构清晰易懂，开发时间大大缩短。
- 天生响应式： MJML编译出的HTML本身就是高度响应式的，我几乎不需要为移动端适配做额外的调整，大大减少了调试工作量。
- 告别兼容性烦恼： MJML社区持续维护和优化，确保生成的HTML在主流邮件客户端上表现良好。我不再需要为Outlook的怪癖或Gmail的限制而头疼。
- 代码更整洁： MJML代码比原始HTML简洁得多，易于阅读和维护，团队协作也变得更加顺畅。
- 与Lar*el生态无缝集成： 作为Lar*el Mailable的一部分，它完美融入了Lar*el的邮件发送流程，队列、附件等功能依然可以正常使用。
现在，每当有邮件发送需求时，我都能自信地使用MJML来构建，它不仅让我的工作变得更轻松，也让最终用户收到的邮件体验得到了显著提升。
总结
asahasrabuddhe/lar*el-mjml这个Composer包，结合MJML的强大能力，彻底解决了我在Lar*el项目中构建响应式HTML邮件的痛点。它将复杂的邮件布局工作简化为优雅的MJML语法，并通过Composer的便利性，无缝集成到Lar*el的开发流程中。如果你也曾被HTML邮件的兼容性问题所困扰，那么我强烈推荐你尝试一下这个解决方案，它会让你爱上邮件开发！
以上就是告别邮件布局噩梦：如何使用asahasrabuddhe/lar*el-mjml轻松构建响应式邮件的详细内容，更多请关注其它相关文章！
热门内容推荐
快捷栏目导航
