如何在Symfony Mailer上使用Bootstrap的模板化邮件?

问题描述 投票:1回答:1

我一直在关注一些 Symfony Casts教程 发送电子邮件,使用 Symfony Mailer 捆绑包。我也在使用安装了NPM和Webpack Encore的Bootstrap 4。我不知道如何为这些模板化的邮件提供样式。

一些控制器

use Symfony\Bridge\Twig\Mime\TemplatedEmail;
use Symfony\Component\Mailer\MailerInterface;
use Symfony\Component\Mime\Address;

class SomeController extends AbstractController
{
    public function send(MailerInterface $mailer)
    {
        $email = (new TemplatedEmail())
            ->from(new Address('[email protected]', 'My app'))
            ->to(new Address($contact_form->getEmail(), $contact_form->getName()))
            ->subject('Hemos recibido tu mensaje')
            ->htmlTemplate('email/contact_form.html.twig');

        $mailer->send($email);
    }
}

模板 email/contact_form.html.twig 正在延伸 email/layout.html.twig:

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{{ absolute_url(asset('build/app.css')) }}">
</head>
<body>
{% block body %}{% endblock %}
<script src="{{ absolute_url(asset('build/app.js')) }}"></script>
</body>
</html>

当我看到邮件的HTML源时,样式和脚本都有正确的链接参考,但无论如何它们都没有应用任何样式或脚本。

通常,在 "正常 "的布局模板中,我使用了 {{ encore_entry_link_tags('app') }}{{ encore_entry_script_tags('app') }} 但那会生成一个相对路径的URL,我试过将它们包裹在 absolute_url() 功能,但它不工作。

我已经尝试了 这个Github问题 通过创建一个文件 macros.html.twig,然后在模板中导入它们,并加入 {{ encore_absolute_link_tags('app') }}{{ encore_absolute_script_tags('app') }} 的布局中。但是我仍然没有应用任何样式到邮件中。

如何将WebpackEncore样式脚本导入到模板邮件中?

php symfony twig webpack-encore symfony-mailer
1个回答
2
投票

大多数电子邮件客户端将 下载外部CSS文件并应用样式并将其应用到邮件HTML中。你真的不应该指望这一点(而且链接到外部javascript文件更不可能成功,就像你在例子中做的那样)。

不仅如此,电子邮件客户端在大多数情况下会忽略所有的 <style> 标签,即使资源不是外部资源。

你应该做的是使用文档中的建议和 内联你的CSS样式.

{% apply inline_css(source('@css/email.css')) %}
    <h1>Welcome {{ username }}!</h1>
    {# ... #}
{% endapply %}

但是由webpack encore生成的内联样式并不是那么简单,需要你多跳几个圈。

这个 指南 解释了如何为Foundation风格做这件事,但它很容易调整为Bootstrap。

© www.soinside.com 2019 - 2024. All rights reserved.