个人中心
gpt4 book ai didi

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

转载 作者：技术小花猫 更新时间：2023-10-29 11:20:35 25 4
gpt4 key购买 nike

我正在处理我的第一个 Laravel 5 元素，迫切需要一种方法来从我的电子邮件 View 中内联 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，尤其是当我在发送之前注入(inject) HTML 时(从 WYSIWYG 编辑器)。

最佳答案

灵感来自 bweston92/laravel-inline-css-mailer ，我无法开始工作，我想出了这个小类使用 TijsVerkoyen\CssToInlineStyles包裹。请随时提供建议或为我指出更好的方向，只是需要快速的东西。

    <?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，其中仅包含 {!! $内容!!}。

这是我用于大部分电子邮件的模板 - 它本质上是用于电子邮件的 Bootstrap 的最小版本。我会感谢它的作者，但无法准确找到我找到它的位置，如果有人知道请发表评论。还有许多其他模板，只需搜索 Bootstrap Email Template 或 HTML Email 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>

扩展此 View 的典型电子邮件如下所示:

@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

关于css - Laravel 5 - 电子邮件中的内联 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29661851/

25 4 0
文章推荐： jquery - Chrome 中通过 jQuery 的新警告
文章推荐： linux - 如何在 gedit 中设置用户定义函数名称的样式？
文章推荐： css - 如何在scss中编写带参数的类？
文章推荐： c - send(2) 接收 SIGPIPE 的目的是什么？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com