Laravel 电子邮件模板样式

The*_*ine 3 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
Run Code Online (Sandbox Code Playgroud)

以上是示例模板

谢谢你。

Eri*_*rin 5

Laravel 会自动从你主题的 CSS 文件中移动样式并将其放入内联。请参阅文档中的自定义 CSS

  1. 发布默认主题的布局和 css: php artisan vendor:publish --tag=laravel-mail

  2. 这会给你一个default.css文件resources/views/vendor/mail/html/themes。中的“默认”default.css是您的主题名称。

  3. (可选)将resources/views/vendor/mail目录复制到对您的应用最有意义的位置。例如resources/views/mail

  4. (可选)自定义 .html 中的 HTMLmail/layout.blade.php或 CSS 中的mail/themes/default.css.

  5. 设置您的配置。编辑/config/mail.php并提供邮件布局和主题名称的路径:


    // in config/mail.php

    /*
    |--------------------------------------------------------------------------
    | Send Emails Using Markdown
    |--------------------------------------------------------------------------
    |
    */

    'markdown' => [
        'theme' => 'default',            # The name of your theme (default.css)
        'paths' => [                     # The path to your /html and /text dirs
            resource_path('views/emails/layouts')
        ]
    ],

Run Code Online (Sandbox Code Playgroud)
  1. (可选)如果要创建多个“主题”,请复制并重命名样式表 - 例如mytheme1.css. 然后,您使用该主题将 CSS 文件的名称用作 Mailable 上的属性。

   // in e.g. app/Mail/MyMailable.php

    /**
     * The name of the theme that should be used when formatting the message.
     *
     * @var string|null
     */
    public $theme = "mytheme1.css";
Run Code Online (Sandbox Code Playgroud)

主题文件中的 CSS 将“自动内联在 Markdown 邮件消息的 HTML 表示中”。


小智 2

对电子邮件使用内联 css 是正确的。

如果我们采用这行代码:

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

内联 CSS 从 style 标签开始。此时类标签什么也不做。<style></style>要解决此问题,您可以在电子邮件标题中添加一个。所以你会得到这样的东西:

<head><style>.img-responsive {margin-top: -20px; margin-left: -5px; width=329px; height=67px}</style></head>

现在您可以在代码中使用 img-responsive 类。

请注意,如果您使用 bootstrap css,则需要将其放入样式代码中。