尝试使用nodemailer发送模板电子邮件并使用 Handlebars 制作模板。
电子邮件确实已发送，但电子邮件的样式不正确。看起来像这样
我已附上我在 Handlebars 模板中编写的内容
<!DOCTYPE html>
<html>
<head>
<title>Welcome to</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Cabin');
body { margin: 0; padding: 0; left: 0; top: 0; background-color: white; }
h1 { font-family: 'Cabin'; font-weight: 600; color: rgba(5,45,84,1); margin-left: 2px;}
p { font-family: 'Cabin'; font-weight: 400; font-size: 11pt; color: rgba(5,45,84,1); margin-left: 2px; }
h3 {
margin-top: 50px;
color: rgba(5,45,84,.25);
font-family: 'Cabin';
font-weight: 400;
font-size: 10pt;
width: 80vw;
}
h2 {
text-align: center;
margin-top: 25px;
margin-bottom: 10px;
color: rgba(5,45,84,1);
font-family: 'Cabin';
font-weight: 400;
font-size: 10pt;
}
h3 > a { color: rgba(118,146,255,1); }
h3 > a:hover { cursor: pointer; }
h3 > a:active { opacity: .75; }
.page-container { width: 80vw; margin-left: 10vw; }
.logo { margin-left: 2px; height: 30px; margin-top: 20px; margin-bottom: 20px; }
.divider { height: 1px; width: 100%; background-color: rgba(5,45,84,.1); margin-bottom: 40px; }
.button-container {
width: 100%;
height: 50px;
margin-top: 25px;
margin-bottom: 25px;
display: flex;
flex-direction: column;
}
.cta {
transition: all 200ms;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 46px;
color: white;
font-size: 11pt;
font-family: 'Cabin';
font-weight: 500;
padding-left: 20px;
padding-right: 20px;
background-color: #7692FF;
border-radius: 5px;
margin-top: 0px;
margin-bottom: 4px;
box-shadow: 0px 4px rgba(118,146,255,.25);
}
.cta:hover {
cursor: pointer;
}
.cta:active {
margin-top: 4px;
margin-bottom: 0px;
box-shadow: 0px 0px rgba(118,146,255,.25);
}
.footer-container {
width: 100%;
margin-top: 50px;
padding-bottom: 10px;
background-color: rgba(5,45,84,.04);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="page-container">
<div class="divider"></div>
<h1>Welcome to</h1>
<p>
Hi Matthew, thanks for signing up for. We're so happy to have you! almost ready to join your first group. Click the link below to verify your email.
</p>
<div class="button-container">
<div class="cta">
GET STARTED
</div>
</div>
<p>
We'll reach out again when we're ready for you to start using. Just reply to this email if you have any questions.
</p>
<p>
- Team Something
</p>
</div>
<div class="footer-container">
<h3 class="footer">
If you need help, respond to this message. If this message was sent to you by mistake and you did not sign up for an account with us, we apologize.
</h3>
<h2>a9 Something 2018</h2>
</div>
</body>
</html>
在我看来，有些样式不适用，从谷歌导入的字体，按钮上单词的居中和框阴影。 Flex 可以与 Handlebars 配合使用吗？
最佳答案
电子邮件客户端因显示问题而臭名昭著。始终建议使用嵌套表格和一些基本元素，但主要是表格。
使用内联样式，并尽可能保持基本样式。大多数 HTML5 都不会得到完全支持。
关于html - 使用nodemailer发送模板电子邮件，样式损坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53452155/