Php Laravel电子邮件模板样式

Css在电子邮件模板中不起作用，所以我客户的任何电子邮件看起来都很难看，在谷歌搜索了很多次之后，我看到了Laravel Css内联的解决方案，但我不知道如何使用它们

任何有助于我加载css的解决方案

@extends('layouts.master')
@section('title')
    XXXX | WELCOME
@endsection``
@section('body')
<div class="page text-center">

  <!-- Page Head-->
        <!-- Page Contents-->
  <main class="page-content">
    <!-- Search Engine-->
    <section class="section-98 section-sm-110">
      <div class="shell">
        <div class="offset-sm-top-66">
           <center>
            <img class='img-responsive' style='margin-top: -20px;margin-left: -5px;' width='329' height='67' src="{{URL::to('/images/icon1.png')}}" alt=''/>
          </center>
          <!-- Responsive-tabs-->
          <div data-type="horizontal" class="responsive-tabs responsive-tabs-classic">
            <p class="text-center alert alert-info">Welcome to XXXX <br> please verify your account by entering digits sent via sms.</p>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>
@endsection

@extends（'layouts.master'））
@章节（“标题”）
欢迎光临
@端部``
@第节（“正文”）
欢迎使用XXXX
请输入通过短信发送的数字来验证您的帐户
@端部

上面是示例模板

---

谢谢。

在电子邮件中使用内联css是正确的

如果我们采用这一行代码：

<img class='img-responsive' style='margin-top: -20px;margin-left: -5px;' width='329' height='67' src="{{URL::to('/images/icon1.png')}}" alt=''/>

内联css从样式标记开始。此时，class标记什么也不做。要解决这个问题，您可以在电子邮件的标题中添加一个

。所以你会得到这样的东西：

.img responsive{页边距顶部：-20px；页边距左侧：-5px；宽度=329px；高度=67px}

现在，您可以在代码中使用img响应类

要知道，如果您使用的是引导式css，则需要将其放入样式代码中。

以下是我所做的：

创建一些目录来保存模板、css和其他相关内容（可能是图像）的源文件。我把它放在resources/src/emails/下，结构如下：

/-保存package.json和gulp文件。
/资产/样式表-将css文件放在此处
/资产/模板-只需将模板文件放在此处

安装gems'premailer'和'nokogiri'（最好使用Gemfile）（这需要Ruby）

您需要随npm安装以下软件包：

• 吞咽
• 大口预卷机
• 吞咽html实体
• 在我的具体案例中，我们还使用了大口大骂和咖啡脚本

运行gulp并使用以下gulp文件（gulpfile.coffee，因为这是coffee脚本）构建模板

你将不得不调整这一点，以满足自己的需要。例如，我目前只有1个scss文件。我们还将使用的图像移动到public/等下的特定文件夹中

我遇到的最大问题是，premailer gem用它的html实体替换字符。这当然是一个问题，因为在我们的刀片模板中，我们使用“{”和“}”以及“>”（当使用类似$model->name的东西时） 现在通过使用html实体库解决了这个问题，并将其解码回来。这个解决方案似乎对我有效。但请记住，您很可能会遇到问题。

使用降价模板

创建一个视图：

php artisan make:mail MailableClass --markdown=markdown_view

使用markdown（）方法指定视图：

#/app/Mail/MailableClass.php
    public function build() {
        return $this->from(…)
                    ->markdown('view_name');
    }

您还可以通过以下方式更改默认主题：

php artisan vendor:publish --tag=laravel-mail

---

默认样式将位于/resources/views/vendor/mail/html/themes/default中。css

Laravel将自动从主题的css文件中移动样式并将其内联。请参见中的自定义CSS

发布默认主题的布局和css:

php artisan供应商：Publish--tag=laravel mail

这将在

resources/views/vendor/mail/html/themes

中为您提供一个

default.css

文件。

default.css

中的“default”是您的主题名

（可选）将

resources/views/vendor/mail

目录复制到对应用程序最有意义的位置。e、 g.

resources/views/mail

（可选）自定义

mail/layout.blade.php中的HTML或
mail/themes/default.CSS中的CSS

设置您的配置。编辑

/config/mail.php

，并给出邮件布局的路径和主题名称：

//在config/mail.php中
/*
|--------------------------------------------------------------------------
|使用降价发送电子邮件
|--------------------------------------------------------------------------
|
*/
“降价”=>[
'theme'=>'default'，#主题的名称（default.css）
“路径”=>[#指向/html和/text目录的路径
资源路径（“视图/电子邮件/布局”）
]
],

（可选）如果要创建多个“主题”，请复制并重命名样式表-例如

mytheme1.css

。然后使用CSS文件的名称作为使用该主题的邮件的属性

//例如在app/Mail/MyMailable.php中
/**
*格式化邮件时应使用的主题的名称。
*
*@var字符串|空
*/
public$theme=“mytheme1.css”；

---

主题文件中的CSS将“自动排列在降价邮件消息的HTML表示形式中。”

外部CSS存在问题，在页面上留下

标记和内联

style=“

属性。电子邮件可能非常挑剔，最好保持设计尽可能简单，图像尽可能少。一般来说，当你设计HTML电子邮件时，假装是1999年，不要使用任何花哨的HTML和CSS。如果您希望它在大多数客户机中工作，请使用表和内联样式。是否有任何库或任何其他预编译解决方案？谢谢

php artisan vendor:publish --tag=laravel-mail