php - 如何在 Symfony Mailer 上通过 Bootstrap 使用模板电子邮件?
问题描述
我一直在关注一些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@email.com', '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()
函数中,但它不起作用。
I have tried this Github issue by creating a file macros.html.twig
, then importing them in the template and adding {{ encore_absolute_link_tags('app') }}
and {{ encore_absolute_script_tags('app') }}
in the layout. But I still don't have any applied styles to the email.
What is the right way to import Webpack/Encore styles / scripts to templated emails?
解决方案
Most email clients will not download external CSS files and apply styles and apply them to the email HTML. You really shouldn't count on that (and linking to an external javascript file is even less likely to succeed, as it appears you are doing in your example).
Not only that, but email clients will most of the time ignore any <style>
tags, even if the resources are not external.
What you should do is use the advise in the documentation and inline your CSS styles.
{% apply inline_css(source('@css/email.css')) %}
<h1>Welcome {{ username }}!</h1>
{# ... #}
{% endapply %}
But inlining styles generated by webpack encore is is not as straigh-forward and requires you jump a few more hoops.
This guide explains how to do it for Foundation styles, but it's easily adjusted for Bootstrap.
推荐阅读
- python - SQL:如何使用 pyodbc 从选择查询中获取最新/最大 ID
- python - 当树莓派使用 /etc/rc.local 启动时如何运行多个 python 脚本
- javascript - 删除 JavaScript 对象数组中的重复项并对条目求和
- apache-spark - Spark Executor 以本地或独立模式登录
- python - Jinja2 数字格式
- reactjs - How to avoid useRef when the parent wants the child to do something?
- java - 如何使用 apche 元模型将数据插入 csv 文件?
- generics - 如何从通用函数指针迭代两个迭代器之一(没有 Box)
- html - 可以强制 html datalist 仅下拉吗?
- docker - 尝试在 Docker 容器中的 Debian 上运行 Zookeeper 时出错