时间戳

首页 > 解决方案 > 如何使用 NodeJS Handlebars 发送引导模板？

node.js - 如何使用 NodeJS Handlebars 发送引导模板？

问题描述

我有一个引导模板，我试图用 NodeMailer 发送它，这是发送的一段代码

 const handlebarOptions = {
    viewEngine: {
      extName: '.hbs',
      partialsDir: path.resolve('./views/startcompra/') ,
      layoutsDir: path.resolve('./views/startcompra/'),
      defaultLayout: ''

    },
    viewPath: path.resolve('./views/startcompra/'),
    extName: '.hbs',
  };





return transport.use('compile' , hbs(handlebarOptions)).sendMail({
        from: "FastExpress <ferm0494@gmail.com>",
        to: mail,
        subject: "Orden:  "+id,
        html: index,
        context:{
            nombreCliente: nombrecliente,
            idCompra: id,
            NombreEmpresa: nombreemp,
            Total: precio 



        }, 
        attachments: [

            {
              filename: 'logo2.png',
              path:__dirname+'/views/startcompra/img/logo2.png',
              cid: 'logo2',

            },


            {
              filename: 'logo.png',
              path:__dirname+'/views/startcompra/img/logo.png',
              cid: 'logo',

            },




        ]






      }).then(r => r).
catch(e=>e);

这是我的 Index.hbs ：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Compra Nueva</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<style type="text/css">

.jumbotron1{
    background-image: url("cid:logo2");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin-bottom: 0px;
       
       
        


}

.borderCustomized{
border-radius: 2px;

border-style: solid;

}






</style>
<body>

<div class="jumbotron jumbotron1"  >
   
</div>

<div class="container-fluid bg-warning text-center p-0" style="height: 70px">
<h2 class= "text-white p-3 ">Te Han Agendado una Venta! </h2>

</div>
<div class="container-fluid borderCustomized " style="padding: 0; margin-top:5px; ">
<div class="class list-group" >
    <a  class="class item-group-item border ">
        <h5 class="class list-group-item-heading">Nombre de Cliente :</h5>
        <p class="class list-group-item-text"> {{nombreCliente}}</p>

    </a>

    <a  class="class  item-group-item border " >
            <h5 class="class list-group-item-heading ">Total :</h5>
            <p class="class list-group-item-text"> {{Total}}</p>
    
        </a>

        <a  class="class item-group-item border">
                <h5 class="class list-group-item-heading">Nombre de Vendedor (Empresa):</h5>
                <p class="class list-group-item-text"> {{NombreEmpresa}}</p>
        
            </a>


            <a  class="class item-group-item border bg-warning">
                    <h5 class="class list-group-item-heading">Para Conocer Mas detalles Ingresa el Siguiente Id en la App:</h5>
                   <div class="row">
                        <div class="col-3">
                                <i class="far fa-copy  ml-5 float-right "></i>
                   

                        </div>

                            <div class="col-9">
                                    <h6 class="class  list-group-item-text text-danger text-left   " style="font-size: 20px"> {{idCompra}}</h6>

                            </div>
                   </div>
            
                </a>




</div>



</div>

<div class="container-fluid borderCustomized">
        <div class="row h-100 ">
          <div class="col  ">
          <img class="float-right "src="cid:logo" width="75" height="75">
    
          </div>
    
          <div class="col align-self-center ">
            <p class="font-italic text-muted ">FastExpress@service.org</p>
    
    
          </div>
    
    
        </div>
    
    

</body>
</html>

问题是当仅在元数据上发送电子邮件时，没有呈现引导样式。

->我也想将图像作为附件发送，但图像必须从存储（Firebase）下载任何想法如何？

标签： node.jsfirebasebootstrap-4handlebars.jsnodemailer

解决方案

邮箱 

  doesn't support  linking script and style dynamically.like we use in our website.

  It only support simple html with css.

您的问题的解决方案： 

Solution 1: 

Step1 :  You can create your template with simple html and css. 

Step2 :  Then you can make your css inline with your html using online 
        converter like https://www.myintervals.com/emogrifier.php 

Solution 2 : 

You can get many email templates for free online which has simple html with css. ( https://colorlib.com/wp/responsive-html-email-templates/ )

So, you just need to make changes as per your requirement

就是这样，您现在可以使用您的模板作为您的邮件模板。

推荐阅读