在Symfony 3的电子邮件模板中包含css

时间:2016-07-15 16:57:41

标签: html css twig symfony

我正在尝试使用Symfony 3创建一个漂亮的电子邮件模板,但除了像balise这样的基本html代码之外什么都没有用。

这是我的父模板:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">

        {% block stylesheets %}
            {% stylesheets 
                'bundles/platform/bootstrap/css/bootstrap.min.css'
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.eot'
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.svg' 
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.ttf' 
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.woff' 
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.woff2'  
                filter='cssrewrite' %}
                <link rel="stylesheet" href="{{ asset_url }}" />
            {% endstylesheets %}
        {% endblock %}
    </head>
    <body> 

        <div id="content-block" class="row">
            {% block contentBlock %}
            {% endblock %}
        </div>

        {% block javascripts %}
            {% javascripts 
                '@PlatformBundle/Resources/public/bootstrap/js/bootstrap.min.js' 
                %}
                <script src="{{ asset_url }}"></script>
            {% endjavascripts %}
        {% endblock %}
    </body>
</html>

子模板:

{% extends "PlatformBundle:Emails:template_email.html.twig" %}

{% block contentBlock %}

    <div class="text-center"><h2>New asking</h2></div>

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2 well">

        <p> ask from : {{authorEmail}} </p>
        <p> Subject: {{subject}} </p>
        <p> {{content}} </p>

    </div>
{% endblock %}

最后是在我的控制器中发送邮件的功能:

$renderedTemplate = $this->container->get('templating')
        ->render('PlatformBundle:Emails:contact_from_user.html.twig', array('subject' => $subject, 'authorEmail' => $authorEmail, 'content' => $content));

$message = \Swift_Message::newInstance()
        ->setSubject($subject)
        ->setFrom($platform->getEmail())
        ->setTo($toEmail)
        ->setBody($renderedTemplate, 'text/html');    

所以,我的问题是:如何使我的模板使用附加的css,或者如果不可能如何呈现一个漂亮的电子邮件,例如:

enter image description here

编辑:

对于那些想要的人来说,这里有一个很棒的响应式电子邮件模板,可以向杰作们展示好的东西: responsive-html-email-template

1 个答案:

答案 0 :(得分:2)

在电子邮件中包含css文件的问题是很多电子邮件阅读器(例如Gmail)会阻止它们。

最好的方法是为html模板的每个元素添加style =“”标记。

因为您正在使用twig,所以您可以创建变量并在模板中使用它们,以避免每次都写入css规则。