Node.js NodeEmailer:HTML未正确呈现
我正在使用Node.js NodeEmailer:HTML未正确呈现,node.js,email,sails.js,nodemailer,Node.js,Email,Sails.js,Nodemailer,我正在使用nodemailer在注册后发送欢迎邮件，电子邮件模板存储在变量中 var template = '</!DOCTYPE html><html><head><meta charset="utf-8"><meta http -equiv="X-UA-Compatible" content="IE=8; IE=edge,chrome=1"> <title> Cushbu Art</title> <li
nodemailervar template = '</!DOCTYPE html><html><head><meta charset="utf-8"><meta http -equiv="X-UA-Compatible" content="IE=8; IE=edge,chrome=1"> <title> Cushbu Art</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">';
template+= '<style type="text/css"> * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box - sizing: border-box; } p { margin: 0; }';
template+='@font -face{ font - family:"roboto-regular"; src: url("/Roboto-Regular.ttf/"); } body { } main { } . mailer { max - width : 100 %; width: 100 %; margin - left: auto; margin - right: auto; float: left; clear: both; } h2 { font - family: roboto-regular; font - size : 32 px; text - align : center; color: # fff; margin: 0; } h3 { font - family: roboto-regular; font - size : 52 px; text - align : center; color: # fff; margin: 0; } . mailer -head{ width: 100 %; padding: 52px 0; background: url("/mailer-head.png/") no-repeat; background -size: cover; background -color: #fff; } . mailer -body{ width: 100 %; background -color: #fff; float: left; padding: 24px 0; box - shadow : 0 2 px 5 px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } . mailer -body .logo{ height: 60 px; width: 160 px; margin: auto; display: block; background: url("/logo.jpg/") no-repeat center; background -size: contain; } . para { padding: 24px; max - width : 80 %; margin: auto; } . para p { font - size : 20 px; font - family: roboto-regular; text - align : center; color: # 161616; margin: 0; line - height: 34px; } . container-grid{ max - width : 100 %; margin - left: auto; margin - right: auto; width: 100 %; float: left; clear: both; } . grid - 2{ width: 50 %; float: left; padding: 8 px; } . btn { font - family: roboto-regular; font - size : 15 px; text - align : center; color: # fff; border - radius: 2px; text - decoration: none; padding: 8 px 12 px; background -color: #2066df; } . btn - refer{ float: right; } .btn-upload{ float: left; } .signature{ width: 100%; float: left; clear: both; } .signature p{ font-family: roboto-regular; font-size: 15px; text-align: center; padding: 6px 0; } .signature .sign{ height: 60px; width: 160px; margin: auto; display: block; background: url("/sign.png/") no-repeat center; background-size: contain; } .mailer-footer{ width: 100%; float: left; clear: both; padding: 24px 0; background-color: white; /*border-top: 1px solid #ededed;*/ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .mailer-footer ul{ display: table; margin: auto; padding-bottom: 14px; } .mailer-footer ul li{ float: left; list-style: none; } .mailer-footer ul li a{ height: 47px; width: 47px; line-height: 0; border-radius: 50%; cursor: pointer; vertical-align: middle; margin: 10px; display: block; text-decoration: none; } .mailer-footer ul li a i{ padding: 16px 0; color: #fff; display: block; text-align: center; } .btn-fb { background-color: #3B5998; } .btn-li { background-color: #0082CA; } .btn-tw { background-color: #55ACEE; } .btn-ins { background-color: #3F729B; } .btn-pin { background-color: #C61118; } .btn-gplus { background-color: #DD4B39; } .mailer-footer p{ font-family: roboto-regular; font-size: 15px; text-align: center; }.mailer-footer .p-btm{ padding - bottom: 24px; } . mailer -footer .p-top{ padding - top: 24px; } . mailer -footer span{ font - family: roboto-regular; font - size : 15 px; display: block; text - align : center; } . container-mailer-body{ background: #e5e5e5; float: left; width: 100 %; padding: 0 24 px; clear: both; } footer{ background: #e5e5e5; padding: 10px; clear: both; } footer p { font - family: roboto-regular; font - size : 15 px; text - align : center; } </style></head>';
template+= '<body> <main> <div class="mailer"> <div class="mailer-head"> <h2>Welcome</h2> <h3>user!</h3> </div> <div class="container-mailer-body"> <div class="mailer-body"> <div class="logo"></div> <div class="para"> <p>I am so delighted you have joined us here at www.cushbu.com. Our goal is to create a global platform for artists to exhibit, sell their artworks and worldwide visibility for the International art community. If you are interested in promoting your artworks through our site, instead of the sale, we welcome to do so by an active participation by creating and sharing artworks. We heartily invite you to explore our site with new creative artworks and connect with the talented artists all around the world.</p> </div> <div class="container-grid"> <div class="grid-2"> <a href="" class="btn btn-refer">Refer Now</a> </div> <div class="grid-2"> <a href="" class="btn btn-upload">Ulpoad Art</a> </div> </div> <div class="signature"> <div class="sign"></div> <p>Sanata Balakrishnan</p> <p>COO - Cheif Operating Officer</p> </div> </div> <div class="mailer-footer"> <ul> <li> <a type="button" class="btn-floating btn-small btn-fb" href="https://www.facebook.com/cushbuart/" target="_blank"><i class="fa fa-facebook"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-li" href="https://www.linkedin.com/company-beta/13277468/admin/updates/"><i class="fa fa-linkedin"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-tw" href="https://twitter.com/cushbuart"><i class="fa fa-twitter"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-ins" href="https://www.instagram.com/cushbuartlive/"><i class="fa fa-instagram"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-pin" href="https://in.pinterest.com/cushbu/"><i class="fa fa-pinterest"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-gplus" href="https://plus.google.com/u/0/communities/112678263549800648922"><i class="fa fa-google-plus"></i></a> </li> </ul> <p class="p-btm">You are receiving this email because you opted in at our website</p> <span>Email your thoughts to,</span> <span>info@cushbu.com</span> <span>contact@cushbu.com</span> <p class="p-top">You are receiving this email because you opted in at our website</p> </div> </div> </div> </main> < footer> < p > Copyright © 2017 Cushbu Art Pvt Ltd rights reserved</p> < / footer></body ></html>';
var模板='Cushbu Art'；
template+='*{margin:0；padding:0；-webkit框大小：边框框；框大小：边框框；}p{margin:0；}'；
template+='@font-face{font-family:“roboto-regular”；src:url（“/roboto-regular.ttf/”）；body{}main{}。mailer{max-width:100%；width:100%；margin-left:auto；margin-right:auto；float:left；clear:bot；}h2{font-family:roboto regular；font-size:32 px；text-align:center；color:#fff；margin:0；}h3{font-family:roboto regular；font-size:52 px；text-align:center；color:#fff；margin:0；}。mailer-head{width:100%；padding:52px 0；background:url（“/mailer-head.png/”）不重复；background-size:cover；background-color:#fff；}。mailer-body{宽度：100%；背景色：fff；浮动：左；填充：24px0；框阴影：02px5px0rgba（0,0,0,0.16），02px10px0rgba（0,0,0,0.12）；}。mailer-body.logo{高度：60像素；宽度：160像素；边距：自动；显示：块；背景：url（“/logo.jpg/”）无重复中心；背景-大小：包含；}。段落{填充：24px；最大宽度：80%；边距：自动；}。parap{字体大小：20px；字体系列：roboto regular；文本对齐：居中；颜色：#161616；边距：0；线条高度：34px；}。容器网格{max-width:100%；margin-left:auto；margin-right:auto；width:100%；float:left；clear:both；}。网格-2{宽度：50%；浮点：左；填充：8px；}。btn{font-family:roboto regular；font-size:15px；text-align:center；color:#fff；border-radius:2px；text-decoration:none；padding:8px 12px；background-color:#2066df；}。btn-参考{float:right；}.btn上传{float:left；}.signature{width:100%；float:left；clear:both；}.signature p{font-family:roboto-regular；font-size:15px；text-align:center；padding:6px 0；}.signature.signature{高度：60px；宽度：160px；边距：自动；显示：块；背景：url（“/sign.png/”）无重复中心；背景大小：包含；}。美勒页脚{宽度：100%；浮动：左；清除：两者；填充：24px 0；背景颜色：白色；/*边框顶部：1px实心#ededed；*/框阴影：02px 5px 0 rgba（0,0,0,0,0.16），02px 10px 0 rgba（0,0,0,0.12）}。美勒页脚ul{显示：表格；边距：自动；填充底部：14px；}.mailer footer ul li{float:left；list style:none；}.mailer footer ul li a{height:47px；width:47px；线宽：0；边框半径：50%；光标：指针；垂直对齐：中间；边距：10px；显示：块；文本装饰：none；}.mailer footer ul li i{padding:16px 0；颜色：#fff；显示：块；文本对齐：中心；}.btn fb{背景色：{3B5998；}.btn li{背景色：{0082CA；}.btn tw{背景色：{55ACEE；}.btn ins{背景色：{3F729B；}.btn pin{背景色：{C61118；}.btn gplus{背景色：{DD4B39；}.mailer页脚p{字体系列：roboto常规；字体大小：15px；文本：页脚中心对齐。}{padding-bottom:24px；}.mailer-footer.p-top{padding-top:24px；}.mailer-footer span{font-family:roboto-regular；font-size:15px；display:block；text-align:center；}.container-mailer-body{background:#e5e5e5；float:left；宽度：100%；padding:024px；clear:tware；}footer{背景：#e5；填充：10px；清除：两者；}页脚p{字体系列：roboto常规；字体大小：15px；文本对齐：中心；}'；
template+='欢迎用户！我很高兴您能加入我们的网站www.cushbu.com。我们的目标是创建一个全球平台，让艺术家们展示、销售他们的艺术品，并在全球范围内为国际艺术界带来知名度。如果您有兴趣通过我们的网站推广您的艺术品，而不是通过销售，我们欢迎您这样做因此，通过创作和分享艺术品来积极参与。我们诚挚地邀请您用新的创意艺术品探索我们的网站，并与世界各地有才华的艺术家联系。Sanata BalakrishnanCOO-Cheif运营官
您之所以收到此电子邮件，是因为您选择了我们的网站
将您的想法发送到，info@cushbu.com contact@cushbu.com您之所以收到此电子邮件，是因为您选择了我们的网站
；
var transporter = nodemailer.createTransport({
host:'XX',
port :465,
secure: true,
auth: {
user: 'XX',
pass: 'XX'
}
});
var mailOptions = {
from: '<sender>', // sender address
to:'me@me.com', // list of receivers
subject: 'Welcome', // Subject line
html:template
};
transporter.sendMail(mailOptions, function(error, info) {
if (error) {
res.send(error);
return console.log("Error ",error);
}
res.send('Message %s sent: %s', info.messageId, info.response);
});
var transporter=nodeEmailer.createTransport({
主持人:"XX",，
港口：465，
安全：是的，
认证：{
用户：“XX”，
通行证：'XX'
}
});
var mailpoptions={
发件人：''，//发件人地址
致：'me@me.com“，//接收者列表
主题：'欢迎'，//主题行
html：模板
};
transporter.sendMail（邮件选项，函数（错误，信息）{
如果（错误）{
res.send（错误）；
返回console.log（“错误”，Error）；
}
res.send（'消息%s已发送：%s'，info.messageId，info.response）；
});
但问题是，电子邮件没有正确呈现HTMl，样式丢失了我不是这方面的权威，但我相当确定电子邮件的HTMl负载应该比完整文档简单得多。是否呈现，以及样式的复杂程度实际上取决于接收者使用的客户端查看电子邮件（gmail、thunderbird等） 我肯定会使用一些经验法则：
- 不要期望包含
元素中的任何内容。我甚至会省略
，而只使用
或
o