Question

我正在开发我的第一个Laravel 5项目，迫切需要一种从我的电子邮件视图中内联CSS的方法。由于Mandrill的交付问题，我正在使用Mailgun（不幸的是，Mandrill有CSS内联功能，但Mailgun没有）。

似乎大多数用于在Laravel的电子邮件中内联CSS的软件包都已过时，大多数已停止在4.2版上正常运行。我试过了：

Inlining CSS when sending an email with Mailgun in Laravel - Antoine Augusti - 似乎没有做任何事情，电子邮件没有内联。似乎L5中有几个基本的差异打破了这种方法

fedeisas/laravel-mail-css-inliner - 不起作用。有人在Issue的末尾发布了一些代码，但我无法弄清楚如何实现它（也不知道它是否适用于Laravel 5）。

bweston92/laravel-inline-css-mailer - 看起来很有希望，但似乎没有做任何事情，CSS没有内联。

有人有任何建议吗？我真的希望能够将CSS内联到电子邮件中，特别是当我在发送之前注入HTML时（来自WYSIWYG编辑器）。

Answer 1

受到bweston92 / laravel-inline-css-mailer的启发，我无法上班，于是我想出了这个小课程。请随时提供建议或指出我更好的方向，只需要快速的东西。

    <?php namespace App\Library;

    use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;

    /**

 * Class inlineEmail
 * 
 * Returns rendered Email view with inlined CSS
 * @package App\Library
 */
class inlineEmail {
    /**
     * Filename of the view to render
     * @var string
     */
    private $view;
    /**
     * Data - passed to view
     * @var array
     */
    private $data;

    /**
     * @param string $view Filename/path of view to render
     * @param array $data Data of email
     */
    public function __construct($view, array $data)
    {
        // Render the email view
        $emailView = view($view, $data)->render();
        $this->view = $emailView;
        $this->data = $data;
    }

    /**
     * Convert to inlined CSS
     * 
     * @return string
     * @throws \TijsVerkoyen\CssToInlineStyles\Exception
     */
    public function convert()
    {
        $converter = new CssToInlineStyles();
        $converter->setUseInlineStylesBlock();
        $converter->setCleanup();
        $converter->setStripOriginalStyleTags();
        $converter->setHTML($this->view);
        $content =  $converter->convert();

        return $content;
    }
}

使用：

$data = ['someVar' => 'someValue'];
        $inlineEmail = new inlineEmail('emails.group-email', $data);
        $content  = $inlineEmail->convert();
        Mail::queue('emails.raw', ['content' => $content], function($message) use ($data) {
            $message->subject('Hello World')
                ->to('support@somewhere.org')
                ->bcc($data['recipients']);
        });

转换后的内联HTML / CSS会传递到emails.raw，其中只包含{!! $content !!}。

这是我用于大多数电子邮件的模板 - 它本质上是电子邮件Bootstrap的最小版本。我会赞扬它的作者，但无法准确追踪我发现它的位置，如果有人知道请发表评论。还有许多其他模板，只需搜索Bootstrap电子邮件模板或HTML电子邮件Boilerplate。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Email Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            font-size: 100%;
            line-height: 1.6;
        }
        img {
            max-width: 100%;
        }
        body {
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: none;
            width: 100%!important;
            height: 100%;
        }
        a {
            color: #348eda;
        }
        .btn-primary {
            text-decoration: none;
            color: #FFF;
            background-color: #348eda;
            border: solid #348eda;
            border-width: 10px 20px;
            line-height: 2;
            font-weight: bold;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            border-radius: 25px;
        }
        .btn-secondary {
            text-decoration: none;
            color: #FFF;
            background-color: #aaa;
            border: solid #aaa;
            border-width: 10px 20px;
            line-height: 2;
            font-weight: bold;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            border-radius: 25px;
        }
        .last {
            margin-bottom: 0;
        }
        .first {
            margin-top: 0;
        }
        .padding {
            padding: 10px 0;
        }
        table.body-wrap {
            width: 100%;
            padding: 20px;
        }
        table.body-wrap .container {
            border: 1px solid #f0f0f0;
        }
        table.footer-wrap {
            width: 100%;
            clear: both!important;
        }
        .footer-wrap .container p {
            font-size: 12px;
            color: #666;

        }
        table.footer-wrap a {
            color: #999;
        }
        h1, h2, h3 {
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            line-height: 1.1;
            margin-bottom: 15px;
            color: #000;
            margin: 40px 0 10px;
            line-height: 1.2;
            font-weight: 200;
        }
        h1 {
            font-size: 36px;
        }
        h2 {
            font-size: 28px;
        }
        h3 {
            font-size: 22px;
        }
        p, ul, ol {
            margin-bottom: 10px;
            font-weight: normal;
            font-size: 14px;
        }
        ul li, ol li {
            margin-left: 5px;
            list-style-position: inside;
        }
        .container {
            display: block!important;
            max-width: 600px!important;
            margin: 0 auto!important; /* makes it centered */
            clear: both!important;
        }
        .body-wrap .container {
            padding: 20px;
        }
        .content {
            max-width: 600px;
            margin: 0 auto;
            display: block;
        }
        .content table {
            width: 100%;
        }
    </style>
</head>

<body bgcolor="#f6f6f6">
<!-- Main Body -->
<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" bgcolor="#FFFFFF">
            <div class="content">
                <table>
                    <tr>
                        <td align="center">
                            <img src="https://example.com/images/logo.png" alt="Company Logo"/>
                        </td>
                    </tr>
                    <!-- Email content goes here .. -->
                    @yield('content')
                </table>
            </div>
        </td>
        <td></td>
    </tr>
</table>
<!-- /Main Body -->
<!-- Footer -->
<table class="footer-wrap">
    <tr>
        <td></td>
        <td class="container">
            <div class="content">
                <table>
                    <tr>
                        <td align="center">
                            <p>Footer goes here</p>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
        <td></td>
    </tr>
</table>
<!-- /Footer -->
</body>
</html>

扩展此视图的典型电子邮件如下所示：

@extends('emails.template')
@section('content')
    <tr>
        <td>
            <h1>Example Email</h1>
            <p>This is an example email. There are many like it but this one is mine.</p>
        </td>
    </tr>
    <tr>
        <td align="center">
            <p>
                <a href="http://example.com" class="btn-primary">This is a Button</a>
            </p>
        </td>
    </tr>
@endsection

Laravel 5 - 电子邮件中的内联CSS

1 个答案: