如何在Laravel 8的邮件模板中正确应用CSS样式规则
问题原因
- 你使用的是Laravel Markdown类型邮件模板,内容默认遵循Markdown解析规则:内容缩进4个及以上空格会被识别为代码块,你贴的
placed.blade.php代码里,<h1>和<p>标签前都有缩进,部分内容被解析为代码块所以直接显示了标签文本。 - Markdown模板对直接嵌入的HTML标签支持有限,部分标签如果和Markdown规则冲突会被自动转义。
解决方案
1. 修复标签显示异常问题
先移除placed.blade.php中所有正文内容的前导缩进,调整后的代码如下:
@component('mail::message') <h1>Order Received</h1> <p>Thank you for ordering with Mobile Mastery and we are so hyped that you decided to make us part of upgrading your gaming experience. Your order is being prepared and shipped currently, but in the mean time do NOT delete this email as you may need it, for example, to return an item. You order details are as follows:</p> -- 其他订单相关内容 -- @endcomponent
如果调整后仍有标签转义问题,可以直接用Markdown语法写内容,不需要额外写HTML标签:
@component('mail::message') # Order Received Thank you for ordering with Mobile Mastery and we are so hyped that you decided to make us part of upgrading your gaming experience. Your order is being prepared and shipped currently, but in the mean time do NOT delete this email as you may need it, for example, to return an item. You order details are as follows: -- 其他订单相关内容 -- @endcomponent
2. 自定义邮件样式
你已经执行过php artisan vendor:publish发布了邮件相关视图文件,直接修改resources/views/vendor/mail/html/themes/default.css即可全局调整所有Markdown邮件的样式,支持自定义各类标签、组件的CSS属性,修改后的样式会自动内联到邮件内容中,兼容绝大多数邮件客户端。
如果只需要给单套邮件模板单独设置样式,也可以在对应blade文件中直接添加内嵌<style>标签,Laravel的邮件渲染机制会自动处理样式内联。
3. 调试技巧
你目前配置的测试路由已经可以直接预览邮件渲染效果,修改内容和样式后直接刷新路由即可看到效果,不需要真实发送邮件调试。
内容的提问来源于stack exchange,提问作者RC07JNR
相关产品推荐
相关产品推荐

