Laravel 5 - 电子邮件中的内联 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29661851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5 - Inline CSS in email
提问by NightMICU
I am working on my first Laravel 5 project and desperately need a way to inline CSS from my email views. I am using Mailgun because of delivery issues with Mandrill (unfortunately, Mandrill has CSS inline capability baked in but Mailgun does not).
我正在处理我的第一个 Laravel 5 项目，迫切需要一种方法来从我的电子邮件视图中内联 CSS。由于 Mandrill 的交付问题，我正在使用 Mailgun（不幸的是，Mandrill 具有内置的 CSS 内联功能，但 Mailgun 没有）。
It appears that most packages out there for inlining CSS on emails for Laravel are out of date, most stopped working correctly on version 4.2. I have tried:
似乎大多数用于在 Laravel 的电子邮件中内联 CSS 的软件包都已过时，大多数在 4.2 版上无法正常工作。我试过了：
Inlining CSS when sending an email with Mailgun in Laravel - Antoine Augusti- does not seem to do anything, emails are not inlined. It appears that there are several fundamental differences in L5 that break this approach
在 Laravel 中使用 Mailgun 发送电子邮件时内联 CSS - Antoine Augusti- 似乎没有任何作用，电子邮件没有内联。似乎 L5 中有几个根本差异打破了这种方法
fedeisas/laravel-mail-css-inliner- Does not work. Someone posted some code at the end of this Issuebut I cannot figure out how to implement it (also do not know if it was intended for Laravel 5).
fedeisas/laravel-mail-css-inliner- 不起作用。有人在本期末尾发布了一些代码，但我不知道如何实现它（也不知道它是否适用于 Laravel 5）。
bweston92/laravel-inline-css-mailer- Looks promising but does not seem to do anything, CSS is not being inlined.
bweston92/laravel-inline-css-mailer- 看起来很有希望但似乎没有做任何事情，CSS 没有被内联。
Does anyone have any recommendations? I would really like to be able to inline CSS for email, especially when I'm injecting HTML prior to sending (from WYSIWYG editor).
有人有什么建议吗？我真的希望能够为电子邮件内联 CSS，尤其是当我在发送之前注入 HTML 时（从 WYSIWYG 编辑器）。
回答by NightMICU
Inspired by bweston92/laravel-inline-css-mailer, which I could not get to work, I came up with this little class using the TijsVerkoyen\CssToInlineStylespackage. Please feel free to offer suggestions or point me in a better direction, just needed something quickly.
受到无法开始工作的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;
}
}
Use:
用：
$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('[email protected]')
->bcc($data['recipients']);
});
The converted, inlined HTML/CSS is then passed to emails.raw, which contains only {!! $content !!}.
然后将转换后的内联 HTML/CSS 传递给emails.raw，其中仅包含{!! $content !!}.
Here is the template I use for the majority of my emails - it is essentially a minimal version of Bootstrap for email. I'd give credit to its author but having trouble tracking down exactly where I found it, if someone knows please leave a comment. There are many other templates out there, just search for Bootstrap Email Template or HTML Email Boilerplate.
这是我用于大多数电子邮件的模板 - 它本质上是用于电子邮件的 Bootstrap 的最小版本。我会感谢它的作者，但无法准确地找到它的位置，如果有人知道，请发表评论。还有许多其他模板，只需搜索 Bootstrap 电子邮件模板或 HTML 电子邮件样板即可。
<!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>
A typical email that extends this view would look something like this:
扩展此视图的典型电子邮件如下所示：
@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
