如何在laravel电子邮件中附加样式表



当用户以laravel提交表单时,我正在尝试发送电子邮件。所以在我的控制器中我有:

Mail::to($request->to)->send(new AppMailShareEbol());

在我的ShareEBOL类中,在构建方法中我有:

public function build()
{
return $this->markdown('panel.reports.ebol');
}

在我的ebol.blade.php文件中,我有:

@extends('layouts.app')
@section('content')
<h2 class="my-custom-header"> Hello World </h2>
<p class="my-custom-paragraph"> some text... </p>
@endsection

在我的layouts.app刀片文件中,我添加了一些样式表:

<link href="{{asset('assets/css/custom.css')}}" rel="stylesheet" type="text/css" />

电子邮件发送成功,但问题是我在custom.css中包含的css样式没有应用于电子邮件。我该怎么解决这个问题?

自定义css的步骤 -标记邮件

看来您已经创建了自定义ui。所以我试着根据你的定制需求提供帮助。


选项1:

  1. 创建路径html/themes例如resources/views/panel/reports/ebol/html/themes

  2. 将您的custom.css复制到html/themes

  3. 编辑config/mail.php如下:

    ...
    'markdown' => [
    'theme' => 'custom', // custom.css
    'paths' => [
    resource_path('views/panel/reports/ebol'),
    ],
    

    ],

现在所有降价的默认主题将是custom.css


选项2:

另一个选项是使用mailable类的$theme属性设置主题,而不是在config/mail.php中设置

例如:

class ShareEbol extends Mailable
{
use Queueable, SerializesModels;
public $theme = 'custom'; // custom.css
...

选项3:

另一种选择是使用Mail Notifications,这里有很好的记录:Laravel邮件通知

您可以使用LaravelMarkdown Mailables。这让你能够使用主题,你也可以自定义这些主题,或者你可以创建自己的主题。

https://laravel.com/docs/8.x/mail#markdown-可邮寄

步骤1-使用以下命令生成带有刀片文件的Markdown Mailables。

php artisan make:mail ShareEbol --markdown=emails.panel.reports.ebol

这将创建您的邮件功能和刀片。您可以根据需要更新函数,使数据具有动态性。

步骤2-自定义组件

php artisan vendor:publish --tag=laravel-mail

此命令将Markdown邮件组件发布到resources/views/vendor/mail目录。邮件目录将包含一个html和一个文本目录,每个目录都包含每个可用组件的各自表示。您可以随心所欲地自定义这些组件。https://laravel.com/docs/8.x/mail#customizing-组件

步骤3-自定义CSS

导出组件后,resources/views/vendor/mail/html/themes目录将包含一个default.css文件。您可以自定义此文件中的CSS,您的样式将自动转换为Markdown邮件的HTML表示中的内联CSS样式。

如果你想为Laravel的Markdown组件构建一个全新的主题,你可以在html/themes目录中放置一个CSS文件。命名并保存CSS文件后,更新应用程序的config/mail.php配置文件的主题选项,使其与新主题的名称相匹配。

要自定义单个邮件的主题,可以将邮件类的$theme属性设置为发送该邮件时应使用的主题的名称。

https://laravel.com/docs/8.x/mail#customizing-css

我认为只有一种方法:导出邮件组件后,可以在default.css文件中自定义CSS。您的样式将自动排列在Markdown邮件的HTML表示中。

步骤1:发布邮件组件

php artisan vendor:publish --tag=laravel-mail

步骤2:在resources/views/vendor/mail/html/themes中,您可以自定义default.css文件。

https://laravel.com/docs/6.x/mail#customizing-组件

请注意,由于这是一封电子邮件,并非所有的CSS属性都可以应用,至少不能应用现代的属性。

您可以尝试使用发布降价样式

php artisan vendor:publish --tag=laravel-mail

看看为降价邮件生成的style.css。从这里,您可以更改背景颜色或按钮颜色。(悬停、动画或过于复杂的样式属性可能不起作用)。

我以前也遇到过类似的问题。您必须在每个邮件模板中分别添加css代码。当您在本地机器中以视图的形式看到.css文件时,在模板中添加.css文件的相对url会很好,但当它以电子邮件的形式发送时会中断。Css文件不会在电子邮件中呈现。我不得不在标签中添加css代码。

如上所述,您可能会遇到一些邮件客户端无法正确处理外部CSS文件的问题。

查看关于Laravel Markdown邮件组件&定制

导出组件后,resources/views/vendor/mail/html/themes目录将包含一个default.css文件。您可以自定义此文件中的CSS,您的样式将自动转换为Markdown邮件的HTML表示中的内联CSS样式。

您也可以使用类似于laravel-mail-css内联的东西来"自动地";在模板渲染中内联CSS文件的内容。

来自自述:

大多数电子邮件客户端不会呈现CSS(在<link><style>上)。解决方案是直接在HTML上内联CSS。

您是否在邮件正文中看到CSS文件的HTML<link>,或者您的CSS已经内联到正文中(因此可能是CSS语法或标记语法的问题)?

最新更新